đī¸Checkout Element Form (Pro)
In this tutorial we'll walk you through creating a straightforward payment form with a payment element field. This form is designed to accept multiple payment methods, Here's a step-by-step guide.
Last updated
In this tutorial we'll walk you through creating a straightforward payment form with a payment element field. This form is designed to accept multiple payment methods, Here's a step-by-step guide.
Last updated
In this sample, both the Elementor Pro and our Payment Addons Pro are required
To begin, create a new page or post, and use Elementor for editing.
Next, drag and drop the Elementor Form onto your page (you can search for it using the keyword "form" or find it under the "PRO" category)
Add form fields one by one, such as Email, Name, Quantity, and Event. It's important to assign meaningful IDs to the email and event fields, as they will be used as the customer's email and payment price, respectively. These IDs are crucial because they will be linked with shortcodes.
You can replace the Event field with any field that represents a price, whether it's a fixed value like in this example or a number input field that allows users to enter a dynamic price. The key is to ensure that the field is properly linked to the payment process.
Continue above, we can insert a Payment Element type field which is exclusively available for our Professional plan users
Our form UI settings are now complete and will look similar to the example below. However, the payment form is not yet complete, as we still need to add the form submission action to process payment collection.
Similar to other built-in submissions like 'collection submission', 'Email', 'Redirect', etc, we provide a payment submission called `Payment Element submission` to handle the checkout-related collection.
Once we select the action, two sections will show up below and I will explain them one by one:
Whether to append wallets like Apple Pay or Google Pay within payment methods.
1), We need to activate Google & Apple Pay in Stripe payment method setting https://dashboard.stripe.com/settings/payment_methods
2), The Apple Pay needs domain verification, you can follow the stripe guide between to verify it
By default, the stripe checkout page will list all available payment methods in which your stripe account is activated. If you want only to allow some of them, you can choose them here.
Some of the payment methods may become unavailable if they do not support the currency.
Customize the default payment method order. Unspecified methods display after defined ones (e.g. Card & Google Pay means Card first, then Google Pay and others).
Three themes supported so far: Stripe, Night, Flat
Customize the Payment Elementâs layout to fit your checkout flow: Two layouts supported so far: Tabs, Accordion
Controls if the Payment Element renders in a collapsed state.
All the configurations are the same as the Credit Card Form Submission, please refer to the form submission section for a detailed explanation:
