Get access to free tutorials, exclusive content and more.

How to Create a WordPress Payment Form with Calculations

/ January 30, 2020

You CAN accept payments from your WordPress website without spending a fortune or working for days to make it happen.

Want to offer multiple products or service options from your WordPress website? Accept payment for an event or charge a registration fee that will vary depending on the selections your users make? It can be tough to find the features you need at a reasonable price point.

There’s a good chance that you could you be spending a lot less to accept customer payments on your WordPress website! Looked at or using a dedicated ecommerce solution? Integrations like WooCommerce and Shopify are great for big online stores. They’re also very expensive and complex. The time investment to learn and maintain them is high.

Most WordPress form builders offer payment integrations. Unfortunately, payment options are usually gated behind expensive packages. Finding the features you need for selling a mix of products or service features can be rough, too.

You shouldn’t have to risk spending more than you might make in a month on a way to take payments. You don’t have to. Here’s how.

These 4 steps will give you a WordPress payment form that can handle almost any transaction.

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.There are even WordPress payment form templates to help you get started!

1. Add fields for your products, options, or features

The following fields can be used in Ninja Forms calculations (which we’ll set up in step 3 below):

  • Single Checkbox: let customers select a single item
  • Checkbox List: let customers select one or more items
  • Select List: let customers select a single item from a dropdown
  • Multi-Select: let customers select one or more items from a dropdown
  • Radio List: let customers select a single item from a list
  • Select Image: let customers select one or more items with an image
  • Number: let customers enter a value

Just choose the field(s) you need. The list fields are perfect for offering different products, features, options, etc for the customer to select. The Number field is perfect for letting the customer choose quantities if that’s something you need.

2. Add the price for each product, option, or feature

Make sure you have Developer Mode enabled. It’s not as scary as it sounds- no code required! 🙂

Each of the fields in step 1 have a Calc Value setting. That’s where your price goes. Just plug it in. Decimals are supported. It’s literally that easy.

select image field featuring grumpy cat, smudge cat, and pizza cat with the calc value setting highlighted to the right of each list option

3. Create a Ninja Forms calculation that totals the combined prices

You’ll find the Calculations feature under the Advanced Tab. Create a new one by clicking Add New. Give it a name (Variable Name). Decimals are set to 2 by default.

Add your fields by clicking the sandwich icon in the upper right of the Equation box. Just choose your fields from the list that opens and that will place the merge tag of the field into the calculation’s equation. You can add (+), subtract (-), multiply (*), and divide (/) field values this way. Exponents (^), parentheses, and Order of Operations are respected, too.

ninja forms calculations getting the total of three fields via additoion and multiplication of field values using those field's merge tag

4. Display your total and send it to Stripe or PayPal on form submission

You can display the total for customers using the HTML field. Just place the calculation’s merge tag into the HTML field’s text editor. Put whatever text or symbols you want before or after for example:

Total: $ {calc:total}

With the Stripe or PayPal Checkout add-on, you can send this total off for payment. You can also connect with Elavon or Recurly (perfect for recurring subscriptions). Just choose the Collect Payment action and set Get Total From > Calculation, then select your calculation!

get total from setting in collect payment action

Follow the steps above to have a working payment form in not much more time than it’s taken to read this article.

It takes money to make money, but don’t overspend. Chances are you can save big on tools to let you accept payments from your website! You can use the Ninja Forms calculations feature to build payment forms like a pro, without being one. And without spending a small fortune.

Following the four simple steps above, you can accept payments in WordPress that are as simple or complex as needed. Not a single line of code required. What are you waiting on? Grab Stripe or PayPal and start making money!

Editor’s note: this article has been updated from an older version on 29 Jan 2020. Everything described above is 100% current, but responses to comments below from before that date may not be. Please feel free to reach out to support anytime with questions, too!

About the Author

Quay Morgan
Quay Morgan

Quay is a science and data nerd with a background in education. He's been creating content for Ninja Forms for a number of years and especially enjoys helping people problem solve their way through learning WordPress. If he's not writing, he's probably lost in an analytics dashboard somewhere.

Recent Posts from Quay Morgan

See more posts

Categories:   Accepting Payments & Donations,  Building Payment & Donation Forms

Tags:  

