The Payment form element is an element that allows you to accept payments for selected products, as well as collects data on the willingness of site visitors to purchase a product or refuse it. In this section, you can choose the form of payment, confirmation of sale or refusal of sale.
Click on the desired section of the article to go to its description:
Creating a Payment Form
To create a Payment Form, go to the “Sites” tab and click on the name of the site, or click the “Add site" button. Read about how to add a website in the article “Sites".
Open the Page editor. Select "Create new block" and click "Add Element". In the list of items, select "Payment form". The list will open: "Payment Form", "Upsell Accept Button", "Upsell Decline Button". Select the "Payment Form" element by transferring it to the element.
Select the entire payment form to open the settings for this item. A toolbar opened on the right.
Element Settings
Products. In the Products field, specify one or more course products. Read about how to create a product on the AXL platform in the article "Products and Offers".
If you select multiple products, they must be in the same currency. You can change the sequence of products in the list. To do this, hold down the "Move" button next to the product name and hold it down and drag it to another place in the list.
Mode. If you add several products to the payment form, set the selection mode.
- When selecting the "All" mode, the user will buy all the products added to the form, without being able to select one from the list.
The “Product Selection” mode allows the user to select only one of the suggested products.
The "Multi" mode allows the user to select one or more of the products offered in the form.
Upsell. Upsell pages are a sequence of pages to which a user will be redirected after successfully paying for their initial order in a sales form. On upsell pages, the user will be offered the opportunity to purchase additional products. Upsell pages appear as additional sales steps in the process, after the customers have already decided to purchase the main product.
Move the slider to the active position and add the URL of the upsell page created using the AXL platform. For instructions on creating a upsell page, see the article "Upsell Page".
Please note that the upsell page will work if the payment settings of the selected payment method include the feature "Save card details for future payments where applicable." For more information on payment settings, please refer to the article "Payment Settings".
The upsell page automatically opens after the customers have entered their payment information in the payment form. They allow the purchase of an additional product, which is added to the order and does not require re-entering payment information.
You can customize one or more upsell pages. When setting up two pages Upsell, the user will be automatically sent to the first upsell page after paying for the main product.
Further on the first upsell page, when the user clicks the "Accept offer" button, he will be directed to the payment page for the additional product. And after payment sent to the second upsell page. By clicking the "Decline" button, the user will be immediately sent to the second upsell page.
On the second upsell page, the user will also either be sent to the payment page for the second additional product and then to the gratitude page, or when the "Decline" button is clicked, it will be sent immediately to the gratitude page.
When setting up three or more upsell pages, the user will be automatically sent to each upsell page in turn after completing the actions on the previous page.
Thank you page. This page will be shown upon successful payment. If you did not create a separate thank you page, the successful payment page created automatically will be displayed. Move the slider to the active position and add the URL of the thank you page created using the AXL platform. Instructions for creating URL of the thank you page can be found in the "Sites" section.
Run JS code. For advanced users. In this field, you can specify your Java script and it will run when submitting the form. You can run the JS code when submitting the form and before the payment itself.
Components
In the payment form settings, open the Components tab. This section presents the advanced settings of each component inside the payment form separately. You can add or remove additional components in the form. The settings of each component are described in detail below.
The form component. A form is an element that collects the contact details of a page visitor. Click the "Select" button.
You will see the settings of the form fields. Set the settings you need. For more information on how to configure the form, read the article "Form component".
After you have completed the form settings, click the "Back to Payment Form" button.
Product list. This component is shown on the default payment form page. You can also hide the list of products in the form by moving the slider to the inactive position.
To add and configure the component again, move the slider to the active position and click the "Select" button.
In this section, add one or more course products from the list of products. Add a product description by highlighting the selected product in the form. For more information on how to configure the product list component, see the article "Product List component".
After you have completed the settings of the products component, click the "Back to Payment Form" button.
A component of the payment button. In this section, add one or more payment buttons. Each payment button will be linked to its own payment methods. Link a payment method to each button by selecting it from the list. To learn how to create a payment method, read the article "Payment Settings".
Next, click the "Select" button in the upper right corner of the payment button and you will see the advanced settings of each button. For more information on how to configure the button, read the article "Payment button component".
After you have completed the settings of the payment button, click the "Back to Payment Form" button.
The totals component. You can add additional fields: savings, shipping, total. These fields will be displayed in the payment form. Here customers will see the discount amount, the shipping amount and the total purchase amount. Move the slider to the active position and click the "Select" button. To learn how to configure the totals component, read the article "Totals component".
After you have completed the settings of the totals component, click the "Back to Payment Form" button.
The promo code component. In this section, you can add and configure a promo code. Read about how to create a promo code in the article "Promo Code".
Move the slider to the active position and click the "Select" button. To learn how to configure the promo code component, read the article "Promo Code Component".
The order bump component. The order bump automatically adds or replaces the product in the order. Move the slider to the active position and click the "Add" button.
In the advanced settings of the order bump component, select which product will be sold after paying for the main product. Also select the behavior that needs to be performed when the user selects the order bump conditions. An additional product can either be added to the basket to the main one, or it will completely replace the main product.
Inside the order bump field, you can change the text by double-clicking on the desired text field.
If the user checks the box "Add special offer and save 50%", then a second product will also be added to the cart, or the main product will be automatically replaced.
To learn how to set up the order bump component, read the article "Order Bump component".
After you have completed the component settings, click the "Back to Payment Form" button.
Сredit card form. Move the slider to the active position to add fields for entering credit card data to the order form. At the moment, the credit card form only supports Stripe. For more information about Stripe payment system integration, read the article "Stripe Settings".
After you have completed the component settings, click the "Back to Payment Form" button.
About the settings of the remaining tabs of the payment form, read the article "Payment Form element".
Upsell Accept Button
Confirmation of an additional sale is a button that allows the user to purchase additional products after paying for the main product. Place the "Upsell Accept Button" button anywhere on the pre-sale page. It will work only after successful payment of the main order.
In the page editor, click the "Add Item" button. In the list of items, select "Payment form". Click on the "Upsell Accept Button" element, select the desired button from the suggested list by moving it to the field.
For more information about the settings of the additional sales page and the "Upsell Accept Button" element, read the article "Upsell page".
Upsell Decline Button
Refusal of additional sale is a button that allows the user to refuse to purchase additional products after paying for the main product. Place the "Upsell Decline Button" button anywhere on the pre-sale page. It will work only after successful payment of the main order.
In the page editor, click the "Add Item" button. In the list of items, select "Payment form". Click on the "Upsell Decline Button", select the desired button from the suggested list by moving it to the field.
For more information about the settings of the additional sale page and the "Upsell Decline Button" element, read the article "Upsell page".