Collect payments with WP Fluent Forms payment integration

Collect Payments with WP Fluent Forms Payment Integration

The payment processing system has experienced such dynamic shifts in the recent years. Payment integrations are one of them. At first, people may have faced difficulties in adopting the process. But without any doubt, the payment process integrations are one of the best ways of making online payments. People who are maintaining websites, eCommerce stores, or small businesses are using these integrations frequently. 

So, many WordPress plugins are providing this fantastic facility to their users. And WP Fluent Forms is one of them. Today, in this article, we will discuss how you can use fluent forms payment integration to collect your online payment. But you should know the importance of payment integrations before getting into the details.

Start creating beautiful forms with WP Fluent Forms

Why do you need payment integrations?

Nowadays, every type of business is offering its customers to pay in multiple ways. Thus receiving credit/debit cards, mobile payments, and even PayPal are all necessary payment systems to people. 

Before the integration of the payment process, every transaction had to be entered into the accounting system manually. Which created a higher risk of human error. But now, smart business people have realized that the multiple payment systems allow them to access real-time data. Payment integrations help them to run organizations more efficiently and manage cash flows effectively. Let’s see some key benefits of using payment integrations.

  1. Save time: The payment processors can transfer the important information to the accounting software or ERP system automatically. In that way, people don’t need to spend their time manually inputting each transaction. It saves a lot of time and employees can focus on other tasks of the company.
  2. Reduce the chances of error: Sometimes, people make mistakes while calculating the transactions or records. A single miscalculation can affect the whole organization. But payment integrations create an invoice immediately against any purchase. That eliminates the errors and ensures that the calculation is accurate.
  3. Increases cash flow: Payment integrations transfer transactions into the general ledger or ERP software directly. That way, businesses can manage payroll and inventory in a better way than manual operations. Also, making more informed operating decisions is easy for people then.
  4. Reduce labor costs: Integrating payment with payment processors also saves costs for allocating the business workforce. As the process is easy to manage, you don’t need any dedicated employee to make the transactions while the software is doing this automatically.

Now, let’s dive into our main topic, which is about Fluent Forms payment integration.

Simple payment settings with WP Fluent Forms

WP Fluent Forms is the most advanced plugin in WordPress. It comes with a drag-and-drop form builder. Creating forms with this tool is a matter of a few minutes. You don’t need an eCommerce store to accept payments for your online business. WP Fluent Forms allows you to collect simple payments, for goods or services, and permit users to make payment through credit cards or PayPal. 

Let’ see how you can design your forms for collecting payment by using Fluent Forms payment integration. 

First, let’s arrange the default settings of WP Fluent Forms for the payment integration.

Configure the form settings for Fluent Forms payment integration

Go to the global settings of WP Fluent Forms from your dashboard. Select Payment Settings from the left sidebar. Enable Payment Module of the “Status” button.

payment integration

Now set the Business Name and Business Address. Upload your business logo by clicking on the arrow button.  

best payment gateway

Next, scroll down to the currency settings. You can use the dropdown menu to set your Default Currency.

stripe vs paypal

Select “Currency Sign Position” from the radio buttons. Again choose from the dropdown menu of Currency Separators. You can hide the decimal points by clicking on the “Hide decimal points for rounded numbers” button. That’s all, your settings are done, and don’t forget to click on the “Save Settings” button. 

how does stripe work

You can integrate Stripe and PayPal with WP Fluent Forms for collecting your payment. First, let’s see how Stripe works. 

Fluent Forms payment integration with Stripe

If you don’t have a Stripe account, you need to create one now. Because for Fluent Forms payment integration, you will need an API key from the Stripe account. Additionally, Stripe is a pro feature of WP Fluent Forms. So, if you have the pro version of the plugin, you will be able to use this. 

Now go to the global settings from your Fluent Forms dashboard.

stripe payment gateway

Select “Payment Settings” from the left sidebar. Here, Click on Enable Payment Mode from the Status bar. 

payment gateway plugins

Now, go to Stripe Settings. Look over if the “Enable Stripe Payment Method” is on from the Status bar. If not, enable it.

wp fluent forms payment integration, payment integration

When you enable the Stripe Payment Method, you will be asked to choose from two payment methods. They are the Test mode and the Live mode. For demonstration purposes, let’s discuss the Test mode. 

Now, first, you need to provide your API keys from the Stripe account. Go to your Stripe account, and from the home button, look for the “Get your test API keys” option.

best payment gateway

When you click on the given button, a set of keys will open. These are the “Publishable key” and the “Secret key.”

stripe vs paypal

Go back to the Fluent Forms dashboard and paste the keys in their specific fields. 

stripe payment gateway

Now, when you are done with the Test API keys, it will ask for Live API keys. Don’t worry, the procedure is the same. Again, head back to the Stripe account, and copy the Live API keys from there. Finally, paste it on the Fluent Forms’ respective fields, and click on the Save Stripe Settings.

form builder, wp fluent forms

