How to Integrate Square in OpenCart

NoteKeep in mind that ApplePay will be configured automatically for you.

Here is how to integrate the Square for OpenCart with your Square Merchant Administration.

You will learn how to configure the following fields: Square Application ID, OAuth Application secret, Square OAuth Redirect URL, Webhook Notification URL and Webhook Signature Key from the Connect section.

Alternatively, feel free to watch our Video Tutorial covering the same topics.

Note It is important to follow all of these recommendations for the extension to work properly.

Step 1: Create a New Application in the Square Developer Portal

You will need to have a merchant account with Square in order to setup an application which will integrate with this extension. You can apply for a merchant account at https://squareup.com/signup/

Once you have setup your account and logged into your Square Dashboard, follow these steps to create your application:

  1. From the Sidebar, choose Apps to go to the App Marketplace
  2. In the top left-hand corner, select My Apps
  3. In the Build with Square section, click the Go to Developer Portal button which will take you to the Developer Application Dashboard
  4. Select + New Application
  5. Fill in the Application name. This name is for you to recognize the application in the developer portal and is not used by the extension.
  6. Click the Create Application button at the bottom of the page

You will be taken to the Manage App screen for your newly created application where you can configure it. If you wish to come back to this screen at a later date, you can find it in your Square account dashboard by navigating to Sidebar > Apps > My Apps and clicking Manage App for the application you want to modify.

Step 2: Connect the Square extension to your Square App

Once you have created an application through the Square Developer Portal, you need to connect it to your OpenCart extension.

Filling out the Square Application ID field:

  1. Go to your Credentials tab in the Square Application Dashboard.
  2. Copy the Application ID field from the Credentials section.
  3. Go to your OpenCart Square extension and paste it in the Square Application ID field.
  4. Click the Save button or continue editing the extension settings.

Filling out the OAuth Application Secret field:

  1. Go to the OAuth tab in the Square Application Dashboard.
  2. Click the Show Secret button to reveal the contents of the Application Secret field.
  3. Copy the Application Secret field.
  4. Go back in your OpenCart Square extension and paste it in the OAuth Application Secret field.
  5. Click the Save button or continue editing the extension settings.

Filling out the Webhook Signature Key field:

  1. Login into the Developer Application Dashboard and select your application.
  2. Navigate to the Webhooks tab.
  3. Click the Show Secret button to reveal the contents of the Signature Key field.
  4. Copy the information from the Signature Key field.
  5. Back in your OpenCart payment extension settings, paste it in the Webhook Signature Key field.
  6. Click the Save button or continue editing the extension settings.

To tell your Square application about your store:

  1. On the settings page of the Square extension, copy the field Square OAuth Redirect URL.
  2. Login into the Developer Application Dashboard and select your application.
  3. Navigate to the OAuth tab.
  4. Paste the address you copied into the Redirect URL field.
  5. Click the Save button at the bottom of the screen.

Webhook Notification URL

  1. On the settings page of the Square extension, copy the field Webhook Notification URL.
  2. Login into the Developer Application Dashboard and select your application.
  3. Navigate to the Webhooks tab.
  4. Paste the address you copied into the Notification URL field.
  5. Click the Save button at the bottom of the screen.

Note This extension requires SSL to be setup correctly for your store. If the address for the Redirect URL is using the http protocol instead of https, the Square developer portal will refuse to accept it and you will not be able to connect the extension to the application. If you have SSL enabled, make sure you are accessing the OpenCart administration panel over https when copying the Square OAuth Redirect URL field and that it is correctly displaying an https address.

Once you have setup the Redirect URL and the Webhook Notification URL in the Square application and filled out the Square Application ID, Webhook Signature Key and OAuth Application Secret in the extension's administration settings, you can click the Connect button to initiate the connection. You will be redirected to https://squareup.com/ to authenticate using the credentials for the Square account you used to create your application in Step 1. If you are already logged into your Square account in another tab or browser window you will not be asked to provide credentials, your Square account will be automatically detected, and you will be redirected back to the extension's administration settings. If there are any error messages, make sure you have filled out the Square Application ID, Webhook Signature Key and OAuth Application Secret fields correctly.

If you ever wish to change the Square account or application that the Square Payment Services extension is connected to, create your new application as in Step 1, fill in your new Application ID, Application Secret, Sandbox Application ID, Sandbox Access Token, and Redirect URL as described in Step 2, then click the Reconnect button in your OpenCart extension settings.

If you followed all steps above, you should be now finished with the integration settings.

Do not forget to configure the rest of the extension settings. More information about them can be found in the chapter User Interface of this documentation.