Using Ninja Forms Calculations to get a Total for a Payment Gateway

Ninja Forms 3.0 introduced Pricing Fields as default commerce options for you to use to handle simple transactions. Have a product you’re selling? Setting up your form is as simple as adding a product field, shipping if it’s needed, and a total field. Your payment gateway of choice takes the amount in the total field, process, done. Doesn’t get much more straightforward than that! While the pricing fields are a perfect solution for many, we know many more of you need more. That’s where Ninja Forms calculations come into play.

Using Ninja Forms calculations, you can take values from anywhere on your form, total it all out behind the scenes, display an amount for your customers, and send that amount through to your payment gateway of choice. It’s slightly more complex to set up a calculation, but it’s infinitely more powerful than the common pricing field alternative. Let’s walk through how to set up a form that demonstrates this now!

Ninja Forms Calculations as a Commerce Option

Alright, let’s say that we want to sell something using a checkbox list field. We’ve gone into business selling Widgets, Gadgets, and Gizmos. Each of these handy items come in 3 different colors: red, green, and blue. Price is based on color, $10 for a Red, $15 for a Green, $20 for a Blue, regardless of type. Let’s take a gander at how to set this up.

The Form Fields

We’re using checkbox list fields and number fields to handle the products and quantity selection as you can see below. You can alternatively use any combination of fields for your products that you wish as long as it has a calc value input in the settings. The HTML field is necessary for displaying the total for our customers.

ninja forms calculations example form

Setting Up the Calculation

In the image below, I’ve renamed our fields to reflect the products we’re selling. You can see to the left of the image the field settings for our Widget checkbox list. I’ve added the product choices Red, Green, and Blue as list item choices, and assigned them each a calc value that is equal to the dollar amount we’ll be charging for them.

ninja forms calculations checkbox list field settings and renamed example fields

Now we need to set up the calculation to pull in these values. Click on the Advanced tab of the form builder and then on Calculations. I’ve named the calculation ComCalc and, using the Merge Tag icon, added each of our product and quantity fields. I’ve then structured the calculation as an equation by adding the appropriate mathematical symbols between each field (+ – / *). For this calculation, we’re multiplying each product by its quantity and summing each: {field:gizmo_quantity}*{field:gizmos}+{field:gadget_quantity}*{field:gadgets}+{field:widget_quantity}*{field:widgets}.

ninja forms calculations calculation setup

Now that we have our calculation set up, let’s work on displaying it for our customers.

Displaying the Calculation for Your Customers

This is where our HTML field comes in. Slide out the field settings window for it and see the Default Value option with the rich text editor. To bring your calculation value into this field for display, click the merge tag icon I’ve highlighted below and select your calculation from the list. As an aesthetic touch, I’ve used the rich text editor here to add “Total:” preceding the value display and turned all of that text into header 3.

ninja forms calculations using an html field to display calculation value for users

Bringing the Calculation into Your Payment Gateway

I’ve chosen Paypal for this form, but you may prefer Stripe for accepting credit card payments and setup for it is exactly the same. Click on the Emails & Actions tab of the form builder now and add a collect payment action from the list of available actions (Paypal or Stripe must be installed and activated). Slide open the settings window for the collect payment action and set Payment Gateways to Paypal Express. In the Payment Totals field, click the Merge Tags icon to the right and select the ComCalc calculation we set up above. You can see the finished action in the image below.

ninja forms calculations collect payment action including a calculation value

Paypal will now treat our calculation value as the total to process for payment!

Our Form on the Front End

This is our completed form on the front end with several options selected to demonstrate that the calculation is indeed functioning:ninja forms calculations working demo formSending the value of Ninja Forms calculations to a payment gateway is a technique that a lot of you have been requesting in your communications with us, and it’s something we’ve had in Ninja Forms v3.0 since its inception, but something that we haven’t done a good enough job of communicating. So, here it is! We hope it helps you make the most of your forms, and we’d love to hear or see examples of how you’re taking advantage of this functionality on your website! How are you using Ninja Forms? I’d love to hear from you!

Setting up a calculation to be sent to a payment gateway as a total in your Ninja Forms is easy!Click To Tweet