Square

• Navigate to WordPress Admin Dashboard → Forms → Forms.

• Now you’re on the Forms page.

• Hover over the form and click on the Edit button.

• Now you’re on the Edit Form page.

• Navigate to the Settings tab and then click on the Square option.

• Now you’re on the Square Settings page.
• Select the mode according to your requirement in the Mode option.
• Click on the Connect with Square button.

• If you’re not logged in to your Square account, you’ll be redirected to the Square login page.
• Enter the credentials of your Square account and log in.

• An authentication page will appear if you’re already logged in to your Square account.
• Click on the Allow button.

• Once done, click on the THAT’S MY SITE – REDIRECT ME button to complete the connection.

• Once the connectivity is done, select the Location from the dropdown menu.

• Enter the Application ID, Access Token, and Location ID of your Square Application.
• Once done, click on the Save Settings button.

• Once done, a notification will appear at the top titled “Settings updated”.

• Now you’re on the Edit Form page.
• Go to the Pricing Fields section on the right-hand side of the page.
• Drag and drop the Square CC field on the form.

• The Square CC field now appears on the form.
• Customize the fields according to your requirement.
• Click on the Save Form button.

• Front-End Impact

• The Customer will navigate to the website.
• Go to the Bookings Form page.
• Select the Location, Service, and Staff according to the configuration mentioned above.
• Now, a calendar will appear. Select the date on the calendar accordingly.
• Now select the slot on that specific date.
• Enter the Card details in the Square Credit Card section.
• The total amount will appear in the Total section.
• Once done, click on the Submit button.

• Once the Booking is successful, a message will appear on the form page.

• Now go to your Square dashboard.
• Go to the Transactions tab in the Sandbox since we were in Test mode.
• All the transactions will appear in this tab.

• Click on the transaction to view its details.

• All the details of that specific transaction will appear on the right-hand side of the page.

NOTE: The Status of the payment will be Succeeded in the Square because the appointment status will be Confirmed by default in the Appointments section.