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

1. To begin, create a new page or post, and use Elementor for editing.

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

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

Theme

Three themes supported so far: Stripe, Night, Flat

Layout

Customize the Payment Element’s layout to fit your checkout flow: Two layouts supported so far: Tabs, Accordion

Default Collapsed

Controls if the Payment Element renders in a collapsed state.

Include Radio (Only for Accordion layout)

Include Spaces (Only for Accordion layout)

---

Payment Element Submission

All the configurations are the same as the Credit Card Form Submission, please refer to the form submission section for a detailed explanation:

Checkout Credit Card Form (Pro) | elementor pay addonsdocs.payaddons.com