WooCommerce with Square Payment Gateway
1.Introduction #
WooCommerce Square Payment Gateway helps your users pay their amount at WooCommerce checkout using the Square payment gateway. With this Plugin, you can manage payment and refunds between WooCommerce and Square along with other features. Keeping the testing phase in mind, we have integrated Sandbox support With the latest version of SQUARE V3.1 API to see test transactions in the Square’s dashboard.
2.Features #
- Square Up Payment Gateway now allows you to enable payment via the following methods at the checkout :
- Payment via Google Pay
- Payment via Apple Pay
- Payment via ACH payment
- Payment via After Pay
- Payment via CashApp
- Payment via Square Gift Card
3.Requirements: #
- WooCommerce 3.5+
- An SSL Certificate.
- Square account.
- WordPress 4.4+
- PHP version 5.5+
- WooCommerce subscription plugin is required for recurring payments.
4.Important Points Before Considering The Woocommerce Square Up Payment Gateway Plugin: #
- Square card payment API support is currently available in the US, Canada, UK, Australia, and Japan only.
- On your checkout page, the SSL certificate must be activated for Square payments.
- At the moment, this Plugin does not support WordPress Multi-site.
- This Plugin does not synchronize your products between WooCommerce and Square. If you are interested in this feature, then WooSquare Pro is the right option for you, which includes the Square payment gateway as well.
- The WooCommerce currency settings must be the same as selected in the Square application location. Otherwise, payments will give an error. To change currency settings, navigate to WordPress Admin Dashboard → WooCommerce → Settings → General.
5.Getting started #
Note: From Version 1.8, we have introduced the Square Auth Connection feature.
Connecting Square with Woo-Square
- After installing the Woo-Square Payment plugin, Woo-Square page will open which will ask the admin to connect with the Square account.
- If the admin wants to connect with Square later, navigate to WordPress Admin Dashboard → Woo-Square.
- This will open the Square connection page.
- If you don’t have a Square account click on the SIGNUP button or Click here to SignUp.
- For production settings, select the Production toggle.
- Now, click on the Connect with Square button.
- If you’re not logged in to your Square account then you’ll be redirected towards the Square login page.
- Enter the credentials of your Square account and click sign in.
- If you’re already logged in to your Square account then an authentication page will appear.
- After achieving login, a permissions page will be prompted
- Click Allow to authorize permissions for different functionalities that plugin has to retrieve from the square account.
- Once done, click on the THAT’S MY SITE – REDIRECT ME button to redirect to the site and complete authorization with square.
- After OAuth has been achieved, select the store location from Select your Store dropdown menu.
- Click Save Changes button to save the settings.
- Click Access your Module to activate the plugin modules tab.
- Woo-Square Modules displayed.
6.Square Payment Gateway #
- To enable the Woo-Square Payment Gateway addon on the checkout and enable Square Sandbox, you must enable Square Payment Gateway.
- Navigate to WordPress Admin Dashboard → Woo-Square → Plugin Module.
- In this section, locate and enable the Square Payment Gateway addon.
- Once the module is enabled, a sub-tub Payment Settings will appear in the Woo-Square tab.
- To access the Square payment gateway settings, navigate to the WordPress Admin Dashboard → Woo-Square → Payment Settings.
Square Payment Settings
Enable/Disable
Click on Enable Square checkmark to enable Square as a payment option on WooCommerce checkout in Square Payment Settings.
Title
Set the title of the Square card. This will be displayed to the customers outside the credit card field.
Description
Write a description (e.g., Pay with your credit card via Square). The description will display before the credit card fields, any specific instructions can be given through this option.
Delay Capture
Allows you to pre-authorize a charge and not capture it until later. It is useful if you are about to ship goods and then charge the payment after delivery. Capture an authorization by marking the order Processing or Completed OR void the authorization by canceling the order.
Create Customer
Click on the Create Customer checkmark, it will create a profile of the customer on Square at the time of checkout. This profile will hold all the data of the specific customer like orders, transactions, etc.
Logging
Click on the Log Debug Messages checkmark, it will save debug messages to the WooCommerce System Status log. To see log WordPress Admin Dashboard → Status → Log →Select Payment Log.
Send Customer Info
Click on the Send Customer Info checkmark to send first name and last name with an order to Square.
Enable AVS Zip Code Check
Click on the Enable AVS Zip Code Check checkmark to enable the verification system, which is used to verify the customer’s address provided at the time of credit card transaction.
- Click on the Save Changes button.
7.Sandbox Settings #
- You can also connect to Square sandbox for making test payments. In sandbox mode no live transactions are made.
- Just click the toggle button on top, it will take you to Sandbox mode.
- Make sure Square Sandbox Dashboard is opened in another tab of your browser.
- For that, go to Square Developer and open your sandbox test account.
- The Square Sandbox Dashboard will open.
- Click on the Connect with Square button.
- Once done, click on the THAT’S MY SITE – REDIRECT ME button to complete the connection.
- Select Location and click on the Save Changes button.
8.Google Pay #
- Navigate to WordPress Admin Dashboard → Woo-Square → Payment Settings.
- In the Square Payment Gateway Settings, navigate to the Google Pay option.
- Click on the Enable Google Pay checkmark. This will enable the Google pay option on the checkout page.
- Click on the Save Changes button.
- Now navigate to the WordPress Admin Dashboard → WooCommerce → Settings.
- Go to the Payments tab.
- Click on the Square Google Pay option to enable the Google Pay payment method on the checkout page.
- Click on the Save Changes button.
- Or click on the Manage button.
- In Manage, checkmark Enable Square Google Pay.
- Enter Title.
- Enter the Description that you want the customer to see during checkout.
- You can also Enable Delay Capture and Logging according to your requirement.
- Click on Save Changes.
Impact on Front-End
- Go to your Store.
- Select an item and complete the process.
- Proceed to the Checkout page.
- Select Google Pay from the payment method section.
Click on the Buy With G Pay button.
- A popup will appear, enter the required card information and credentials.
- Click on the Pay button.
9.Apple Pay #
Note: Apple Pay will be functional only on the Safari Browser for the live payments.
- To enable Apple Pay, navigate to WordPress Admin Dashboard → Woo-Square → Payment Settings.
- In the Square Payment Gateway Settings, navigate to the Apple Pay option.
- Click on the Enable Apple Pay checkmark. This will enable the Apple pay option on the checkout page.
- Click on the Save Changes button.
- Now navigate to the WordPress Admin Dashboard → WooCommerce → Settings.
- Go to the Payments tab.
- Click on the Square Apple Pay option to enable the Apple Pay payment method on the checkout page.
- Click on the Save Changes button or click on the Manage button.
- In Manage, checkmark Enable Square Apple Pay
- Enter Title
- Enter the Description that you want the customer to see during checkout.
- You can also Enable Delay Capture and Logging according to your requirement.
- Click on Save Changes.
Impact on Front-End
Note: Apple pay will be functional only on the Safari browser.
10.ACH Payment #
Back-End Configuration
- Navigate to the Woo-Square → Payment Settings.
- Scroll down to the Enable/Disable ACH Payment.
- Click on the Enable ACH Payment checkmark.
- Click on the Save Changes button.
WooCommerce Settings
- After saving the changes, navigate to the WordPress Admin Dashboard → WooCommerce → Settings.
- In Settings, go to the Payments tab.
- In the Payments tab, all the payment methods are available.
- Navigate to the Square ACH Payment and click on the toggle button to enable the Payment Method.
- Now, click on the Square ACH Payment option or click on the Manage/ Setup button located on the right side of every respective payment option.
- In the Square ACH Payment section, there are various options.
- You can also Enable/Disable Square ACH Payment from here.
- Change the Title of the payment method which will be displayed on the checkout page.
- Enter the Description of the payment method which will be displayed on the checkout page.
- Click on the Save Changes button.
Front-End Impact
- Go to your Store.
- Select products that you would like to purchase.
- Add the products to the Cart.
- Proceed to the checkout page.
- Now you are in the Checkout page.
- Go to the payment options.
- Click on the ACH Payment(Square) option.
- Click on the Pay with Bank Account button.
- After clicking on the Pay with Bank Account button, a popup will appear.
- Click on the Continue button to proceed.
- Now, select your bank from the given list of banks.
- Next, it will ask for your Bank Credentials.
- Provide your Username and Password.
- Click on the Submit button to proceed.
- After submitting your credentials, it will start verifying your account.
- If you have multiple accounts, it will ask you to select your primary account.
- Select your primary account and click on the Continue button to proceed.
- Your account will be successfully linked with Square.
- Click on the Continue button to proceed.
- You will be redirected to your store.
- After order confirmation, navigate to the WordPress Admin Dashboard → WooCommerce → Orders.
- Click on the order, it will redirect to the Edit Order page.
- Payment via ACH Payment (Square) is displayed in the Order notes.
Sandbox Transaction
- Go to the Squareup Sandbox dashboard.
- Navigate to the Transactions section.
- ACH payment completed transactions are displayed here.
11.After Pay #
Back-End Configuration
- Navigate to the Woo-Square → Payment Settings.
- Scroll down to the Enable/Disable After Pay.
- Click on the Enable After Pay checkbox to activate this functionality.
- Click on the Save Changes button.
WooCommerce Settings
- Navigate to the WordPress Admin Dashboard → WooCommerce → Settings.
- Go to the Payments tab. All the Payment methods are present in this tab.
- Click on the Square After Pay option or the Manage/ Setup button (Present on the right side of every respective payment option).
- Now you’ll be on the Square After Pay settings page.
- Enter the Title.
- Enter the Description.
- You can also enable the Delay Capture and Logging option according to your requirement.
- Once done, click on the Save Changes button.
Front-End Impact
- Go to your Store
- Select an item and complete the process to move toward the Checkout page.
- Select the After Pay payment method.
- Click on the Buy now with Afterpay button.
- Enter your email or mobile number.
- Enter your password and then click on the Continue button.
- Once logged in, click on the Continue button to proceed with the transaction.
- The transaction is in process, don’t close the screen.
- The order is placed successfully.
- Navigate to the WordPress Admin Dashboard → WooCommerce → Orders.
- Now you’re on the Orders page.
- Click on the order to view details.
- Now you’re on the Edit order page.
- We can see that the Payment method is mentioned as After Pay.
Sandbox Transaction
- Login to your Sandbox account.
- Go to the Transactions.
- All the transactions will be displayed here.
- Click on the transaction to view more details.
Afterpay Transaction
- Go to AfterPay.
- Login to your account.
- Your order will be under Orders.
- Click on View Order.
- The order details will be displayed.
- Payment Schedule is displayed under order details.
12.CashApp Pay #
Back-End Configuration
- Navigate to the Woo-Square → Payment Settings.
- Scroll down to the Enable/Disable CashApp Pay.
- Click on the Enable CashApp Pay checkbox to activate this functionality.
- Click on the Save Changes button.
WooCommerce Settings
- Navigate to the WordPress Admin Dashboard → WooCommerce → Settings.
- Go to the Payments tab. All the Payment methods are present in this tab.
- Click on the Square Cash App Pay option or click on the Manage/ Setup button (Present on the right side of every respective payment option)
- Now you’ll be on the Square Cash App Pay settings page.
- Enter the Title.
- Enter the Description.
- You can also enable the Delay Capture and Logging option according to your requirement.
- Once done, click on the Save Changes button.
Front-End Impact
- Go to your Store
- Select an item and complete the process to move toward the Checkout page.
- Select the Cash App Pay payment method.
- Click on the Cash App Pay button.
- Once you click the Cash App Pay button, a window will appear with the QR Code.
- Scan the QR Code with your phone.
- A link will appear, click that link, and you will be redirected to the transaction status.
- If the Square is connected with the Test Payment, it will ask for approval.
- Click on the Approve button.
- Once approved, the transaction will proceed to the sandbox.
- The order will be completed.
- All the details of the order will appear.
Sandbox Transaction
- Login to your Sandbox account.
- Go to the Transactions.
- All the transactions will be displayed here.
- Click on the transaction to view more details.
13.Gift Card #
Back-End Configuration
- Navigate to the Navigate to the Woo-Square → Payment Settings.
- Scroll down to the Enable/Disable Gift Card.
- Click on the Enable Gift Card checkmark.
- Click on the Save Changes button.
Front-End Impact
- Go to your Store.
- Select products that you would like to purchase.
- Add the products to the Cart.
- Proceed to Checkout.
- On the Checkout page, navigate to Have a gift card section.
- Enter your Gift Card code.
- Click on the Apply button.
- Check on the Use from gift card checkmark to apply.
- Gift card prices will be applied.
- Place your order.
- Now, navigate to the WooCommerce Orders.
- Select your Order.
- Gift Card will be displayed in the Order details.
Gift Card Sandbox Transaction
- Go to the Squareup Sandbox dashboard.
- Navigate to the Transactions section.
- All the transactions are displayed here.
- Click on the transaction to view more details.