Square Payments

Disclaimers:

CheckoutChamp 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, Order Entry, or FunnelKonnekt.

• How to Obtain Square Credentials

• How to set up Square

• Prerequisites

• Checkout Page Changes

• Square SQPaymentForm JS Changes

• Alternative Implementation

• Upsells with Square

---

How to Obtain Square Credentials

Step 1. Go here 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.

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

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

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

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

How to set up Square

Step 1. Go to Gateways > Gateway Integrations

Step 2. Scroll down until you see Square

Step 3. Click the green Activate button to activate Square

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.

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

• You can download the javascript/css files for the SQPaymentForm here

• 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

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

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

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.

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

Replace the square application id in "applicationId" const in the JS file.

Alternative Implementation

If you would like to have Square's SQPaymentForm embedded onto your checkout page, you will have to follow Sqaure's documentation, found here and make the required changes to your lander to support this.

Upsells with Square

Add these hidden inputs to your upsell page code.

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