# Square Payments
{% hint style="danger" %}
**Disclaimers:**
Checkout Champ **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 Checkout Champ 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**
**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.
**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
**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**](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**
**Step 1**: Add 3 hidden input fields in the checkout form. Square gateway reference:
``
Square gateway credit card reference:
``
\
**It is important to note that you will need to pass the paysource=PREPAID and prepaidType=SQUARE when forming the Import Order call to Checkout Champ.**
Square gateway credit card postal code reference:
``
**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.
```
```
### **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**](https://developer.squareup.com/docs/payment-form/payment-form-walkthrough?q=embedded) and make the required changes to your lander to support this.\
### **Upsells with Square**
Add these hidden inputs to your upsell page code.\
` `
