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);}});},apaymentCallback: 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.
Last modified 8mo ago