Cardknox is now Sola
Learn More
LogoLogo
Contact Us
  • Introduction
  • 🔗API
    • Transaction API
      • Credit Card
      • Check (ACH)
      • EBT
      • Gift Card
      • Fraud
    • Customer and Recurring API
    • Reporting API
    • Account Boarding API
      • Account Boarding Merchant Agreement
      • Account Boarding Swagger UI
    • Code Samples
    • Error Codes
  • 📦SDK
    • .NET SDK
      • Transaction Workflow
    • iOS SDK
      • iOS SDK - Technical Guide
      • Workflow
    • Android SDK
      • Android SDK - Technical Guide
  • 🧰 Cardknox Products
    • 3D Secure 2.0
      • Client-Side Integration
        • Client-Side Integration (Non-iFields)
      • Server-Side Integration
    • Account Updater
    • Batch Processing
    • Browser-Based POS systems (BBPOS)
    • CloudIM Developer Guide
    • Deep Linking
      • Deep Linking Integration for Third-Party Websites
    • EBT Online
    • Gateway Emulators
    • iFields
      • Angular iFields
    • Merchant Portal
      • FAQ
    • Mobile App
    • Split Capture
    • Tap to Phone - Android
    • Partner Portal
    • PaymentSITE
      • QR Codes for PaymentSITE
    • Webhooks
  • 📱Mobile Wallets
    • Apple Pay Hosted Checkout
      • Apple Pay Hosted Checkout Initial Setup
      • Apple Pay Prerequisites
      • Apple Pay Hosted Checkout Objects Reference (Request)
      • Apple Pay Hosted Checkout Objects Reference (Response)
      • Apple Pay iFields Integration
      • Apple Pay Hosted Checkout Sample Code
      • Apple Pay Features
      • Set up Apple Pay Merchant ID with Cardknox
    • Click-To-Pay - Hosted Checkout
      • Click-To-Pay Initial Setup
      • Click-To-Pay Sample Code
      • Click-To-Pay iFields Integration
      • Click-To-Pay Objects Reference (Request)
      • Click-To-Pay Objects Reference (Response)
    • Google Pay Hosted Checkout
      • Google Pay Control Object
      • Google Pay Request Objects
      • Google Pay Response Objects
      • Google Pay Sample Code
      • iFields Integration
      • Google Pay FAQ
  • 🔌Plugins
    • Netsuite
      • NetSuite Features and Demo
    • WooCommerce
    • Magento Plugin
    • RMH (Retail Management Hero)
    • RMS (Retail Management Systems)
  • 📖Articles
    • Frequently Asked Questions
    • How to Build POS Integration Flows
    • Card Present Integration Guide
  • Glossary of Terms
Powered by GitBook
On this page
  • Overview
  • Prerequisites
  • Implementing Click-To-Pay
  • Client-Side Integration
  • Server-Side Integration
  • Questions?

Was this helpful?

Export as PDF
  1. Mobile Wallets
  2. Click-To-Pay - Hosted Checkout

Click-To-Pay Initial Setup

Last updated 2 years ago

Was this helpful?

Overview

Our simple iFields integration enables online Click-To-Pay processing through the Cardknox gateway. This document details the steps necessary to integrate Click-To-Pay with your site.

Contents

Prerequisites

Register for Click-To-Pay: See [insert link here]

Implementing Click-To-Pay

Client-Side Integration

Adding Reference to iFields

Step 1: Add the iFields.js file after the <head> tag on your payment page:

<script src=https://cdn.cardknox.com/ifields/**ifields-version-number**/ifields.min.js></script>

Adding JavaScript Objects for Click-To-Pay button

Step 1: Add the following JS snippet inside the <body> where the Click-To-Pay button is desired.

<div id="click2payContainer">
</div>

Step 2: Create JavaScript object that holds all of the properties/methods required to process Click-To-Pay.

           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);
                }
            }

Step 3: Implement desired callbacks.

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:

onPaymentSuccess: function(clickToPayResponse) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://<your domain>/<path to handle authorization>");
        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));
    });
}

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


Enable Click-To-Pay example
ckClick2Pay.enableClickToPay({
    environment: c2pEnvironment.sandbox, 
    externalClientId: "<Your externalClientId>",
    click2payContainer: "click2payContainer", 
    onPaymentPrefill: click2payRequest.paymentPrefill,
    onPaymentSuccess: click2payRequest.paymentCallback
});   

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 Cardknox.

For full list of Returned Parameters, please refer to Click-To-Pay Response Reference

API Integration

Below are the steps to integrate Click-To-Pay with the Cardknox API:

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:

public async Task<IActionResult> 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 Cardknox Representative.

Questions?

Find the latest version of iFields at:

For a full sample code please refer to

For the list of available callbacks, please refer to object.

For full integration code, please refer to

For full list of Init Parameters, please refer to

This section assumes that you already know how to integrate other payments with

Once the consumer confirms the payment, Click-To-Pay API generates a in the form of a JSON string.

Contact

📱
https://cdn.cardknox.com/ifields/versions.htm
Click-To-Pay Sample Code
Click-To-Pay Request
Click-To-Pay iFields Integration
Cardknox API
support@cardknox.com
Prerequisites
Client-Side Integration
Adding Reference to iFields
Adding JavaScript Objects for Click-To-Pay button
Enabling Click-To-Pay
Server-Side Integration
Server Endpoint Creation
API Integration
Click-To-Pay Response
Click-To-Pay Request Object