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

Was this helpful?

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

Click-To-Pay Sample Code

Last updated 2 years ago

Was this helpful?

  1. Let's define a helper object with all necessary components:

    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;
        },
        authorize: function(payload) {
            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(payload));
            });
        },
        paymentSuccess: async function(clickToPayResponse) {
            return new Promise((resolve, reject) => {
                try {
                    const response = await this.authorize(clickToPayResponse);
                    console.log(response);
                    const resp = JSON.parse(response);
                    if (!resp)
                        throw "Invalid response: "+ response;
                    if (resp.xError) {
                        throw resp;
                    }
                    resolve(response);
                } catch (err) {
                    console.error("paymentSuccess error.", JSON.stringify(err));
                    reject(err);
                }
            });
        },a
        paymentCallback: function (clickToPayResponse) {
            click2payRequest.setPayload(clickToPayResponse);
        },
        cpButtonLoaded: function(resp) {
            if (!resp) return;
            if (resp.status === iStatus.success) {
                showHide("click2payContainer", true);
            } else if (resp.reason) {
                console.log(resp.reason);
            }
        },
        setPayload: function (value) {
            document.getElementById('c2p-payload').value = JSON.stringify(value, null, 2);
            showHide("divC2PPayload", value);
        }
    }
  2. Let’s enable Click-To-Pay for the website:

    document.addEventListener("DOMContentLoaded", function(event) { 
        .....
        ckClick2Pay.enableClickToPay({
          environment: c2pEnvironment.sandbox, 
          externalClientId: "<Your externalClientId>",
          click2payContainer: "click2payContainer", 
          onPaymentPrefill: click2payRequest.paymentPrefill,
          onPaymentSuccess: click2payRequest.paymentSuccess,
          onPaymentError: click2payRequest.paymentCallback,
          onPaymentCancel: click2payRequest.paymentCallback,
          onButtonLoaded: click2payRequest.cpButtonLoaded
      });
    .....
    }
  3. To see the full solution please click .

πŸ“±
here