Comments

  1. nomita says:

    Hi

    i have added check box to describe my package and a drop down to select the no. of attendees but i want to give 10% discount if no. attendees is = 3

    • Quay Morgan says:

      Nomita,

      Hey! Check out this article on adding coupon codes. You can use the same method with calculations and conditional statements described there, and just link the conditional statements to the number of attendees instead of a coupon code.

      Cheers,
      Quay

  2. Frank Schrijvers says:

    Hello,

    I’ve setup a form with calculations and now I want to send the final calculation value by e-mail to the administrator and in the succes message. How can I achieve that?

    • Quay Morgan says:

      Frank,

      You ought to be able to do so using the merge tag for the calculation. {calc:calcname}, where calcname is whatever you named the individual calculation.

      Cheers,
      Quay

    • Sjoerd says:

      Hello, I have the same question. I can’t select the calculation in the email setup. It is only possible to select the field that is containing the total, but this shows me the field name instead of the calculation in the emails I receive in a test.

    • Quay Morgan says:

      Sjoerd, you can manually input the calculation merge tag:

      {calc:calcname} where calcname is substituted with the actual name of your calculation.

      Cheers,
      Quay

  3. Dan H says:

    Hey there,
    I’m building out a fairly complex form and Stripe’s use of calculations is bugging out. Where the equation in the variable is just taking the value of a number field it works fine, but doing a calculation with fields is causing major issues. The strange thing is, the equation is working perfectly because I can output the number to a HTML object, but the payments aren’t going through. Any help would be awesome! Thanks, Dan

    • Dan H says:

      All good, figured it out! For those playing along at home, if you’re using checklists or drop downs, MAKE SURE you add :calc at the end of the calculation. Native NF is smart enough to pick up the value, but the Stripe integration is not! Got me for hours this one.. eg {field:yourchecklist_123456789:calc}

  4. SC Tague says:

    I manage a site for a client who is selling a book. I want to set up a volume discount, but am not sure how to proceed. Is there a way to do so or am I just chasing my tail?

    • Quay Morgan says:

      I believe this ought to be doable using Conditional Logic. Make yourself a subtotal field that receives the output of the calculation, and then set a conditional statement that applies only if the amount in that field is greater than x. If it is, multiply the total by .10 or whatever you wanted your discount to be (the discount value would have to be housed in a second field and the conditional statement, if triggered, would multiply the two fields together to reach a new total).

      Make sense?

  5. Ayna says:

    Hello,
    I am trying to set up a calculation and make sure it goes through to Stripe correctly. At the moment I have three products set up for ÂŁ10, ÂŁ40, ÂŁ45. I have six shipping options set up as the select item on the form. There is a conditional logic set up depending on what country they picked. I used a simple calculation: {field:the_ancient_city_of_babylon_poster_1509538037498}+{field:esagil_treasure_hunt_1509537276579}+{field:esagil_treasure_hunt_limited_edition_1509537293156}+{field:shipping_options_1509531227406}
    and in the form HTML field said Total ÂŁ{calc:Shipping_total}.
    Now the calculation works perfectly when you add items and choose your shipping, however, Stripe does only recognise it, it only processes shipping. I do have Payment collection set up as Stripe and set to my calculation.
    Please help.

    • Ayna says:

      I also tried adding :calc (like this {field:yourchecklist_123456789:calc}) to the equation above and it didn’t seem to help. I tried rewriting everything a few times that didn’t help either.

    • Quay Morgan says:

      Ayna,

      Hey! This is something we’d love to help you out with, but would be able to do so much more effectively in our support channel. Please open a ticket with this information there and we’ll check it out and get it working for you asap!

      https://ninjaforms.com/contact/

      Cheers,
      Quay

  6. Othman Fayed says:

    Hello.
    Is there is a reference to the calculation methods or operators that can be used in the Advanced Calculation? I’m simply trying to round up a decimal but I can’t find any document to refer to.
    Your assistance is greatly appreciated.

    • Quay Morgan says:

      Hey! I’m sorry, there isn’t any native way to round calculations other than adjusting the decimals allowed in the calc itself.

  7. Carl Wheatley says:

    Do I need to upgrade my account to use Calculator? Or what Add On do I get? Thanks!

    • Quay Morgan says:

      Hey! Sorry for the confusion. For all new installations of Ninja Forms 3.4.11 and later (7 May 2019), certain advanced features of the form builder are disabled by default. This was a decision made to improve user experience through reducing the clutter of more niche options in the form builder. Enabling Developer Mode will “unhide” these features. You can find instructions for how to do it in that link, or simply navigate to Ninja Forms > Settings > Advanced Settings and check the box for “Form Builder Dev Mode”, then save settings.

      Toggle that setting on and you’ll see calculations again. We meant to put a notice on the Advanced tab to tip everyone off to the change that expected to see Calcs there, but we dropped the ball on that. It will be corrected soon.

      Cheers,
      Quay

  8. yu kiu lau says:

    Hello,

    I’m new to here so I wonder if this is a stupid question:

    I got a checkbox list and a total count by HTML, but I want a field with chosen items and their prices respectively, or showing the calculated values (i.e. the individual price of each item) on the checkbox list, do I need to open a new HTML field or modify any part?

    Thanks, Iris

  9. Matt Fitzherbert says:

    Hello
    I have added the Stripe/Collect Payment action and calculation. But when I submit the form it does not redirect to stripe or any payment screen? Please help thanks.

  10. Michael Stringer says:

    Hi! We are using conditional logic and authorize.net plugins. I’d like to set a minimum price for checkout. I tried setting the conditional logic to IF total_calc is less than 50, set new variable to 50. I cannot figure out how to set the “If value is greater than 50” part? There is no option to set the new variable to equal total_calc (unless I am able to enter the machine-readable variable?)

  11. Matthew Hyatt says:

    It’s now 2022, and this documentation is still on target. Excellent tutorial. It worked as expected, the first time I tried it!

    • Shaylee Hansen says:

      đź‘‹ Matthew,

      I’m so happy to hear that you enjoyed the tutorial. If there is anything you would like to see more of, just let us know 🤓.

Comments are closed.