, ,

Collect Payments with Fluent Forms Payment Integration

Prema Anjum ○ October 27, 2020 ○ 10 minutes
Collect payments with WP Fluent Forms payment integration

The payment processing system has experienced such dynamic shifts in recent years. Payment integrations are one of them. At first, people may have faced difficulties in adopting the process. But without any doubt, 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 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.

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 for 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 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 Fluent Forms payment integration.

Simple payment settings with Fluent Forms

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. Fluent Forms allows you to collect simple payments, for goods or services, and permit users to make payments through credit cards Stripe, PayPal, Paystack, RazorPay, and Mollie.

Let’ see how you can design your forms for collecting payment by using Fluent Forms payment integrations PayPal, and Stripe. 

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

Configure the form settings for Fluent Forms payment integration

Go to the global settings of 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 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 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 the 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 Fluent Forms dashboard. You will need a pro version of 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 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 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 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 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 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 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!


Prema Anjum
Prema Anjum

Hello, This is Prema. I work as a marketing strategist for Fluent Forms at WPManageNinja. When I am not playing with words, I go to explore nature.

25 responses to “Collect Payments with Fluent Forms Payment Integration”

  1. Thanawat Avatar
    Thanawat

    Does the form automatically run a number code when I press submit?

    1. Prema Anjum Avatar
      Prema Anjum

      Sorry, we’re not clear about your question. Could you please elaborate?

  2. Rolo Avatar
    Rolo

    Is it possible to auto create wordpress subscribe user after payment?

    1. Prema Anjum Avatar
      Prema Anjum

      You can use the user registration feature of Fluent Forms to do this.

  3. Elise Welch Avatar
    Elise Welch

    What type of Paypal account do you have to have to use this feature? Can you use your personal, donation or merchant account?

    1. Prema Anjum Avatar
      Prema Anjum

      You have to use the Merchant account.

    2. rednishat Avatar
      rednishat

      Hi, You might need a merchant account for business purpose.

  4. Liesl Avatar
    Liesl

    If a payment is set as pending – meaning the customer has been sent to the square payment portal but not completed payment. How do we send a reminder and payment link for them to complete payment?

    1. Prema Anjum Avatar
      Prema Anjum

      Sorry, this feature is currently not available.

  5. Steven Avatar
    Steven

    Am I able to use Authorize.net to integrate into Fluent Forms since it can be used to integrate into WordPress? or does it have to be PayPal or Stripe?

    1. Prema Anjum Avatar
      Prema Anjum

      No, currently we’ve Stripe, PayPal, PayStack, Mollie, RazorPay, Square.

      1. Austin Baraka Avatar
        Austin Baraka

        I’ve tried paystack but not received payment it giving me error “Error occurred while processing your request… Please contact merchant” what is the issue please

        1. Prema Anjum Avatar
          Prema Anjum

          I guess one of our support team member already discussed with you in this matter.

  6. elaine Avatar
    elaine

    Still can’t get this to calculate tax (VAT). Perhaps my form is more complicated?
    – payment field for widget that costs $10
    – quantity field to select the number of widgets you want to purchase
    – custom payment field only allows the widget field – and not quantity – so the custom field for VAT will be incorrect.

    What I need (with a 7% VAT):
    ({input.widget}*{input.quantity})*.07)

    Any suggestions?

    1. Prema Anjum Avatar
      Prema Anjum

      Tax calculation is not possible directly. But we’ve a workaround for that. You can open a support ticket here: https://wpmanageninja.com/support-tickets/#/

      One of our support members will help you on that.

  7. Josh Avatar
    Josh

    Hello Sadiq, I am also interested in setting up VAT on my fluent form. Can you please give more explanation on how I can calculate VAT on my Payment field?

    1. Prema Anjum Avatar
      Prema Anjum

      Hello Josh,
      You can use the Custom Payment Field for the VAT calculation. Check out this doc to find out how this feature works: https://wpmanageninja.com/docs/fluent-form/field-types/custom-payment-amount/

  8. Peter Avatar
    Peter

    How did you solve adding VAT in the price calculation?

    1. Sadiq Ahmad Avatar
      Sadiq Ahmad

      It’s actually easy, Peter. You can take a numeric field and calculate your VAT there. I’m attaching a video tutorial (low quality) to demonstrate the process. If you still can’t resolve it, please let me know or contact our support.

  9. Francesco Avatar

    Very useful post! I have just set up a Payment Form for a client, I love this Fluent Forms feature! ?

    1. Sadiq Ahmad Avatar
      Sadiq Ahmad

      Thank you for loving the post and Fluent Forms!

  10. Miikka Avatar
    Miikka

    Hello!

    How can I have amount of tax separated on the payment receipt?

    1. Sadiq Ahmad Avatar
      Sadiq Ahmad

      Hello Miikka, you can take another payment field for calculating tax and apply some rules, let’s say 5% on the total amount. I hope that helps.

      1. Marco Avatar
        Marco

        Hi Sadiq,
        could you please be more precise as VAT adding is a highly important topic?
        I didn’t understand exactly how it works.
        If I add another payment field, I require calculating the VAT amount with a formula.
        But this can’t be done in the payment fields. Only numbers are allowed.
        The math: total payment summary (net) + total payment summary* (19/100) = gross
        With which fields can I link the {payment_total} amount?

        Thanks in advance

        1. Marco Avatar
          Marco

          Hi again Sadiq,

          Just igrnore… solved it 🙂

          Regards

Leave a Reply

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

Search Post

Subscribe for weekly email
fluentform Newsletter Inline
We won’t send you spam. Unsubscribe at any time.