🎨Custom Payment Form
Create Custom Payment Forms with Drag-and-Drop Simplicity
Don't have an Elementor Pro license? No problem. Our free form builder provides similar functionality to Elementor Pro's forms, enabling you to create professional payment forms with 10+ essential form fields and specialized payment elements.
Creating Your Payment Form
Create a new post using the Elementor builder
Navigate to the Pay Addon category in the Elements panel
Locate the Payment Form element
Drag and drop it into your canvas
Adding Form Fields
Customize your form by adding fields that suit your needs. We currently support the following field types:
Basic Fields: Text, Email, Textarea, URL, Password, Hidden, HTML
Numeric Fields: Decimal, Number
Selection Fields: Radio, Select, Checkbox
Date & Time Fields: Date, Time
Credit Card and Payment Elements are available in the premium version.
Styling Your Form
Our form builder offers complete customization control. You can adjust field sizes, button dimensions, and apply your own styling to match your brand identity perfectly.
Configuring Payment Actions
Once your form structure is complete, configure how payments are processed when customers click the submit button.
Available submission methods:
Free Plan: Checkout Redirection
Pro Plan: Credit Card Submission, Payment Element Submission
Each submission method has its own configuration options.
Stripe Checkout Redirect Configuration
In the Payment Action, we choose 'Checkout Redirect'. Once it's been selected, the two new sections will show up: Stripe Checkout Redirect and Stripe Checkout Redirect Fields.
Setting Up Checkout Redirect
Select 'Checkout Redirect' in the Payment Action settings. This will reveal two new configuration sections:
Stripe Checkout Redirect
Stripe Checkout Redirect Fields
Stripe Checkout Redirect section
Payment Methods: Specify which payment methods your customers can use. Select "Automatic" to inherit the payment methods activated in your Stripe Dashboard.
Success Redirect URL: Define where customers are sent after completing their payment (your "Thank You" page). You can create a custom confirmation page using our Confirmation shortcode.
Cancel Redirect URL: Specify the page customers see when they cancel the payment process on the Stripe checkout page.
Billing Address: Enable this option for payment scenarios that require billing address collection on the Stripe checkout page.
Promotion Codes: Allow customers to apply coupon codes created in your Stripe Dashboard during checkout.
Automatic Taxes:
Tax calculation can be complex, but it's essential for accurate payments. When enabled, taxes are calculated dynamically based on the customer's billing or shipping address. You'll need to specify the tax behavior:
Exclusive: Tax is added to the base amount (e.g., $10 item + tax = $10.XX total)
Inclusive: Tax is already included in the price (e.g., $10 item = $10 total)
Phone number: Collect the customer's phone number as a required field on the Stripe checkout page.
Terms of service: Display a terms of service link on the Stripe checkout page. Ensure you've created your Terms of Service content in the Stripe Dashboard beforehand.
Shipping Address Countries: Leave empty to allow all countries, or specify which countries customers can select for shipping addresses.
Metadata: Attach additional payment information (such as order IDs) that won't be visible to customers but can be used for internal tracking and reference.
Stripe Checkout Redirect Field Section
This section handles payment configuration by mapping pricing, customer, and product-related fields.
Customer email field: Enter the form field shortcode. When specified, this email will be pre-filled on the Stripe checkout page.
Payment Type: Choose from three options:
One-time: For standalone purchases
Subscription: For recurring subscriptions
Flex: Dynamically collects either one-time or subscription payments based on conditional logic
When using Flex payment type, you can set conditions (for example, if a checkbox with ID "sub-checked" is selected, the payment will be processed as a subscription using your subscription settings).
One-time payment setting
Same as https://docs.payaddons.com/elements/checkout-credit-card-form-pro#one-time-payment-settings
Subscription payment setting
Same as https://docs.payaddons.com/elements/checkout-credit-card-form-pro#subscription-payment-settings
Testing Your Form
After configuring your form and submission settings, test the complete payment flow. When everything is set up correctly, customers will be redirected to the Stripe Checkout page displaying all the features you've configured:
Payment methods
Tax calculations
Promotion code field
Shipping address or phone number fields
Terms of service link
etc.
Monitoring Transactions
After completing transactions, view all form submissions in the transaction list page. This gives you a comprehensive overview of all payment activities.
Important: Webhook configuration is required for transaction reporting to function properly.
Last updated