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.
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.
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 into your Square account from here. If you do not have an account, sign up from 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.
Click the Plus Icon under the Applications tab to create a new application.
Now, add a name to your application and click the Next button.
Check the Accept Payments box and click on the Next button.
Select your desired option from the popup with the Find your Audience option, and click the Complete button.
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.
Now, go to the Locations tab from the left sidebar, and copy the Location ID.
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.
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.
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.
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.
Preview of Added Payment Method #
Here is the preview of the Payment Method that we just added.
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our @support team. Thank you.
