{"id":55854,"date":"2025-08-07T11:54:26","date_gmt":"2025-08-07T11:54:26","guid":{"rendered":"https:\/\/fluentforms.com\/?p=55854"},"modified":"2025-11-27T08:18:40","modified_gmt":"2025-11-27T08:18:40","slug":"wordpress-payment-form-calculation","status":"publish","type":"post","link":"https:\/\/fluentforms.com\/wordpress-payment-form-calculation\/","title":{"rendered":"How to Create Any Payment Form with Calculation in WordPress"},"content":{"rendered":"\n

You run an online business. You have social media pages and a website for marketing purposes. People look for different solutions in your niche and land on your amazing products. <\/p>\n\n\n\n

However, you don\u2019t have a streamlined product order system. Your audience has to contact you and transfer the balance to your account manually to purchase something. It takes extra time, not to mention the trust issues, which can frustrate many of your users.<\/p>\n\n\n\n

A simple solution to this is automating payment processing with a payment form. It\u2019ll streamline transactions, boost user trust, and make your business look more professional.<\/p>\n\n\n\n

Let\u2019s see how you can sell anything directly from your WordPress website using a payment form with calculations.<\/p>\n\n\n\n

Creating payment forms with a WordPress form builder<\/h2>\n\n\n\n

First things first. We\u2019ll be using Fluent Forms to create a payment form in this tutorial. Because, well, this form plugin offers essential payment features in the free version. It also helps you create advanced payment forms easily (which are also mobile-responsive). I know, right? It\u2019s great!<\/p>\n\n\n\n

So let\u2019s install Fluent Forms<\/a> if you haven\u2019t already. You can test the process from a WordPress playground<\/a> as well. Next, we have to configure the payment settings<\/a> and connect to payment gateways from Fluent Form\u2019s Global Settings. <\/p>\n\n\n\n

Now that our payment feature is all set up, let\u2019s move on to understanding the payment fields so we can easily create any payment form.<\/p>\n\n\n\n

\"Fluent<\/figure>\n\n\n\n

Payment Item:<\/strong> Allows you to list\/display products\/services you want to sell and their prices via radio\/checkbox\/dropdown\/single row. The radio and dropdown (select) options let users pick only one option, while the checkbox allows multiple selections.<\/p>\n\n\n\n

\"payment<\/figure>\n\n\n\n

The single-row display doesn\u2019t allow selection, but the payment amount automatically adds to the total payment amount (suitable for mandatory charges like delivery fees\/registration fees, etc.). If some of your users want takeaway and others delivery, you can apply conditional logic so that this charge only adds if applicable.<\/p>\n\n\n\n

Custom Payment Amount:<\/strong> Allows your users to choose the amount they want to pay. Best for fundraising\/collecting donations\/tips, etc. You can also set a range by determining the minimum and maximum value. <\/p>\n\n\n\n

Payment Method:<\/strong> Allows you to collect payment from your forms via Stripe\/PayPal\/Mollie\/RazorPay\/Paystack\/Square\/Paddle\/Authorize.net. It also includes an offline payment option, suitable for cash on delivery, bank-to-bank transfer, etc.<\/p>\n\n\n\n

Coupon:<\/strong> Allows you to offer discount deals and generate coupons<\/a>, so your users can apply the coupon codes to access those discounts.<\/p>\n\n\n\n

Subscription:<\/strong> This allows you to automatically collect payment from your subscribers\/users at a regular interval (monthly\/yearly). Subscription payment<\/a> includes diverse features like a trial period, subscription duration, different billing intervals, sign-up fees, multiple pricing plans, and more. <\/p>\n\n\n\n

Item Quantity:<\/strong> Allows your users to select a quantity for any payment item they want to buy.<\/p>\n\n\n\n

Payment Summary:<\/strong> Shows your users the total payable amount visually (in a table with information broken down into rows & columns) based on the items they select to buy and their quantity.<\/p>\n\n\n\n

Aside from these input fields, Fluent Forms also allows you to manage inventory<\/a> from your dashboard (global settings), so your users can see whether a product is available before ordering.<\/p>\n\n\n\n

Now that we’ve gotten acquainted with the payment fields, let’s see how we can create a payment form effortlessly.<\/p>\n\n\n\n

How to create a WordPress payment form<\/h2>\n\n\n\n

Let\u2019s create a t-shirt order form for this tutorial. If you want to display the t-shirts side by side, we have to select a container. Let\u2019s take a three-column container from the container input fields<\/a>.<\/p>\n\n\n\n

Next, we\u2019re going to add a Payment Item<\/strong> input field in each of these 3 columns. You can simply drag the fields and drop them on the plus icon inside the containers.<\/p>\n\n\n\n

 Then, we\u2019ll customize the payment item input fields one by one. We\u2019ll add images, select the display type “checkbox<\/strong>,” fix the price for each t-shirt, and assign a name to each t-shirt. We\u2019ll also add the product prices with their names, as the price column is for calculation and not visible on the form. Finally, we\u2019ll hide the labels, but you can keep them.<\/p>\n\n\n\n

\"add<\/figure>\n\n\n\n

You might ask why we took three payment item fields instead of one, since you can take a single payment field and click the plus icon to add more products. <\/p>\n\n\n\n

Well, one Item Quantity<\/strong> field applies to a single Payment Item<\/strong> field. So if a user selects multiple products (say 3) from a single product item field and then chooses a quantity (say 5), that quantity (5) applies to all 3 of the selected products.<\/p>\n\n\n\n

However, we want our users to be able to select the quantity of each t-shirt separately. That\u2019s why we took a separate payment item field for each t-shirt. <\/p>\n\n\n\n

Let\u2019s see how it\u2019s done.<\/p>\n\n\n\n

Drag & drop an Item Quantity field beneath each t-shirt. Now, let\u2019s make sure the quantity fields link to the respective t-shirts. Click on an Item Quantity field to customize it. Then navigate to Product Field Mapping<\/strong> and click on the dropdown. Select the product\u2019s label that\u2019s in the same column as the quantity.<\/p>\n\n\n\n

\"product<\/figure>\n\n\n\n

If you want to assign sizes to your t-shirts, drag a Dropdown<\/strong> field from the General Fields <\/strong>beneath each t-shirt. Click the dropdown fields to customize them. Add size options, edit the label, etc. You can also customize one dropdown field, duplicate it, and drag it to another column.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Now, we\u2019ll apply conditions<\/a> to the dropdown fields, so a particular size field appears for a particular t-shirt. Scroll down to Advanced Options<\/strong> from Input Customization and click Yes<\/strong> under Conditional Logic<\/strong>. <\/p>\n\n\n\n

For condition matches, choose the label of the respective item in the first column, equal in the second column, and the field\u2019s option in the last column. Repeat this process for all three dropdown fields.<\/p>\n\n\n\n

\"apply<\/figure>\n\n\n\n

If you want the item quantity field to appear after a user chooses a t-shirt, apply conditional logic<\/a> to the Item Quantity field in a similar manner.<\/p>\n\n\n\n

Next, we\u2019ll take another Payment Item field for the shipping charge. Let\u2019s select Radio for Product Display Type, as we don\u2019t want users to select multiple shipping methods. Customize the shipping options and their price. Then click Yes under required, as we don\u2019t want anyone to submit their order without choosing a shipping method.<\/p>\n\n\n\n

\"add<\/figure>\n\n\n\n

Finally, add the Payment Summary and Payment Method fields. Add other required fields to capture necessary customer information, like names, email, phone number, address, etc. You\u2019ll find these fields in the general fields section. If any information is a must, like address\/contact number\/size, simply click yes under required from input customization, like we did in the previous step.<\/p>\n\n\n\n

\"customize<\/figure>\n\n\n\n

Lastly, you can customize the submit button text & style and name your form. When you\u2019re done, click Save Form<\/strong> in the upper right corner. Your form is now ready. You can click Preview & Design<\/strong> to view your form and further style it<\/a>.<\/p>\n\n\n\n

\n

Do you know?<\/strong> Fluent Forms Free now offers Stripe Payment integration with just a 1.9% transaction fee.<\/em> Try Fluent Forms Free<\/strong> below!<\/em><\/p>\n<\/blockquote>\n\n\n