Connect your forms with Square to seamlessly process credit card payments. Square forms ensures all transactions are secure, allowing users to complete payments without leaving your site. This makes Square an excellent choice for small business owners and online sellers who need a dependable payment solution to efficiently manage and grow their transactions.

Download and install

1. If you haven't already done so, install and activate Fatstash.
2. Once the plugin has been activated, go to your WordPress Dashboard and look for the fatstash menu.

Set up Square integration

Once you have successfully activated Fatstash, you need to connect it with your Square account to start accepting payments. It is important to configure your fatstash settings to ensure everything functions properly. If any steps are missed, you might encounter issues such as a blank screen. Follow the steps below to get started.

1. Navigate to Payments Settings. Begin by accessing your WordPress dashboard. From there, go to fatstash → Global Settings → Payments and click the Square tab. Click the Connect button under the Live section to authorize the connection between your forms and Square.
2. Access your Square account.. You will then be redirected to Square where you can log in to your account. If you don’t already have a Square account, click here to create one. This account is necessary to integrate Square’s payment processing with your forms.
3. Authorize Permissions. Approve the necessary permissions for processing Square payments by clicking the Allow button to confirm.
4. Verify Connection. After allowing permissions, you will be redirected back to the fatstash Global Settings page on your site. To confirm a successful connection, look for a green checkmark with the text Connected next to the Live connection status.

Set up Square form to collect payments

After your live environment is configured and verified, you can set up a form to collect payments using Square.

1. Go into edit the form and add a Payment field to start processing payments in Square. .
2. Go to your form Settings → Actions → Notifications, and click Collect a Payment.
3. Give your Payment action an Action Name for easy reference. This name will only be seen on the back end.
4. Give your Payment action a Description to attach to the payment. This information will be sent to Square along with the payment. You can either type in a description, or use a field from your form to set the description dynamically. If you would like to use a field for the description, click the icon in the Description box and then select your field in the modal box. This will insert a value like [3130] for your Description setting.
5. Set the Amount for the payment. You can either type in an amount, or use a field from your form to calculate the amount. If you would like to use a field for the amount, click the icon in the Amount box and then click your field in the modal box. This will insert a value like [3138] for your Amount setting.
6. Choose the Payment Type. Your payment type can be one-time or recurring.
   • One-Time Payment: If you choose this payment type, the Use Square Merchant Currency option will be preselected. This option will use the currency associated with the connected merchant. Merchants are limited to a single currency.
   • Recurring Payments: For recurring transactions, you can set up Square subscriptions using "Repeat Cadence" options, allowing intervals such as "Daily," "Monthly," or "Annual."
7. Select the Payment Gateway. Choose Square as the payment gateway. This selection connects your form with Square’s payment processing system.
8. The Customer Information fields can be associated with field values in your form.

Set up Square test payment integration

Before testing payments, it’s important to configure your Square settings to ensure everything functions properly in test mode. If any steps are missed, you might encounter issues such as a blank screen.

1. Enable Test Mode. Navigate to fatstash → Global Settings → Payments and click the Square tab. Locate the option labeled Use the Square test mode and check the box. This enables a testing environment, allowing you to simulate transactions without affecting real funds.
2. Access your Square account. Click the Connect button in Test mode to authorize the connection between your forms and Square. You will be redirected to Square where you can log in to your account. If you don’t already have a Square account, click here to create one. This account is necessary to integrate Square’s payment processing with your forms.
3. Set Up a Sandbox Test Account. Click here to create a Square sandbox test account. This account allows you to conduct payment simulations as if they were real.
4. Access the Square Dashboard. Click the Square Dashboard to open the new sandbox account. Keep this browser tab open, as you will need to reference it during the configuration process.
5. Authorize Permissions. Approve the necessary permissions for processing Square test payments by clicking the Allow button to confirm.
6. Verify Connection. After allowing permissions, you will be redirected back to the fatstash Global Settings page on your site. To confirm a successful connection, look for a green checkmark with the text Connected next to the Test connection status.

Run a Square test payment

Testing your Square payment forms is crucial to ensure everything is functioning correctly before processing actual payments. This section guides you through conducting test transactions.

1. Ensure HTTPS Connection. Make sure your site is using HTTPS. Without a secure connection, the Square card fields won’t appear, and you’ll receive an error message, "Web Payments SDK can only be embedded on sites that use HTTPS and have a secure context."
2. Open the page where your Square form is published and submit a test entry.
3. You can simulate payments using the following test card numbers.
   • Successful payments: Use 4800 0000 0000 0004 and 4800 0000 0000 0012 to test payments.
   • Declined payments: Use 4000 0000 0000 0002 to test payments.
Note: For subscription payments to work, your site must be publicly accessible because webhooks must trigger these operations.

View and manage Square payments

Keep track of payments from your Square form by managing them within the Payments section of your fatstash settings. This centralized location allows you to keep everything organized and easy to review.

1. Navigate to Payments. Start by logging into your WordPress admin dashboard. Once logged in, navigate to fatstash → Payments.
2. Open the Payments Overview. Using the dropdown filter, choose your Square form from the selection and click the Filter button.
3. Manage Square Payments. You will be taken to all related activities for your Square form, including both payments and subscriptions.

Limitations

• This feature is part of the Lite package. Features like setting field values post-payment and using conditional logic are currently unsupported.
• While Square supports various payment methods such as Apple Pay and Gift Cards, this integration only supports credit cards within the current setup.

Troubleshooting

• Why am I seeing a white screen when I try to connect?

  The pop-up tries to explain this, but you need to create a sandbox test account, and load the dashboard in another tab before clicking Connect.

• Why is my credit card field not appearing?

  This is likely because you are not using HTTPS. In order to use Square payment forms (both for Live and Test purposes), you will need an SSL connection.

• Why is my subscription immediately canceled after I make a payment?

  Square will immediately deactivate a subscription for having a suspicious identity. Try to provide real information, like a valid email, when creating subscriptions.

Related developer hooks

• Customize the styling of a Square field with the frm_square_style hook.