# 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="/files/vf9gPRA6kDyhSIqcpYqc" 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="/files/KbjiUiD7suVI82GYfrHG" 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="/files/F5n6Ds7MKRXFpieuPWPr" 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="/files/Q2tzlilLlC6C56h0cXXe" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/hKU9BsNq3r5hANPYUsQN" 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="/files/Hx9Y6LZUCfT3pC1f6O3a" 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="/files/qhkgTKC6y2rMkaiYm0af" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ZWw86JqqbdoPt4VatEp5" 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="/files/WdFgObEaNa1ctIUtj2zm" 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=''>`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.konnektive.com/konnektive-crm/gateway-setup/gateways/square-payments.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.