Click-To-Pay Sample Code

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.
Click-To-Pay Initial Setup
Click-To-Pay iFields Integration
Last modified 2mo ago