# Checkout Element Form (Pro)
{% hint style="warning" %}
In this sample, both the **Elementor Pro** and our **Payment Addons Pro** are required
{% endhint %}
### 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)
3. 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**.
{% hint style="info" %}
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.
{% endhint %}
### 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:
* [x] Payment Element UI
* [x] Payment Element Submission
### Payment Element UI
#### Google Pay & Apple Pay
Whether to append wallets like Apple Pay or Google Pay within payment methods.
{% hint style="warning" %}
1\), We need to activate Google & Apple Pay in Stripe payment method setting
2\), The Apple Pay needs domain verification, you can follow the stripe guide between to verify it
{% endhint %}
#### 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.
{% hint style="warning" %}
Some of the payment methods may become unavailable if they do not support the currency.
{% endhint %}
#### 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:
{% embed url="" %}
