# Click-To-Pay Initial Setup
## Overview
Our simple iFields integration enables online Click-To-Pay processing through the Sola gateway.\
This document details the steps necessary to integrate Click-To-Pay with your site.
**Contents**
* [Prerequisites](#prerequisites)
* [Client-Side Integration](#client-side-integration)
* [Adding Reference to iFields](#adding-reference-to-ifields)
* [Adding JavaScript Objects for Click-To-Pay button](#adding-javascript-objects-for-click-to-pay-button)
* [Enabling Click-To-Pay](#enable-click-to-pay)
* [Server-Side Integration](#server-side-integration)
* [Server Endpoint Creation](#server-endpoint-creation)
* [API Integration](#api-integration)
## Prerequisites
Register for Click-To-Pay: See \[insert link here]
## Implementing Click-To-Pay
### Client-Side Integration
#### Adding Reference to iFields
{% hint style="info" %}
Find the latest version of iFields at: [https://cdn.cardknox.com/ifields/versions.htm](https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fcdn.cardknox.com%2Fifields%2Fversions.htm\&data=04%7C01%7Csaltman%40cardknox.com%7Cee27e2f8cee34d8eb64108d96965fb39%7Cbee12808a32d4518bad72e695a86fc91%7C0%7C0%7C637656709056206810%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000\&sdata=EkulORguWhCwZ%2BApGRr3WBqvzxcnnMsHj6w2nxzCwog%3D\&reserved=0)
{% endhint %}
**Step 1:** Add the iFields.js file after the \ tag on your payment page:
```html
```
#### Adding JavaScript Objects for Click-To-Pay button
**Step 1:** Add the following JS snippet inside the *\* where the Click-To-Pay button is desired.
```html
```
**Step 2:** Create JavaScript object that holds all of the properties/methods required to process Click-To-Pay.
```javascript
const click2payRequest = {
paymentPrefill: function(){
const result = {
merchantRequestId: "Merchant defined request ID",
currencyCode: "USD",
description: "...corp Product",
orderId: "Merchant defined order ID",
promoCode: "Merchant defined promo code",
subtotal: roundTo(getAmount(), 2),
shippingHandling: "2.00",
tax: "2.00",
discount: "1.00",
giftWrap: "2.00",
misc: "1.00",
setTotal: function() {
this.total = roundTo(
roundToNumber(this.subtotal, 2)
+ roundToNumber(this.shippingHandling, 2)
+ roundToNumber(this.tax, 2)
+ roundToNumber(this.giftWrap, 2)
+ roundToNumber(this.misc, 2)
- roundToNumber(this.discount, 2)
, 2);
delete this.setTotal;
return this;
},
}.setTotal();
logDebug({
label: "paymentPrefill",
data: result
});
return result;
},
paymentCallback: function (payload) {
click2payRequest.setPayload(payload);
},
setPayload: function (value) {
document.getElementById('c2p-payload').value = JSON.stringify(value, null, 2);
showHide("divC2PPayload", value);
}
}
```
For a full sample code please refer to [Click-To-Pay Sample Code](https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-sample-code)
**Step 3:** Implement desired callbacks.
For the list of available callbacks, please refer to [Click-To-Pay Request](https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-objects-reference-request) object.
There are two main callbacks that must be implemented (the rest are optional):
* onPaymentPrefill - calculates total amount and sets transaction information.
* onPaymentSuccess - a callback that will be called after the consumer pays and Click-To-Pay returns a payload with all of the requested consumer information. This is where you need to make an ajax call to your server with the payload. The sample for making an ajax call is below:
*Sample Code for Making Ajax Call:*
```javascript
onPaymentSuccess: function(clickToPayResponse) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "https:///");
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
resolve(xhr.response);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(clickToPayResponse));
});
}
```
For full integration code, please refer to [Click-To-Pay iFields Integration](https://docs.solapayments.com/mobile-wallets/click-to-pay-hosted-checkout/click-to-pay-ifields-integration)
#### Enable Click-To-Pay
**window\.ckClickToPay object** - controls initialization of Click-To-Pay button
| **Method** | **Call Required** | **Description** |
| ---------------- | ----------------- | -------------------------------------------- |
| enableClickToPay | Yes | Initializes and enables Click-To-Pay Button. |
#### enableClickToPay Parameters
| **Name** | **Type** | **Required** | **Description** |
| -------------- | -------- | ------------ | --------------------------------------------------------------- |
| initParameters | Object | Yes | Object that contains initialization parameters for Click-To-Pay |
{% hint style="info" %}
For full list of Init Parameters, please refer to [Click-To-Pay Request Object](https://docs.solapayments.com/mobile-wallets/click-to-pay-objects-reference-request#clicktopayrequest)
{% endhint %}
***
{% code title="Enable Click-To-Pay example" %}
```javascript
ckClick2Pay.enableClickToPay({
environment: c2pEnvironment.sandbox,
externalClientId: "",
click2payContainer: "click2payContainer",
onPaymentPrefill: click2payRequest.paymentPrefill,
onPaymentSuccess: click2payRequest.paymentCallback
});
```
{% endcode %}
***
### Server-Side Integration
#### Server Endpoint Creation
A server endpoint is needed in order to accept the Click-To-Pay Payload from your website.
**Step 1:** Create an endpoint and method for API Integration on your server side that takes a Click-To-Pay Payload and makes a call to Sola.
For full list of Returned Parameters, please refer to Click-To-Pay Response Reference
#### API Integration
This section assumes that you already know how to integrate other payments with [Sola API](https://docs.solapayments.com/api/transaction).
**Below are the steps to integrate Click-To-Pay with the Sola API:**
Once the consumer confirms the payment, Click-To-Pay API generates a [Click-To-Pay Response](https://docs.solapayments.com/mobile-wallets/click-to-pay-objects-reference-response#clicktopayresponse-object) in the form of a JSON string.
Integration Steps:
1. Set the required fields:
1. xDigitalWalletType to ClickToPay
2. xClickToPayTransactionId to clickToPayResponse.payload.transactionId
3. xClickToPayExternalClientId to clickToPayResponse.payload.externalClientId
4. xClickToPayEncryptionKey to clickToPayResponse.payload.encryptionKey
5. xCardNum to clickToPayResponse.payload.token
6. xAmount to clickToPayResponse.amount
7. xCommand - Set to one of the values that starts with cc: like cc:sale, cc:auth, etc.
8. xKey to "Your xKey"
9. xVersion = "4.5.9"
10. xSoftwareName to “Your Software Name"
11. xSoftwareVersion to "Your Software Version"
Sample Request:
```javascript
public async Task Authorize(clickToPayResponse resp)
{
var reqGateway = new
{
xKey = "Your xKey",
xDigitalWalletType = "ClickToPay",
xAmount = (decimal)resp.amount,
xClickToPayTransactionId = resp.payload.transactionId,
xClickToPayExternalClientId = resp.payload.externalClientId,
xClickToPayEncryptionKey = resp.payload.encryptionKey,
xCardNum = resp.payload.token,
xCommand = "cc:sale",
xVersion = "4.5.8",
xSoftwareName= "Your Software Name",
xSoftwareVersion = "Your Software Version"
};
var respMsg = "";
using (var http = new HttpClient())
{
var resp = await http.PostAsJsonAsync("https://x1.cardknox.com/gatewayJSON", reqGateway);
respMsg = await resp.Content.ReadAsStringAsync();
.....
}
.....
}
```
For more details, please contact your Sola Representative.
## Questions?
Contact