View Categories

How to Integrate Square with Fluent Forms (Inline Payment Integration)

Square is a powerful payment processing platform that offers Fluent Forms inline payment options and a smooth and secure payment experience using credit and debit cards.

This article will guide you through integrating Square into your WordPress Site with the  Fluent Forms plugin.

Remember, Square Integration is a Premium Feature of the Fluent Forms Plugin. So, you need the Fluent Forms Pro plugin to integrate this.

Enable Square Payment Method #

First, go to Global Settings from the Fluent Forms Navbar, open the Payment tab from the left sidebar, and click the Payment Methods option.

Now, go to the Square in the top navbar and click Enable Square Payment Method. The Square Payment Method will be enabled globally for all forms. 

1. Enable Payment Methods scaled 47753

Configure Square with Fluent Forms #

Once you enable the Square, all the required settings will appear to configure the Square with Fluent Forms. 

Before starting the configuration, select any Payment Mode between Test (for test payments) and Live (for real payments) as both options follow the same process, e.g., I choose the Test Mode.

Then, you need to obtain the Application ID, Access Key, and Location ID from your Square Account.

2. Payment Mode and API Credentials scaled 47753

Get the API Credentials from Square #

To learn how to get all the required API Credentials from your Square, follow the steps with screenshots below – 

First, log in to your Square account from here. If you do not have an account, sign up here.
Then, create an app in your Square account to get the API credentials for configuration.

To create an app, log in to the Square Dashboard, go to the Account section from the Navbar, and click the Developer Console tab. 

3. Developer Console scaled 47753

Click the Plus Icon under the Applications tab to create a new application.

4. Plus Icon scaled 47753

Now, add a name to your application and click the Next button. 

5. Application Name 47753

Check the Accept Payments box and click on the Next button.

6. Accept Payments 47753

Select your desired option from the pop-up with the Find your Audience option, and click the Complete button. 

7. Myself Complete button 47753

After creating the application, you will find the Application ID and Access Key in the Sandbox Application ID Access Token fields under the Credentials. Copy them. 

8. Copy Application ID and Access Token scaled 47753

Now, go to the Locations tab from the left sidebar, and copy the Location ID.

9. Copy Location ID scaled 47753

Now, return to the Square Payment Method Settings from the Global Settings section of Fluent Forms.

Then, paste the Application ID, Access Token, and Location ID in the corresponding fields.

Finally, press the Save Settings button, and your Square account will be configured with Fluent Forms for your WordPress Site. 

10. Paste all credentials scaled 47753

Integrate Square in Forms #

Once you finish setting up your Square payment method, you can easily add this payment method to any of your existing Payment Forms (i.e., a form where Payment Item and Payment Method fields are added).

If you do not have any existing Payment Forms, read this Documentation to learn how to create one.

First, go to the Editor page of your desired form by clicking its Edit option.

11. Open desired form scaled 47753

Once you are on the Editor page, go to the Input Customization menu on the right side of the added Payment Method field by clicking the Pencil Icon.

Now, go to the Payment Methods, check the Square option, click the Dropdown Arrow, and you will get two options. These are:

  • Method Label: Here, you can change the label based on your preference for your added payment method.
  • Embedded Checkout: Check this box to activate Square as an inline payment option. 

To learn more details about the Payment Method field, read this Documentation

12. set up Payment Method field scaled 47753

Once you complete the edit, press the Save Form button to save all the changes.

Now, to embed and display the form on a specific Page/Post, copy this Shortcode from the top right side and paste it into your desired Page/Post

Also, to see the Preview of the form, click the Preview & Design button in the middle.

13. Save form scaled 47753

Preview of Added Payment Method #

Here is the preview of the Payment Method that we just added. 

14. Added Square form preview scaled 47753

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you.