# Square Payments V2

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

Square will work for One-time and recurring purchases

Square V2 will work with landers that connect to Konnektive via Direct API, Form Code, or CheckoutChamp. This will NOT work with Order Entry.

Square V2 supports both Google Pay and Apple Pay on a Direct API integration. Obtain the appropriate token on the page and pass it on the Import Order API.

* [How to Obtain Square Credentials](#squarepaymentsv2-howtoobtainsquarecredentials)
* [Set up Square V2](#squarepaymentsv2-setupsquarev2)
* [Prerequisites](#squarepaymentsv2-prerequisites)
* [Form Code - Checkout Page Changes](#squarepaymentsv2-formcode-checkoutpagechanges)
* [Direct API - Checkout Page Changes](#squarepaymentsv2-directapi-checkoutpagechanges)
* [Upsells with Square](#squarepaymentsv2-upsellswithsquare)

***

### **How to Obtain Square Credentials** <a href="#squarepaymentsv2-howtoobtainsquarecredentials" id="squarepaymentsv2-howtoobtainsquarecredentials"></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**

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

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

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

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

**Reference:** <https://developer.squareup.com/docs/get-started>

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

### &#x20;**Set up Square V2** <a href="#squarepaymentsv2-setupsquarev2" id="squarepaymentsv2-setupsquarev2"></a>

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

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

**Step 3**. Click the green **Activate** button

**Step 4**. Enter your **ApplicationID**, **AccessToken,** and **LocationId** in the General Details Section of the Gateway Creation Screen.

**Step 5**. **forceSCA**. Optional. This will require that a verification token be obtained from Square on the page and included on the order creation. If using 2-step checkout this will automatically trigger SCA during checkout.

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

<br>

### **Prerequisites** <a href="#squarepaymentsv2-prerequisites" id="squarepaymentsv2-prerequisites"></a>

* Your checkout page should be secure HTTPS. A non-secured call to the Square gateway will be rejected.

### **Form Code - Checkout Page Changes** <a href="#squarepaymentsv2-formcode-checkoutpagechanges" id="squarepaymentsv2-formcode-checkoutpagechanges"></a>

Use the following steps to embed the Square card payment form onto your checkout page

**Step 1:** Add this script before the closing \</head> tag

```
$ksdk->echoSquareJS('your-application-id', 'your-location-id');
```

For test mode, pass an additional testing parameter. Set it to false when finished testing. You must use sandbox **ApplicationID** and **AccessToken** in test mode.

`$ksdk->echoSquareJS('your-application-id', 'your-location-id', true);`

For SCA, pass an additional parameter to trigger the authentication

`$ksdk->echoSquareJS('your-application-id', 'your-location-id', true, true);`

**Step 2:** Remove the card number block and the paySource hidden input field

**Step 3:** Add these hidden inputs in "kform" form block

```
<input type="hidden" name='paySource' value="PREPAID">
<input type='hidden' name='prepaidType' value='SQUAREV2'>
<input type="hidden" id="formCardNonce" name="formCardNonce" value="" />
```

**Step 4:** Add style="display:none" to "Rush My Order!" button

**Step 5:** Add this form block after the "kform" form block

```
<form id="payment-form">
	<div id="square-card-container"></div>
	<input type='button' value='Rush My Order!' id="square-card-button" class='kform_submitBtn'>
</form>
```

### **Direct API - Checkout Page Changes** <a href="#squarepaymentsv2-directapi-checkoutpagechanges" id="squarepaymentsv2-directapi-checkoutpagechanges"></a>

Please use [this ](https://developer.squareup.com/docs/web-payments/take-card-payment)guide as a reference for embedding the Square card payment form on your direct API checkout page.<br>

Once this has been properly implemented please be sure to send the highlighted token as the formCardNonce when calling the Import Order API.

For SCA (3DS) you must call the verifyBuyer method after obtaining the token. Details are [here](https://developer.squareup.com/docs/web-payments/sca). Use the [StoreVerifyBuyerDetails](https://developer.squareup.com/reference/sdks/web/payments/objects/StoreVerifyBuyerDetails). After verifying the buyer, combine the token and verification code separated by a pipe as the formCardNonce when calling the Import Order API. *Example: formCardNonce=123545|9789087.*

Additional information on Square SCA is here:

<https://developer.squareup.com/docs/sca-overview-web>

If `formCardNonce` is empty in the order import request, CRM will try to complete the order in a 2-step checkout flow, as described next.

\
Use the following steps to open the Square card payment form on a separate page (a 2-step checkout flow)

**Step 1:** Remove the card number block and the paySource hidden input field from the checkout page

**Step 2:** Add these hidden inputs in "kform" form block

```
<input type="hidden" name='paySource' value="PREPAID">
<input type='hidden' name='prepaidType' value='SQUAREV2'>
```

### **Upsells with Square** <a href="#squarepaymentsv2-upsellswithsquare" id="squarepaymentsv2-upsellswithsquare"></a>

No additional work is needed for upsells. Upsells will automatically be transacted on Square.