Instructions
Set up a Redirect URL and Notification URL on your application
Configure Square Terminal in the Backend
Set up Pusher Sockets
1. Set up a Redirect URL and Notification URL on your application
Before configuring Square Terminal in the Backend, you need to set up a Redirect URL and Notification URL on your application.
Redirect URL
The redirect URL is the endpoint for your application or web page that processes the seller authorization response and manages the seller’s OAuth tokens. You need to add this URL to your application using the Developer Dashboard.
To set up the redirect URL, go to the Developer Dashboard, choose Open for your application, in the left pane, choose OAuth. In the Redirect URL box, enter the URL that redirects the seller authorization to your application, then choose Save (or you can get the redirect URL quickly by copying the redirect URL that is auto-generated by your domain into the Guide section of Square Terminal in the Backend page, then paste it to the Redirect URL box.
Notification URL
Applications need at least one reachable notification URL to receive and process webhook events from Square. Notification URLs are specified on the Webhooks page of your application in the Developer Dashboard.
To set up a notification URL, you need to define an endpoint that will direct webhook event notifications to your application by going to the Webhooks page of your application in the Developer Dashboard, click on the Add Endpoint button, on the Add Endpoint popup, enter your notification URL into the URL box (or you can get the notification URL quickly by copying the notification URL that is auto-generated by your domain into the Guide section of Square Terminal in the Backend page then paste it to the URL box).
Determine a Square API version. The API version you select must include the events that you want to subscribe to.
Recommended: While adding Endpoint, you should select the following events
device.code.paired
refund.updated
terminal.checkout.updated
terminal.refund.updated
2. Configure Square Terminal in the Backend
To be able to use Square Terminal as a payment method on Point of Sales of Magestore, you first need to set up Square Terminal in the Backend.
Log in to the Backend page, on the Admin sidebar, go to POS > Admin > Settings > open the Payment for POS section > select Square Terminal
Fill out the following fields:
Field | Description |
Enabled | Yes/No |
Title | Enter a title to identify Square Terminal as a payment option during checkout, take payment, refund |
Client ID | Enter the Client ID from your Square application (Application ID is also known as the Client ID). Get it from the Oauth page. |
Client Secret | Enter the Client Secret from your Square application (Application Secret is also known as the Client Secret) Get it from the Oauth page. |
Webhook Signature Key | Enter the Webhook Signature Key. Get it from the Endpoint Details on the Webhooks page. http://prntscr.com/1t4cgx3 |
Sandbox Mode | Yes/No Set the current operating environment for Square Terminal transactions |
Sort Order | Define the display order of this payment method on the checkout/take payment screen |
If the Square SDK has not installed yet, you need to install Square SDK by running the command:
composer require "square/square:13.1.0.20210818"
via your ssh before you connect with Square.
After you have already configured all things that are mentioned above, the next step you click on the Connect with Square button (remember to save config before clicking on the Connect with Square button), right after clicking on this button, a popup will appear, looks like this:
After allowing the permissions, the popup will close automatically and the current page is reloaded.
In sandbox mode, the seller dashboard should be opened in the same browser with your website
After connecting with Square successfully, the “Location” field is displayed to allow mapping the POS Locations with Square Locations. You can remove a mapping by clicking the Recycle Bin icon and re-mapping with another one.
To create the Square Locations, you can refer to this instruction.
The Disconnect button will also appear if your website is already connected with Square.
You can click this button to revoke the access token.
3. Set up Pusher Sockets
Since we are using Pusher Sockets to push the information from server to client, you need to go to POS > Admin > Settings > Pusher Channels (WebSocket) to enable and configure this.
Before you configure Pusher Sockets, you need to install Pusher SDK by running the following command via your SSH:
composer require "square/square:13.1.0.20210818"
To get the information about: App ID, Key, Secret, Cluster of Pusher, you need to create an account on Pusher.com, then create a Channels app. Go to the “Keys” page for that app, and get your app_id, key, secret and cluster.
After you have filled out the information to configure Pusher Socket, click on the Save Config button. You now can click on the Test API connection button to make sure that you have already configured correctly.