Now, go back to the Fluent Forms dashboard and create your form. After adding necessary fields, add the Payment field from the input fields option.

plugin

Customize your field from the input customization. In this case, set your Element Label, Label Placement, and Product display type. In the Payment settings, set your product types and their prices.

wordpress, wp fluent forms

Next, add the “Payment Method Field” and customize it.  

payment gateway plugins, form builder

Select your Payment Methods. In this case, we have set the Element Label as “Pay with card,” and Stripe will come default because we have already done the settings before.

form builder, wp fluent forms, stripe vs paypal

Don’t forget to save the form, and preview it before launching.

payment gateway plugins

And it’s done! Isn’t it so easy and fun to create? I would like to notify you one more thing, if you haven’t configured your Stripe business account, you will see an error message on the checkout.  

Now, let’s check out the process for PayPal.

Fluent Forms payment integration with PayPal

Like the Stripe payment settings, Fluent Forms payment integration with PayPal is quite similar. You can easily manage PayPal to your WP Fluent Forms dashboard. You will need a pro version of WP Fluent Forms to use the payment integration. 

Go to the global settings, select payment settings, same as before. Click on Enable Payment Module. This will unlock the payment status.

wp fluent forms, payment gateway plugins

Next, move on to the PayPal settings, and click on the Enable Payment Module again. This will activate the PayPal Payment Method.

payment plugins, form builder

Now, you have to choose the PayPal Payment Mode from the given two options. One is the Sandbox Mode, and the other is Live Mode. Let’s set up the “Sandbox Mode,” please note that settings for the Live Mode can also be done in the same way.  

First, you have to give a PayPal email. More clearly, this is the email that you have used to register for a PayPal account. Place it on the specific field.

wp fluent forms

We have disabled the PayPal IPN verification. Because at this moment, we don’t need to enable this section. If you want to know more about this matter, you can visit https://developer.paypal.com/docs/api-basics/notifications/ipn/IPNSetup/#.  

When all the settings are done, click on the Save PayPal Settings. 

plugin, wordpress, form builder

Now, Paypal is integrated with your WP Fluent Forms dashboard. 

Go back to the dashboard, create a form, name it, and add necessary fields. Now, add Payment Field from the input field of the form editor. Select your Element Label, Label Placement, Product Display Type, Payment Settings, etc. from the input customization. Same as I have selected on the Stripe integration. 

Here for the demonstration, I have included only one item.  

wp fluent forms payment integration

Now, add the “Payment Method Field” and customize it. Select PayPal from the Payment Methods.  

wordpress, form builder

Save the form, and preview it before publishing.

wp fluent forms payment integration

One more thing, if you want you can use the Global Styler of WP Fluent Forms to make your forms more attractive. Read this article which is about styling beautiful CSS forms to know more about Custom Styler.

You can do many more settings with the Payment input fields of WP Fluent Forms. Let’s have a look at those too. 

Add Custom Payment Amount field on Fluent Forms payment integration

You can use the Custom Payment Amount field for deciding the maximum or minimum products users can order at a single checkout. Users can also find it useful to put the amount that they want. It’s not necessary, but you can use it when needed. Don’t worry about the total payment. It will calculate the amount accordingly.

stripe payment gateway, wp fluent forms payment integration

Show the total amount

Use the shortcode {payment_total} to show the total payable amount. For instance, if you add the shortcode on the submit button text, it will show the total amount inside the button. 

how does stripe work, wp fluent forms

Now preview it to see if it is working correctly.

stripe payment gateway, wp fluent forms

Show your payment summary

Showing payment summary is very helpful in terms of designing multi-step forms. However with WP Fluent Forms, you can use the section for single forms too. The plugin allows you to show the payment summary as a dynamic cart.

Select the HTML field from the input fields. When you click on the input customization field, it will look like the screenshot below.

best payment gateway, wp fluent forms

Here, you can see three types of shortcodes on the bottom of the customization page. Choose the {dynamic.payment_summary}, copy it, and paste it in the description area.

best payment gateway, wp fluent forms, form builder, plugin

Save it, and preview it. Fill up the form to test if it’s working right. 

payment integration, wp fluent forms

Finally, save your form, copy the shortcode from the dashboard, and paste it to a page or post where you want it to be. 

We hope, now, you understand the whole process. We have tried to provide you the details as simply as we can. If you’re confused at any point, feel free to share your experience in the comment section. Furthermore, you can learn more on our documentation.

In the end

In this article, we have discussed the whole process of WP Fluent Forms payment integration. We also wrote about collecting payments with WordPress payment integrations. And if you are interested in learning about the best WordPress payment plugins, we have created that one too.

We would like to remind you that WP Fluent Forms is one of the robust plugins in the WordPress community. If you’re looking for a lite version, please check the free version on the WordPress directory. You can check out its updates and features from WordPress. The tool is updated every two or three months. So, why not try it? Give it a shot and tell us how you like it in the comments!

Leave a Comment

Your email address will not be published. Required fields are marked *