# Square Payments

{% hint style="danger" %}
**Disclaimers:**

Konnektive **does not** store any card details for merchants using Square's Payment Gateway

Square will work for One-time and recurring purchases

Square **will ONLY work** with landers that connect to Konnektive via **Direct API**. This will NOT work with Form-code landers or Order Entry.
{% endhint %}

* [How to Obtain Square Credentials](#how-to-obtain-square-credentials)
* [How to set up Square](#how-to-set-up-square)
* [Prerequisites](#prerequisites)
* [Checkout Page Changes](#checkout-page-changes)
* [Square SQPaymentForm JS Changes](#square-sqpaymentform-js-changes)
* [Alternative Implementation](#alternative-implementation)
* [Upsells with Square](#upsells-with-square)

***

### **How to Obtain Square Credentials** <a href="#how-to-obtain-square-credentials" id="how-to-obtain-square-credentials"></a>

**Step 1.** Go [here ](https://squareup.com/us/en/developers)and login to the Square Developer Dashboard using your Square credentials

**Step 2.** Once logged into the Developer Dashboard click **New Application**

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FjkiTgaNC1X7gg3J4GIZ5%2FUntitled.png?alt=media&#x26;token=e2f46741-62e2-40a8-864e-8863cb96ee5b" alt=""><figcaption></figcaption></figure>

**Step 3. Name** and **Create** your Application, Doing so gives you complete API access for your Square merchant account.

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FHfFcF9o6pStzV8GmZbLt%2FUntitled.png?alt=media&#x26;token=acfefe44-a704-4d2c-b2d1-7fb1a047e6b7" alt=""><figcaption></figcaption></figure>

**Step 4** Once you have created your Application, Navigate to the **Credentials** Section.&#x20;

&#x20;       **Step 4a: Make sure to turn Sandbox Mode OFF.**

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2F0IAvqgNRh0He83EjbaWy%2FUntitled.png?alt=media&#x26;token=3bc21ded-6c73-46b2-8e48-dbb0b3d41bbb" alt=""><figcaption></figcaption></figure>

**Step 5.** Once you have turned off Sandbox Mode you will be able to access your **Application Id**

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FlonPRRDk8h8NH2FxNOqY%2FUntitled.png?alt=media&#x26;token=ced068fe-9d3a-4e8c-a186-5f04b927e357" alt=""><figcaption></figcaption></figure>

**Step 6.** Navigate to the Locations Section to uncover your **LocationId**

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FFFsGqNHPD5PPAVhZfdzX%2FUntitled.png?alt=media&#x26;token=f86c58f5-53f2-444a-a83f-f29b4cf7b47d" alt=""><figcaption></figcaption></figure>

Navigate to the OAuth Section to obtain your **ApplicationSecret** and to set your **Redirect URL** which is <https://api.konnektive.com/oauth/square/>

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2F5jd3Zi26FklYiy2aig1s%2FUntitled.png?alt=media&#x26;token=c94b27a1-38df-42fc-867f-fa91e1420f48" alt=""><figcaption></figcaption></figure>

**Note: If you have any issues with these credentials, attempt to use legacy credentials and re-attempt your test.**

### **How to set up Square** <a href="#how-to-set-up-square" id="how-to-set-up-square"></a>

**Step 1**. Go to **Gateways** > **Gateway Integrations**

**Step 2**. Scroll down until you see **Square**

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2F7Z28JGTZmemUd7ezcWzx%2Fimage.png?alt=media&#x26;token=238eee3e-6a5a-4b23-b594-d44cc0fab671" alt=""><figcaption></figcaption></figure>

**Step 3**. Click the green **Activate** button to activate Square

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FLi6c8LThGwmFZyA2bFri%2Fimage.png?alt=media&#x26;token=20de6a1c-3a96-469a-90af-852ad4fc422d" alt=""><figcaption></figcaption></figure>

**Step 4**. Enter your **AccessToken** and **LocationId** in the General Details Section of the Create Gateway screen.

**Step 5**. Click the green **Create Gateway** button to save your changes and create the gateway.

<figure><img src="https://1103784913-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiAC0G99SjXjSv2GM5PAE%2Fuploads%2FqIxQapnx0aJ6TX1VWnrD%2Fimage.png?alt=media&#x26;token=1b800df3-1e4f-4ce6-bf1a-9ce5f638217b" alt=""><figcaption></figcaption></figure>

\
Once the **ApplicationId**, **Application Secret**, and **LocationId** are set, please hit the below link to authorize the CRM to access your Square account.

### **Prerequisites**

* Checkout page should be secure HTTPS. A non-secured call to the Square gateway will be rejected.
* "**Application Id**", which you will get from your Square gateway account.

**Reference:** [**https://developer.squareup.com/docs/get-started**](https://developer.squareup.com/docs/get-started)

* You can download the javascript/css files for the SQPaymentForm [here](https://github.com/konnektive/square)
* Once you have obtained the javascript/css files, place them in the same directory as your landing page code on your web server.

### **Checkout Page Changes** <a href="#checkout-page-changes" id="checkout-page-changes"></a>

**Step 1**: Add 3 hidden input fields in the checkout form. Square gateway reference:

`<input type='hidden' name='prepaidType' value='SQUARE'>`

&#x20;

Square gateway credit card reference:

`<input type='hidden' name='formCardNonce'id='formCardNonce' value=''>`

\
**It is important to note that you will need to pass the paysource=PREPAID and prepaidType=SQUARE when forming the Import Order call to Konnektive.**<br>

Square gateway credit card postal code reference:

`<input type='hidden'name='formCardNoncePostalCode'id='formCardNoncePostalCode' value=''>`

**formCardNonce** & **formCardNoncePostalCode** fields will be populated on successful submission of Square SQPaymentForm.

**Step 2**: Add the below script on your checkout page to open the SQPaymentForm.

**Note:** Billing postal code is mandatory.

```
<script>
// On checkout form submit
var cardNonce = {Set "formCardNonce" value}
var cardNoncePostalCode = {Set "formCardNoncePostalCode" value}
var billingPostalCode = {Set billing postal code value}
cardNonce = $.trim(cardNonce);
cardNoncePostalCode = $.trim(cardNoncePostalCode);
billingPostalCode = $.trim(billingPostalCode);

// Checkout form validation scripts
..
..
..
// Before return success
if(billingPostalCode == '' || cardNonce != '')
{
if($.trim(cardNoncePostalCode) != '' &&
($.trim(billingPostalCode) !=
$.trim(cardNoncePostalCode)))
{
alert('The postal code entered in the credit card form
mismatched with the billing
address. Please refresh the page and try again.')
return false;
}
// Submit the checkout form
}
else
{
var squareURL = {SQPaymentForm URL};

window.open(squareURL,'','height=500,width=500,left=100,top=100
,resizable=yes,scrollbars=no,toolbar=no,menubar=no,location=no
,directories=no, status=no');
}
</script>
```

### **Square SQPaymentForm JS Changes** <a href="#square-sqpaymentform-js-changes" id="square-sqpaymentform-js-changes"></a>

Replace the square application id in "applicationId" const in the JS file.\ <br>

### **Alternative Implementation** <a href="#alternative-implementation" id="alternative-implementation"></a>

If you would like to have Square's SQPaymentForm embedded onto your checkout page, you will have to follow Sqaure's documentation, found [**here**](https://developer.squareup.com/docs/payment-form/payment-form-walkthrough?q=embedded) and make the required changes to your lander to support this.\ <br>

### **Upsells with Square** <a href="#upsells-with-square" id="upsells-with-square"></a>

Add these hidden inputs to your upsell page code.\ <br>

`<input type='hidden' name='prepaidType' value='SQUARE'> <input type='hidden' name='formCardNonce' id='formCardNonce' value=''>`
