Links

Click-To-Pay Sample Code

  1. 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. 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. 3.
    To see the full solution please click here.