npm - @paydock/client-sdk - Versions diffs - 1.10.58-beta → 1.10.72-beta - Mend

@paydock/client-sdk 1.10.58-beta → 1.10.72-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/README.md +51 -0
package/bundles/widget.umd.js +283 -13
package/bundles/widget.umd.min.js +1 -1
package/lib/api/api-charge-internal.d.ts +52 -0
package/lib/api/api-charge-internal.js +12 -1
package/lib/api/api-charge-internal.js.map +1 -1
package/lib/canvas-3ds/canvas-3ds.d.ts +17 -1
package/lib/canvas-3ds/canvas-3ds.js +30 -4
package/lib/canvas-3ds/canvas-3ds.js.map +1 -1
package/lib/canvas-3ds/services/gpayments-service.d.ts +42 -0
package/lib/canvas-3ds/services/gpayments-service.js +162 -0
package/lib/canvas-3ds/services/gpayments-service.js.map +1 -0
package/lib/canvas-3ds/services/index.d.ts +1 -0
package/lib/canvas-3ds/services/index.js +2 -0
package/lib/canvas-3ds/services/index.js.map +1 -0
package/lib/canvas-3ds/services/standalone3ds-service.d.ts +21 -0
package/lib/canvas-3ds/services/standalone3ds-service.js +32 -0
package/lib/canvas-3ds/services/standalone3ds-service.js.map +1 -0
package/lib/helper/access-token.d.ts +1 -0
package/lib/helper/access-token.js +8 -0
package/lib/helper/access-token.js.map +1 -1
package/lib/wallet-buttons/paypal.wallet-service.js +4 -6
package/lib/wallet-buttons/paypal.wallet-service.js.map +1 -1
package/package.json +1 -1
package/slate.md +51 -0

package/README.md CHANGED Viewed

@@ -4557,6 +4557,57 @@ This example shows how you can use a lot of other methods to settings your form
 </html>
 ```
+## Canvas 3ds for Standalone 3ds charges
+After you initialized the 3ds charge via `v1/charges/standalone-3ds` API endpoint, you get a token used to initialized the Canvas3ds. All above information regarding setup, loading and initialization still apply.
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Title</title>
+        <style>
+            iframe {
+                border: 0;
+                width: 40%;
+                height: 450px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="widget3ds"></div>
+        <script src="https://app-sandbox.paydock.com/v1/widget.umd.js"></script>
+        <script>
+            var canvas3ds = new paydock.Canvas3ds("#widget3ds", "token");
+            canvas3ds.on("chargeAuthSuccess", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthReject", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthChallenge", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthDecoupled", function (data) {
+                console.log(data.result.description);
+            });
+            canvas3ds.on("error", function ({ charge_3ds_id, error }) {
+                console.log(error);
+            });
+            canvas3ds.load();
+        </script>
+    </body>
+</html>
+```
+**The chargeAuthSuccess event is executed both for frictionless flow, or for challenge flow after the customer has correctly authenticated with the bank using whatever challenge imposed.**
+**The chargeAuthChallenge event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank)**
+**The chargeAuthDecoupled event is sent when the flow is a decoupled challenge, alongside a `data.result.description` field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a chargeAuthSuccess or chargeAuthReject event**
+**The error event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted**
 ## Vault Display Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)

package/bundles/widget.umd.js CHANGED Viewed

