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.