Accept Simple Payments With WP Fluent Forms WordPress Plugin

To accept payments with WordPress an entire eCommerce store is not required. With WP Fluent Forms you can accept simple payments, sell goods or services and allow users to pay through credit cards or PayPal.

WP Fluent Forms is the most advanced WordPress form plugin and includes a drag-and-drop form builder. Once you’ve installed and activated WP Fluent Forms, creating a payment form takes just a few minutes.

Learn How To Show Total Payment Amount

Don’t forget to enable the Payment Module before creating the payment form.

Create a new payment form:

At first, go to the new WP Fluent Forms menu that appears in your WordPress dashboard’s left sidebar. Once you are there you will find there are two buttons available to create a new form.

Accept Simple Payments With WP Fluent Forms WordPress Plugin

After clicking the add new form button, a pop-up will comes to select any form template already created so that you can get started right away. You can choose any form from the templates. For demonstration purposes, I will choose a blank form for this article.

form template wp fluent forms

Quickly add the name and email field into the form as like creating any other form. You can learn more about how to create a simple contact form with WP Fluent Forms here.

how to create a simple contact form with WP Fluent Forms

Add the payment fields to the form:

The payment field is located on the right sidebar of the form consisting of four fields which are Payment Field, Custom Payment Amount, Item Quantity, and Payment Method Field.

payment fields wp fluent forms

Now add the Payment Item Field into the form. Give the field a name from Element Lebel on the right sidebar of the field, also give the item price from Payment Amount and add Amount Label as shown in the screenshot below.

Add Item Quantity Field into the form to allow the users to order as many as they want. The product field mapping will automatically select the product for which the quantity is used. If you have multiple products please map the quantity field with the respective product. You can also provide min and max value for the quantity

Item Quantity Field WP Fluent Forms

Now add the final field into the form which is the Payment Method Field. You can enable PayPal, Stripe or both as the Payment Processor.

Payment Method Field WP Fluent Forms

Note that you need to configure PayPal Settings and Stripe Settings before taking the form live.

To configure PayPal take a look at the doc How to Integrate PayPal with WP Fluent Forms

To configure Stripe Payments take a look at the doc How to Integrate Stripe with WP Fluent Forms

The Custom Payment Amount field becomes very handy when you are accepting donations. This field enables the end-user to input the amount they want. You can also restrict the minimum and maximum amount the users can input and pay. It’s not required for a payment form but you can use it when needed and the total payment amount will be calculated accordingly.

custom payment amount field wp fluent forms

Show Total Amount:

You can show the total amount or total payable amount using the shortcode {payment_total}. For example, in the button text if you add the shortcode it will show the total inside the button. You can use the HTML field also to show the total amount.

Save your form, copy the shortcode and use it on the post or page to accept payments. That’s it.

Show payment summary as dynamic cart:

When creating a multi-step payment form, showing the payment summary is very helpful. WP Fluent Forms Pro allows you to show a payment summary as a dynamic cart. Although this is very helpful for a multi-step form, you can use the payment summary in single-step forms also.

Take an HTML input field where you want to show the payment summary. After adding the HTML field save the form and reload it. After reloading the form the HTML field will look like the below screenshot.

Show payment summary as dynamic cart wp fluent forms

There’s three smart code available at the bottom right of the HTML input field. The {dynamic.payment_summary} will show the mini cart like payment summary. Add this to the HTML content box.

payment summary wp fluent forms

Preview the form after saving it. Fill up the form for testing purpose and you will get the summary as the screenshot below.

Show payment summary wp fluent forms

Was this article helpful to you?

6 2

How can we help?

Please submit a support ticket if you have any question or pre-sale questions. Our Customer support engineers will answer your query as soon as possible

Open a support ticket