How to Setup a Payment Order Form with Limited Stocks

Update
Stock management is now possible in our payment integrations. Please check the following user guide for more details.

When setting up Payment Forms, there are occasions when you would want to offer products with limited stocks. Yes, we have a variety of widgets that allow you to achieve that, but linking those widgets with an actual Payment Field to process payments is a bit tricky. And that’s the main topic of this guide.

We’ll be covering two use-case scenarios:

• Bulk Purchases – users can select a product with limited stocks and have them buy as many as they want until supplies last. For example, users can buy 1, 10, or even 50 pieces of Product A with only 1000 limited stocks.
• Single Purchases – users can pick 1 product (and only 1 product alone) with limited stocks. For example, a user wants to buy Product B with a limited supply of 50 pieces.

To make it work, we’ll be using the following features:

Payment Processors

Here’s a complete list of all payment processors we integrate. We recommend this article if you’re unsure which one will work for you.

Form Widgets

• Inventory Widget – used for bulk purchases.
• Ticket Purchases Widget – used for single purchases.
• Form Calculation Widget – used for calculating the total.

Let’s get started!

Setting up the Inventory Widget

For bulk purchases, add the Inventory Widget to your form. Here’s how you can do that:

1. In the Form Builder, click the Add Form Element button.
2. Go to the Widgets tab.
3. Search and click the Inventory widget. You can also drag and drop it to add.

4. The widget settings would generally open once you add the widget. Set it up accordingly. The most important options are the following:
   • Description – this is where you should put the product name and its price.
   • Available Quantity – this is where you should put the available stock of the item.
   • Submit Value With Label – you must keep this to No since you will use this widget in the calculation.

One key ingredient to making this widget user-friendly is ensuring users would know how much the product will be. So naming your product to something like Alpha $50 will hit two birds with one stone – let your users know (1) the name of the product, along with (2) the price.

Adding the price is important because this widget will list your product description as opposed to traditionally having those details right on the Payment Field.

Setting up the Ticket Purchases Widget

For a single purchase, use the Ticket Purchases widget in the form. The steps are similar to the inventory widget:

1. Click the Add Form Element button in the Form Builder.
2. Go to the Widgets tab.
3. Search and click Ticket Purchases. You can also drag/drop it to add.

4. Set up the widget settings. The most important options are the following:
   • Ticket types – like the Inventory Widget, ensure you will name your products, show the prices, and don’t forget to assign the number of stocks left per product.
   • Min Selection – set this to 1.
   • Max Selection – also set this to 1.

The setup above basically means that the product Bravo costs $100 each and has 100 stocks left – Charlie is at $150 each with 50 stocks left, and so on. Just read and follow the help description right below that section to better understand your options.

Setting both Min and Max selections to 1 would mean users should pick at least one item and can only pick one product from the widget.

Setting up the Calculation Widget

This part is relatively straightforward. For the Inventory widget, you will only need to calculate it by its price. For example:

For the Ticket Purchases widget, you’ll only need to add it to the equation.

Now, you do not need to use multiple calculation widgets to get the total of the two widgets. Just combine them in one equation. For example:

As you can see, you will only need to follow the correct calculation pattern. The first one, which is the inventory widget, is enclosed with parenthesis.

Related Guide: 

• How to Perform Form Calculation Using a Widget

Passing the Calculated Total to the Payment Field

The last part of this guide is to pass the calculated total to the payment field of your form. Choose your payment gateway, and set it up this way:

1. Click the payment element.
2. Open its Payment Settings by clicking the wand icon.
3. Select User Defined Amount from the Payment Type.
4. Enter your Payment Box Sub Label.
5. Choose the Calculation widget from the Get Price From – this is very important.
6. Finally, click the Save button to save your changes.

Related Guide:

• How to Pass a Calculation to a Payment Field

You can view and test these settings through the following demo form.