🏎️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.

In this sample, both the Elementor Pro and our Payment Addons Pro are required

Create form fields

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.

Add Payment Element field

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.

Form submission actions

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:

Payment Element UI
Payment Element Submission

Payment Element UI

Google Pay & Apple Pay

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

Payment Methods

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.

Payment Methods Order

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).