How to create an order form with a dynamic payment summary

With Snapforms, you can create a dynamic order form that lets customers choose from multiple product options while automatically calculating and displaying a real-time payment summary.

Using powerful features like short-codes, calculation fields, and conditional logic, you can ensure accurate pricing, eliminate manual calculations, and streamline the checkout process.

Before you start

This guide assumes you’ve already created your online form using the drag-and-drop form builder.

If you’re new to Snapforms, we recommend you check out our 10-minute getting started video or have a look through our help guides to learn how to set up your form.

Set up your dynamic pricing

Firstly, you’ll need to set up your product or service pricing options. You can use one or more of the following fields to display multiple pricing options on your form:

Assigning numeric values to each option enables accurate calculations for the payment summary and payment gateway.

Steps for setting up dynamic pricing

Click and drag a Dropdown List or Choose One field onto your form.
Enter a short name for this field, e.g. Event.
Enter your list of choices.
Click Show Advanced Options.
Enter the Question (Label) that will appear above this field on the form, e.g. Select an event:
In the Assign numeric values for your options field, enter the values of each choice in the same order as they are listed.
Click Save & Close.
(Optional) If more than one option can be ordered, a Short-Answer field can be used as a multiplier, e.g. Number of Tickets.
(Optional) If you want to offer optional items or add-ons, you can use as many Choose One or Choose Multiple fields as needed.

Add calculations for the totals

Next, add some hidden calculation fields to automatically calculate the totals for the payment summary.

Form elements you will need

Calculation fields
Short-codes

Steps for setting up calculations

For each line item in your payment summary, add a Calculation field and insert a formula to calculate the line item total. For example: {{number of tickets}} * {{event}}

For the total value, add a Calculation field with the name ‘Amount’ and and insert a formula that calculates your final amount based on all of your product/pricing fields. For example: {{event?}} * {{number of tickets}}) + {{addon1?}}

To learn more about calculation formulas and field settings, see our Calculation field article.

Add payment summary section

Lastly, add one or more Formatted Text modules to display the results of the calculations above.

Using a combination of text and short-codes consisting of the name of each field enclosed in double curly braces {{ and }}, you can arrange the order information and calculated totals within a table. Alternatively, multiple formatted text fields can be used if you want to dynamically display fields based on conditional logic.

Form elements you will need

Steps for setting up the payment summary output

For each line item in your payment summary, add a Formatted Text module and use short-codes to display the required order information.

To dynamically display a line item in the payment summary, use the Show/hide this field with conditional logic setting. Apply logic to ensure the field appears only when specific conditions are met. For example, you can set the line item total to show only when both the ‘Event’ and ‘Number of Tickets’ fields are filled in.

Tip: In the Formatted Text module, tables can be used to neatly organise and display the order information. For greater flexibility when designing the payment summary layout, you can also split the order information into multiple Formatted Text fields.

Here is an example of a simple payment summary layout:

Add a payment gateway

If you have an account with a payment provider like PayPal, Stripe, Pin Payments, eWay, or an New Zealand bank (Commonwealth, NAB, Westpac, Bendigo Bank, etc.), you can connect their payment gateway to your order form—offering customers a seamless ordering experience.

Alternatively, you can take payments directly through Snapforms and have your payments deposited to your bank account on a weekly basis.

Please refer to the guides below for steps on how to connect your form to your preferred payment gateway: