Using the Products Field with Native Payment Options in Forms

The Products field in Common Ninja’s forms allows you to display and manage product listings within your form. When paired with the payment options, it provides a seamless way to collect payments for items or services.

This guide will walk you through the steps to add and configure the Products field along with enabling payments.

Note: To collect payments on your form, you need to integrate a payment method. If you haven’t done this yet, see this guide for step-by-step instructions.

Step 1 - Add the Products Field

Navigate to the Fields Section in the left-hand menu of the editor. Click on + Add a Field. 

Scroll down, and under Special Fields, select the Products field.

Step 2 - Configure the Products Field

Once the Products field is added, you can customize the following options:

• Label: Set a name for the product section.
• Currency: Choose the desired currency for the product prices.
• Show Subtotal: Toggle this on to display the subtotal dynamically.

Click on + Add Product to add individual items to your list.

Customize your products

• Add details like the product name, price, and thumbnail.
• Set the minimum and maximum quantities if needed.
• Click on the Add Product to add more products to your form.

Step 3 - Set Up Payment Options

1. Go to the Payments Section in the left-hand menu.
2. Ensure that your preferred payment method (e.g., PayPal) is connected and activated.
3. Under Payment Mode, select Products Total to calculate the payment based on the selected products.

Step 4 - Configure Additional Settings

1. You can enable Shipping and Tax options in the Payments Section: set the mode to Fixed Price or customize it based on your needs.
2. Add a Terms and Conditions Link to provide legal clarity to your customers.