@@ -5154,12 +5154,12 @@
                                   });
                               });
                           }, onShippingChange: function onShippingChange(data, _actions) {
-                              var parsedCallbackData = _this2.parseUpdateData(data);
-                              _this2.latestShippingData = parsedCallbackData.shipping;
-                              _this2.eventEmitter.emit(WALLET_EVENT.UPDATE, parsedCallbackData);
-                              return new Promise(function (res, rej) {
-                                  _this2.latestShippingChangePromiseResolve = res;
-                                  _this2.latestShippingChangePromiseReject = rej;
+                              return new Promise(function (resolve, reject) {
+                                  var parsedCallbackData = _this2.parseUpdateData(data);
+                                  _this2.latestShippingData = parsedCallbackData.shipping;
+                                  _this2.latestShippingChangePromiseResolve = resolve;
+                                  _this2.latestShippingChangePromiseReject = reject;
+                                  _this2.eventEmitter.emit(WALLET_EVENT.UPDATE, parsedCallbackData);
                               });
                           }, onApprove: function onApprove(data) {
                               return new Promise(function (resolve, reject) {
@@ -5814,6 +5814,15 @@
                   return null;
               }
           }
+      }, {
+          key: "extractData",
+          value: function extractData(body) {
+              try {
+                  return JSON.parse(atob(body.meta));
+              } catch (_a) {
+                  return null;
+              }
+          }
       }, {
           key: "extractMeta",
           value: function extractMeta(body) {
@@ -5948,6 +5957,8 @@
   var WALLET_CAPTURE_LINK = '/v1/charges/wallet/capture';
   var WALLET_CALLBACK_LINK = '/v1/charges/wallet/callback';
+  var STANDALONE_3DS_PROCESS_LINK = '/v1/charges/standalone-3ds/process';
+  var STANDALONE_3DS_HANDLE_LINK = '/v1/charges/standalone-3ds/handle';
   var ApiChargeInternal = function () {
       function ApiChargeInternal(api) {
           classCallCheck(this, ApiChargeInternal);
@@ -5965,6 +5976,16 @@
           value: function walletCallback(payload) {
               return this.api.getClientPromise('POST', WALLET_CALLBACK_LINK).send(payload);
           }
+      }, {
+          key: 'standalone3dsProcess',
+          value: function standalone3dsProcess(payload) {
+              return this.api.getClientPromise('POST', STANDALONE_3DS_PROCESS_LINK).send(payload);
+          }
+      }, {
+          key: 'standalone3dsHandle',
+          value: function standalone3dsHandle() {
+              return this.api.getClientPromise('GET', STANDALONE_3DS_HANDLE_LINK).send(undefined);
+          }
       }]);
       return ApiChargeInternal;
   }();
@@ -6826,6 +6847,231 @@
     return HtmlPaymentSourceWidget;
   }(PaymentSourceWidget);
+  var hiddenStyle = {
+      visibility: "hidden",
+      border: "0",
+      width: "0",
+      height: "0"
+  };
+  var PROCESS_STANDALONE_3DS_STATUS;
+  (function (PROCESS_STANDALONE_3DS_STATUS) {
+      PROCESS_STANDALONE_3DS_STATUS["SUCCESS"] = "success";
+      PROCESS_STANDALONE_3DS_STATUS["ERROR"] = "error";
+      PROCESS_STANDALONE_3DS_STATUS["PENDING"] = "pending";
+  })(PROCESS_STANDALONE_3DS_STATUS || (PROCESS_STANDALONE_3DS_STATUS = {}));
+  var GPAYMENTS_EVENT = {
+      AUTH_SUCCESS: 'chargeAuthSuccess',
+      AUTH_ERROR: 'chargeAuthReject',
+      DECOUPLED: 'chargeAuthDecoupled',
+      CHALLENGE: 'chargeAuthChallenge',
+      ERROR: 'error'
+  };
+  var GPaymentsService = function () {
+      function GPaymentsService(container, api, eventEmitter) {
+          classCallCheck(this, GPaymentsService);
+          this.container = container;
+          this.api = api;
+          this.eventEmitter = eventEmitter;
+          this.resultRead = false;
+          this.iFrameEvent = new IFrameEvent(window);
+      }
+      createClass(GPaymentsService, [{
+          key: "load",
+          value: function load(_ref, title) {
+              var initialization_url = _ref.initialization_url,
+                  secondary_url = _ref.secondary_url,
+                  charge_3ds_id = _ref.charge_3ds_id;
+              try {
+                  this.setupIFrameEvents(charge_3ds_id);
+                  this.initializeIFrames(initialization_url, secondary_url, title);
+              } catch (err) {
+                  this.eventEmitter.emit(GPAYMENTS_EVENT.ERROR, this.parseError(err, charge_3ds_id));
+              }
+          }
+      }, {
+          key: "initializeIFrames",
+          value: function initializeIFrames(initializationUrl, secondaryUrl, title) {
+              var hideAuthorization = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+              var divAuthorization = document.createElement("div");
+              divAuthorization.setAttribute("id", "paydock_authorization_iframe");
+              this.container.getElement().appendChild(divAuthorization);
+              this.browserAndChallengeContainer = new Container("#paydock_authorization_iframe");
+              this.iFrameAuthorization = new IFrame(this.browserAndChallengeContainer);
+              this.iFrameAuthorization.load(initializationUrl, { title: title });
+              var divSecondaryURL = document.createElement("div");
+              divSecondaryURL.setAttribute("id", "paydock_secondary_iframe");
+              this.container.getElement().appendChild(divSecondaryURL);
+              this.monitoringContainer = new Container("#paydock_secondary_iframe");
+              this.iFrameSecondaryUrl = new IFrame(this.monitoringContainer);
+              this.iFrameSecondaryUrl.load(secondaryUrl, { title: title });
+              this.hideIframes(hideAuthorization);
+          }
+      }, {
+          key: "hideIframes",
+          value: function hideIframes() {
+              var hideAuthorization = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+              for (var prop in hiddenStyle) {
+                  if (!hiddenStyle.hasOwnProperty(prop)) continue;
+                  if (hideAuthorization) this.iFrameAuthorization.setStyle(prop, hiddenStyle[prop]);
+                  this.iFrameSecondaryUrl.setStyle(prop, hiddenStyle[prop]);
+              }
+          }
+      }, {
+          key: "setupIFrameEvents",
+          value: function setupIFrameEvents(widgetId) {
+              var _this = this;
+              this.iFrameEvent.on(EVENT.CHARGE_AUTH, widgetId, function (data) {
+                  if (data.status === "MethodSkipped" /* SKIPPED */) _this.performAuthentication(data);
+              });
+              this.iFrameEvent.on(EVENT.CHARGE_AUTH_SUCCESS, widgetId, function (data) {
+                  _this.processResult(data.charge_3ds_id);
+              });
+          }
+      }, {
+          key: "parseResultData",
+          value: function parseResultData(_ref2, charge3dsId) {
+              var status = _ref2.status;
+              return {
+                  status: status,
+                  charge_3ds_id: charge3dsId
+              };
+          }
+      }, {
+          key: "parseHandleResponse",
+          value: function parseHandleResponse(_ref3, charge3dsId) {
+              var status = _ref3.status,
+                  result = _ref3.result;
+              return {
+                  status: status,
+                  charge_3ds_id: charge3dsId,
+                  result: {
+                      description: result === null || result === void 0 ? void 0 : result.description
+                  }
+              };
+          }
+      }, {
+          key: "parseError",
+          value: function parseError(data, charge3dsId) {
+              return { charge_3ds_id: charge3dsId, error: data };
+          }
+      }, {
+          key: "processResult",
+          value: function processResult(charge3dsId) {
+              var _this2 = this;
+              if (this.resultRead) return;
+              this.resultRead = true;
+              this.api.charge().standalone3dsHandle().then(function (result) {
+                  _this2.iFrameAuthorization.remove();
+                  _this2.iFrameSecondaryUrl.remove();
+                  if (result.status === PROCESS_STANDALONE_3DS_STATUS.SUCCESS) _this2.eventEmitter.emit(GPAYMENTS_EVENT.AUTH_SUCCESS, _this2.parseResultData(result, charge3dsId));else _this2.eventEmitter.emit(GPAYMENTS_EVENT.AUTH_ERROR, _this2.parseResultData(result, charge3dsId));
+              }, function (err) {
+                  _this2.eventEmitter.emit(GPAYMENTS_EVENT.ERROR, _this2.parseError(err, charge3dsId));
+              });
+          }
+      }, {
+          key: "externalAPI",
+          value: function externalAPI(method, url) {
+              var request = new XMLHttpRequest();
+              request.open(method, url, true);
+              return new Promise(function (resolve, reject) {
+                  request.onload = function () {
+                      try {
+                          var body = JSON.parse(request.responseText);
+                          resolve(body);
+                      } catch (error) {
+                          reject(error);
+                      }
+                  };
+                  request.send();
+              });
+          }
+      }, {
+          key: "doPolling",
+          value: function doPolling(url, charge3dsId) {
+              var _this3 = this;
+              this.externalAPI("GET", url).then(function (data) {
+                  if (!data.event || data.event === "AuthResultNotReady") setTimeout(function () {
+                      _this3.doPolling(url, charge3dsId);
+                  }, 2000);else if (data.event === 'AuthResultReady') _this3.processResult(charge3dsId);else throw new Error("Event not supported");
+              }).catch(function (err) {
+                  return _this3.eventEmitter.emit(GPAYMENTS_EVENT.ERROR, _this3.parseError(err, charge3dsId));
+              });
+          }
+      }, {
+          key: "performAuthentication",
+          value: function performAuthentication(_ref4) {
+              var _this4 = this;
+              var charge_3ds_id = _ref4.charge_3ds_id;
+              this.iFrameAuthorization.remove();
+              this.iFrameSecondaryUrl.remove();
+              this.api.charge().standalone3dsProcess({ charge_3ds_id: charge_3ds_id }).then(function (authenticationResult) {
+                  var _a, _b;
+                  if (authenticationResult.status === "success" /* SUCCESS */) _this4.eventEmitter.emit(GPAYMENTS_EVENT.AUTH_SUCCESS, _this4.parseHandleResponse(authenticationResult, charge_3ds_id));else if (authenticationResult.status === "pending" /* PENDING */) {
+                          if ((_a = authenticationResult === null || authenticationResult === void 0 ? void 0 : authenticationResult.result) === null || _a === void 0 ? void 0 : _a.challenge) {
+                              _this4.eventEmitter.emit(GPAYMENTS_EVENT.CHALLENGE, _this4.parseHandleResponse(authenticationResult, charge_3ds_id));
+                              _this4.initializeIFrames(authenticationResult.result.challenge_url, 'authenticationResult.result.secondary_url', 'Authentication Challenge', false);
+                              _this4.doPolling(authenticationResult.result.secondary_url, charge_3ds_id);
+                          } else if ((_b = authenticationResult === null || authenticationResult === void 0 ? void 0 : authenticationResult.result) === null || _b === void 0 ? void 0 : _b.decoupled_challenge) {
+                              _this4.eventEmitter.emit(GPAYMENTS_EVENT.DECOUPLED, _this4.parseHandleResponse(authenticationResult, charge_3ds_id));
+                              _this4.doPolling(authenticationResult.result.secondary_url, charge_3ds_id);
+                          }
+                      } else return _this4.eventEmitter.emit(GPAYMENTS_EVENT.AUTH_ERROR, _this4.parseHandleResponse(authenticationResult, charge_3ds_id));
+              }, function (err) {
+                  _this4.eventEmitter.emit(GPAYMENTS_EVENT.ERROR, _this4.parseError(err, charge_3ds_id));
+              });
+          }
+      }]);
+      return GPaymentsService;
+  }();
+  var STANDALONE_3DS_GATEWAYS = {
+      GPAYMENTS: "GPayments"
+  };
+  var Standalone3dsService = function () {
+      function Standalone3dsService(container, eventEmitter) {
+          classCallCheck(this, Standalone3dsService);
+          this.env = ENV.SANDBOX;
+          this.container = container;
+          this.eventEmitter = eventEmitter;
+      }
+      createClass(Standalone3dsService, [{
+          key: "load",
+          value: function load(token, options) {
+              var parsedToken = AccessToken.validateJWT(token);
+              if (!parsedToken) throw new Error("Invalid charge token");
+              var tokenData = AccessToken.extractData(parsedToken.body);
+              var api = new ApiInternal(token, API_AUTH_TYPE.TOKEN);
+              api.setEnv(this.env, this.alias);
+              switch (tokenData.service_type) {
+                  case STANDALONE_3DS_GATEWAYS.GPAYMENTS:
+                      new GPaymentsService(this.container, api, this.eventEmitter).load(tokenData, options.title);
+                      break;
+              }
+          }
+      }, {
+          key: "setEnv",
+          value: function setEnv(env, alias) {
+              this.env = env;
+              this.alias = alias;
+          }
+      }]);
+      return Standalone3dsService;
+  }();
   /**
    * List of available token's content formats
    * @enum TOKEN_FORMAT
@@ -6837,6 +7083,7 @@
   (function (TOKEN_FORMAT) {
       TOKEN_FORMAT["HTML"] = "html";
       TOKEN_FORMAT["URL"] = "url";
+      TOKEN_FORMAT["STANDALONE_3DS"] = "standalone_3ds";
   })(TOKEN_FORMAT || (TOKEN_FORMAT = {}));
   /**
    * List of available event's name
@@ -6849,6 +7096,17 @@
    * @param {string} ADDITIONAL_DATA_REJECT=additionalDataCollectReject
    * @param {string} CHARGE_AUTH=chargeAuth
    */
+  /**
+   * List of available event's name for Standalone 3ds flow
+   * @const STANDALONE_3DS_EVENT
+   *
+   * @type {object}
+   * @param {string} CHARGE_AUTH_SUCCESS=chargeAuthSuccess
+   * @param {string} CHARGE_AUTH_REJECT=chargeAuthReject
+   * @param {string} CHARGE_AUTH_DECOUPLED=chargeAuthDecoupled
+   * @param {string} CHARGE_AUTH_CHALLENGE=chargeAuthChallenge
+   * @param {string} ERROR=error
+  */
   /**
    * Class Canvas3ds include method for working on html
    * @constructor
@@ -6870,6 +7128,8 @@
           this.link.setParams({ ref_id: this.token.charge_3ds_id });
           this.container = new Container(selector);
           this.iFrame = new IFrame(this.container);
+          this.eventEmitter = new EventEmitter();
+          this.standalone3dsService = new Standalone3dsService(this.container, this.eventEmitter);
           this.event = new IFrameEvent(window);
       }
@@ -6881,7 +7141,7 @@
            *
            */
           value: function load() {
-              if (this.token.format === TOKEN_FORMAT.HTML) this.iFrame.loadFromHtml(this.token.content, { title: '3d secure authentication' });else if (this.token.format === TOKEN_FORMAT.URL) this.iFrame.load(this.token.content, { title: '3d secure authentication' });else console.error('Token contain unsupported payload');
+              if (this.token.format === TOKEN_FORMAT.HTML) this.iFrame.loadFromHtml(this.token.content, { title: '3d secure authentication' });else if (this.token.format === TOKEN_FORMAT.URL) this.iFrame.load(this.token.content, { title: '3d secure authentication' });else if (this.token.format === TOKEN_FORMAT.STANDALONE_3DS) this.standalone3dsService.load(this.token.content, { title: '3d secure authentication' });else console.error('Token contain unsupported payload');
           }
           /**
            * Current method can change environment. By default environment = sandbox.
@@ -6897,6 +7157,7 @@
           key: 'setEnv',
           value: function setEnv(env, alias) {
               this.link.setEnv(env, alias);
+              this.standalone3dsService.setEnv(env, alias);
               for (var index in this.configs) {
                   if (!this.configs.hasOwnProperty(index)) continue;
                   this.configs[index].setEnv(env, alias);
@@ -6919,7 +7180,7 @@
            * widget.on('chargeAuthReject').then(function (data) {
            *      console.log(data);
            * });
-           * @param {string} eventName - Available event names [EVENT]{@link EVENT}
+           * @param {string} eventName - Available event names [EVENT]{@link EVENT} [STANDALONE_3DS_EVENT]{@link STANDALONE_3DS_EVENT}
            * @param {listener} [cb]
            * @return {Promise<IEventData> | void}
            */
@@ -6929,12 +7190,21 @@
           value: function on(eventName, cb) {
               var _this = this;
-              if (typeof cb === 'function') return this.event.on(eventName, this.link.getParams().ref_id, cb);
-              return new Promise(function (resolve) {
-                  return _this.event.on(eventName, _this.link.getParams().ref_id, function (res) {
-                      return resolve(res);
+              if (this.token.format === TOKEN_FORMAT.STANDALONE_3DS) {
+                  if (typeof cb === 'function') return this.eventEmitter.subscribe(eventName, cb);
+                  return new Promise(function (resolve) {
+                      return _this.eventEmitter.subscribe(eventName, function (res) {
+                          return resolve(res);
+                      });
                   });
-              });
+              } else {
+                  if (typeof cb === 'function') return this.event.on(eventName, this.link.getParams().ref_id, cb);
+                  return new Promise(function (resolve) {
+                      return _this.event.on(eventName, _this.link.getParams().ref_id, function (res) {
+                          return resolve(res);
+                      });
+                  });
+              }
           }
           /**
            * Using this method you can hide widget after load