Product Integration in Form Builder: A Comprehensive Overview

Modified on Wed, 11 Sep at 1:40 PM

The Product element within a form builder is designed to streamline payment integration, creating a smooth and professional transaction experience for businesses and their customers. This guide will highlight the key features and benefits of the Payment Element, showing you how to leverage it to enhance your payment workflow.

Key Features of the Product Element

  • Product Selection and Customization: Users can easily select and showcase products by adding descriptions, images, and choosing from various layout designs to improve product presentation.

  • Variant Options: Different variants of a product can be selected, allowing for flexibility in product offerings.

  • Inventory Control: The form builder monitors product quantity, ensuring it aligns with available inventory.

  • Automated Tax Calculation: Taxes are calculated automatically during the purchasing process, ensuring compliance and accuracy in transactions.


How to Implement the Payment Element

To seamlessly integrate the Payment Element and set up order confirmations, follow these steps:

1. Add the Payment Element: Head to the Integrations section of the form builder and add the "Payment" element to your form.


2. Insert Products: Add up to 20 products, selecting which product details—such as descriptions or images—should be displayed by checking the relevant options. 


3. Configure Order Confirmation:

  • Go to the Options section of the form.
  • Under the "On Submit" actions, select the option to display an order confirmation page after a successful payment.


Order Confirmation Setup


Order Confirmation Feature Details

When a customer completes a transaction, the form builder displays an order confirmation page that includes all essential customer information, enhancing the user experience. Here's how it works:

  • Thematic Consistency: The order confirmation page automatically adopts the same theme as the form, ensuring a unified look.

  • Displayed Information: It includes the customer's name, email, phone number, address, country, product details, and the total payment amount.


Tracking Payments and Orders

  • After a form is submitted, you can access detailed payment information, including the order ID, payment status, and total amount paid. Clicking on the Order ID will provide more in-depth details, which can also be exported for your records.


Important Notes:

  • Recurring products are not currently supported.

  • Payment processors like NMI and Authorize.net require the "First Name" field to be mandatory.

  • Refund amounts are not captured in the system.

  • In custom forms using payment elements, the payment field won’t appear in calendars.

  • Multiple payments using native forms are not yet available in funnels.

  • Undo and redo functionalities are not supported for the payment element.

Frequently Asked Questions

  • Q: How is the order confirmation page theme chosen?
    The theme is automatically selected to match the theme of the form, ensuring consistency.
  • Q: Can I disable the order confirmation page?
    Yes, you can disable it by adjusting the "On Submit" actions in the Styles and Options section.
  • Q: What can I do if the order confirmation page doesn't display properly?
    Make sure the Payment element and products are correctly added and integrated into the form.

Troubleshooting Tips

  • Issue: The order confirmation page doesn't appear after payment.
    Solution: Ensure that the Payment element is correctly added and the products are integrated.

  • Issue: Incorrect customer details on the confirmation page.
    Solution: Review the form fields to ensure accurate data collection. If problems persist, check the form setup and user inputs.

  • Issue: The order confirmation page doesn't match the form theme.
    Solution: Reapply the desired theme and verify that no conflicting settings are in place.



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article