@paydock/client-sdk 1.84.9 → 1.86.5-beta

package/README.md

@@ -5477,7 +5477,7 @@ Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest`
 
 <dl>
 <dt><a href="#WalletButtons">WalletButtons</a></dt>
-<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)</p>
+<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal, Afterpay)</p>
 </dd>
 </dl>
 
@@ -5578,7 +5578,7 @@ Interface of Shipping Options for PayPal
 <a name="WalletButtons" id="WalletButtons" href="#WalletButtons">&nbsp;</a>
 
 ## WalletButtons
-Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
+Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal, Afterpay)
 
 **Kind**: global class  
 

package/bundles/widget.umd.js

@@ -1643,7 +1643,9 @@
       CHARGE_AUTH_CANCELLED: 'chargeAuthCancelled',
       ADDITIONAL_DATA_SUCCESS: 'additionalDataCollectSuccess',
       ADDITIONAL_DATA_REJECT: 'additionalDataCollectReject',
-      CHARGE_AUTH: 'chargeAuth'
+      CHARGE_AUTH: 'chargeAuth',
+      DISPATCH_SUCCESS: 'dispatchSuccess',
+      DISPATCH_ERROR: 'dispatchError'
   };
   var IFrameEvent = function () {
       function IFrameEvent(subject) {
@@ -1685,6 +1687,11 @@
                   }
               }
           }
+      }, {
+          key: 'clear',
+          value: function clear() {
+              this.listeners = [];
+          }
       }, {
           key: 'subscribe',
           value: function subscribe(subject, listener) {
@@ -4485,17 +4492,18 @@
           };
           this.env = new Env(WIDGET_URL);
           this.defaultPayload.source = messageSource;
+          this.iframeEvent = new IFrameEvent(window);
       }
 
       createClass(StorageDispatcher, [{
           key: 'create',
-          value: function create() {
-              var reset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
-              if (this.dispatcherFrame && !reset) return this.dispatcherFrame;
+          value: function create(onLoadCallback) {
+              this.onLoadCallback = onLoadCallback;
               if (this.dispatcherFrame) this.destroy();
+              this.widgetId = Uuid.generate();
+              this.setupIframeEventListeners();
               var iFrame = document.createElement('iframe');
-              iFrame.setAttribute('src', this.env.getConf().url + STORAGE_DISPATCHER_URI);
+              iFrame.setAttribute('src', this.env.getConf().url + STORAGE_DISPATCHER_URI + ('?widgetId=' + this.widgetId));
               iFrame.setAttribute('id', STORAGE_DISPATCHER_ID);
               iFrame.style.display = 'none';
               document.body.appendChild(iFrame);
@@ -4508,13 +4516,16 @@
           value: function destroy() {
               if (this.dispatcherFrame && this.dispatcherFrame.parentNode) {
                   this.dispatcherFrame.parentNode.removeChild(this.dispatcherFrame);
-                  this.dispatcherFrame = undefined;
               }
+              this.iframeEvent.clear();
+              this.widgetId = undefined;
+              this.dispatcherFrame = undefined;
           }
       }, {
           key: 'push',
-          value: function push(payload) {
+          value: function push(payload, pushCallbacks) {
               var _a;
+              this.pushCallbacks = pushCallbacks;
               if (!this.dispatcherFrame) {
                   console.error(LOG_PREFIX$1 + ' dispatcher is not initialized.');
                   return;
@@ -4526,7 +4537,26 @@
           key: 'setEnv',
           value: function setEnv(env, alias) {
               this.env.setEnv(env, alias);
-              this.create(true);
+              this.create(this.onLoadCallback);
+          }
+      }, {
+          key: 'setupIframeEventListeners',
+          value: function setupIframeEventListeners() {
+              var _this = this;
+
+              if (!this.widgetId) return;
+              this.iframeEvent.on(EVENT.AFTER_LOAD, this.widgetId, function (_event) {
+                  var _a;
+                  (_a = _this.onLoadCallback) === null || _a === void 0 ? void 0 : _a.call(_this);
+              });
+              this.iframeEvent.on(EVENT.DISPATCH_SUCCESS, this.widgetId, function (_event) {
+                  var _a, _b;
+                  (_b = (_a = _this.pushCallbacks) === null || _a === void 0 ? void 0 : _a.onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a);
+              });
+              this.iframeEvent.on(EVENT.DISPATCH_ERROR, this.widgetId, function (_event) {
+                  var _a, _b;
+                  (_b = (_a = _this.pushCallbacks) === null || _a === void 0 ? void 0 : _a.onError) === null || _b === void 0 ? void 0 : _b.call(_a);
+              });
           }
       }]);
       return StorageDispatcher;
@@ -4552,18 +4582,27 @@
       }, {
           key: 'next',
           value: function next(checkout, params) {
-              this.storageDispatcher.create();
-              var widgetSessionData = {
-                  merchant_redirect_url: this.getRedirectUrl(),
-                  checkout_token: checkout.token,
-                  public_key: params.public_key,
-                  gateway_id: params.gateway_id
-              };
-              this.storageDispatcher.push({ intent: StorageDataIntent.WIDGET_SESSION, data: widgetSessionData });
-              var checkoutUri = this.getCheckoutUri(checkout.link);
-              Zip.Checkout.init({
-                  checkoutUri: checkoutUri,
-                  redirect: true
+              var _this2 = this;
+
+              this.storageDispatcher.create(function () {
+                  var widgetSessionData = {
+                      merchant_redirect_url: _this2.getRedirectUrl(),
+                      checkout_token: checkout.token,
+                      public_key: params.public_key,
+                      gateway_id: params.gateway_id
+                  };
+                  _this2.storageDispatcher.push({ intent: StorageDataIntent.WIDGET_SESSION, data: widgetSessionData }, {
+                      onSuccess: function onSuccess() {
+                          var checkoutUri = _this2.getCheckoutUri(checkout.link);
+                          Zip.Checkout.init({
+                              checkoutUri: checkoutUri,
+                              redirect: true
+                          });
+                      },
+                      onError: function onError() {
+                          console.error('Error initializing Zip Checkout');
+                      }
+                  });
               });
           }
           // for backward compatibility
@@ -5627,12 +5666,13 @@
           value: function load(container) {
               var _this2 = this;
 
+              var _a;
               if (!window.Promise) {
                   // Given that this library does not rely in any polyfill for promises, and this integration depends on them, we early return if Promises are not supported for the browser (like I.E. 11).
                   this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, null);
-                  return;
+                  return Promise.resolve();
               }
-              var buttonId = container.getElement().id || '';
+              var buttonId = ((_a = container.getElement()) === null || _a === void 0 ? void 0 : _a.id) || '';
               var paypalScript = document.createElement("script");
               paypalScript.src = "https://www.paypal.com/sdk/js?client-id=" + this.publicKey + "&currency=" + this.meta.currency + (this.meta.pay_later === true ? '&enable-funding=paylater&disable-funding=card' : "&disable-funding=credit,card") + (!this.meta.capture ? "&intent=authorize" : '');
               paypalScript.async = true;
@@ -5660,17 +5700,20 @@
                                   _this2.eventEmitter.emit(WALLET_EVENT.UPDATE, parsedCallbackData);
                               });
                           }, onApprove: function onApprove(data) {
-                              return new Promise(function (resolve, reject) {
+                              _this2.pendingApprovalPromise = _this2.pendingApprovalPromise || new Promise(function (resolve, reject) {
                                   return _this2.eventEmitter.emit(WALLET_EVENT.PAYMENT_METHOD_SELECTED, {
                                       data: { payment_method_id: data.orderID, customer: { payment_source: { external_payer_id: data.payerID } } },
                                       onSuccess: function onSuccess() {
-                                          return resolve(true);
+                                          _this2.pendingApprovalPromise = undefined;
+                                          resolve(true);
                                       },
                                       onError: function onError(err) {
-                                          return reject(err);
+                                          _this2.pendingApprovalPromise = undefined;
+                                          reject(err);
                                       }
                                   });
                               });
+                              return _this2.pendingApprovalPromise;
                           }, onError: function onError(err) {
                               // Error handling so that paypal does not throw an uncaught error
                               // We're already handling errors and notifying Merchants at "wallet-buttons.ts"
@@ -5680,7 +5723,7 @@
                   }
               };
               document.head.appendChild(paypalScript);
-              return;
+              return Promise.resolve();
           }
       }, {
           key: "update",
@@ -6500,25 +6543,28 @@
           value: function onPaymentAuthorized(paymentData) {
               var _this4 = this;
 
-              var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+              var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
               var billingAddressLine1 = (_c = (_b = (_a = paymentData.paymentMethodData) === null || _a === void 0 ? void 0 : _a.info) === null || _b === void 0 ? void 0 : _b.billingAddress) === null || _c === void 0 ? void 0 : _c.address1;
               var billingAddressLine2 = (_f = (_e = (_d = paymentData.paymentMethodData) === null || _d === void 0 ? void 0 : _d.info) === null || _e === void 0 ? void 0 : _e.billingAddress) === null || _f === void 0 ? void 0 : _f.address2;
               var shippingAddressLine1 = (_g = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _g === void 0 ? void 0 : _g.address1;
               var shippingAddressLine2 = (_h = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _h === void 0 ? void 0 : _h.address2;
               var shippingOptionMethod = (_j = this.selectedShippingOption) === null || _j === void 0 ? void 0 : _j.type;
+              var shippingAddressCountry = (_k = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _k === void 0 ? void 0 : _k.countryCode;
+              var shippingAddressCity = (_l = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _l === void 0 ? void 0 : _l.locality;
+              var shippingAddressPostCode = (_m = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _m === void 0 ? void 0 : _m.postalCode;
+              var shippingAddressState = (_o = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _o === void 0 ? void 0 : _o.administrativeArea;
+              var shippingContactFirstName = (_p = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _p === void 0 ? void 0 : _p.name;
+              var shippingContactEmail = paymentData === null || paymentData === void 0 ? void 0 : paymentData.email;
+              var shippingContactPhone = (_q = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _q === void 0 ? void 0 : _q.phoneNumber;
               return new Promise(function (resolve) {
-                  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+                  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                   return _this4.eventEmitter.emit(WALLET_EVENT.PAYMENT_METHOD_SELECTED, {
                       data: _extends({ customer: {
                               payment_source: _extends(_extends(_extends(_extends({ wallet_type: WALLET_TYPE.GOOGLE,
                                   // card_name: paymentData.shippingAddress?.name, // TODO: Do we want to use this value? Point 2 at https://paydock.atlassian.net/browse/P2-7209?focusedCommentId=60202
                                   type: paymentData.paymentMethodData.type, card_scheme: (_b = (_a = paymentData.paymentMethodData) === null || _a === void 0 ? void 0 : _a.info) === null || _b === void 0 ? void 0 : _b.cardNetwork }, billingAddressLine1 && { address_line1: billingAddressLine1 }), billingAddressLine2 && { address_line2: billingAddressLine2 }), billingAddressLine2 && { address_line2: billingAddressLine2 }), { address_country: (_e = (_d = (_c = paymentData.paymentMethodData) === null || _c === void 0 ? void 0 : _c.info) === null || _d === void 0 ? void 0 : _d.billingAddress) === null || _e === void 0 ? void 0 : _e.countryCode, address_city: (_h = (_g = (_f = paymentData.paymentMethodData) === null || _f === void 0 ? void 0 : _f.info) === null || _g === void 0 ? void 0 : _g.billingAddress) === null || _h === void 0 ? void 0 : _h.locality, address_postcode: (_l = (_k = (_j = paymentData.paymentMethodData) === null || _j === void 0 ? void 0 : _j.info) === null || _k === void 0 ? void 0 : _k.billingAddress) === null || _l === void 0 ? void 0 : _l.postalCode, address_state: (_p = (_o = (_m = paymentData.paymentMethodData) === null || _m === void 0 ? void 0 : _m.info) === null || _o === void 0 ? void 0 : _o.billingAddress) === null || _p === void 0 ? void 0 : _p.administrativeArea, ref_token: paymentData.paymentMethodData.tokenizationData.token })
                           } }, _this4.isShippingRequired() && {
-                          shipping: _extends(_extends(_extends(_extends(_extends({}, shippingOptionMethod && { method: shippingOptionMethod }), _this4.hasShippingOptions() && { options: _this4.meta.shipping_options }), shippingAddressLine1 && { address_line1: shippingAddressLine1 }), shippingAddressLine2 && { address_line2: shippingAddressLine2 }), { address_country: (_q = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _q === void 0 ? void 0 : _q.countryCode, address_city: (_r = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _r === void 0 ? void 0 : _r.locality, address_postcode: (_s = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _s === void 0 ? void 0 : _s.postalCode, address_state: (_t = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _t === void 0 ? void 0 : _t.administrativeArea, contact: {
-                                  first_name: (_u = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _u === void 0 ? void 0 : _u.name,
-                                  email: paymentData === null || paymentData === void 0 ? void 0 : paymentData.email,
-                                  phone: (_v = paymentData === null || paymentData === void 0 ? void 0 : paymentData.shippingAddress) === null || _v === void 0 ? void 0 : _v.phoneNumber
-                              } })
+                          shipping: _extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends(_extends({}, shippingOptionMethod && { method: shippingOptionMethod }), _this4.hasShippingOptions() && { options: _this4.meta.shipping_options }), shippingAddressLine1 && { address_line1: shippingAddressLine1 }), shippingAddressLine2 && { address_line2: shippingAddressLine2 }), shippingAddressCountry && { address_country: shippingAddressCountry }), shippingAddressCity && { address_city: shippingAddressCity }), shippingAddressPostCode && { address_postcode: shippingAddressPostCode }), shippingAddressState && { address_state: shippingAddressState }), { contact: _extends(_extends(_extends({}, shippingContactFirstName && { first_name: shippingContactFirstName }), shippingContactEmail && { email: shippingContactEmail }), shippingContactPhone && { phone: shippingContactPhone }) })
                       }),
                       onSuccess: function onSuccess() {
                           return resolve({ transactionState: 'SUCCESS' });
@@ -6864,8 +6910,11 @@
       createClass(AfterPayWalletService, [{
           key: 'load',
           value: function load(container) {
-              this.storageDispatcher.create();
-              this.mount(container);
+              var _this2 = this;
+
+              this.storageDispatcher.create(function () {
+                  return _this2.mount(container);
+              });
           }
       }, {
           key: 'setEnv',
@@ -6877,14 +6926,14 @@
       }, {
           key: 'mount',
           value: function mount(container) {
-              var _this2 = this;
+              var _this3 = this;
 
               var _a, _b, _c, _d;
               var customStyles = {};
               if (((_a = this.meta) === null || _a === void 0 ? void 0 : _a.style) && _typeof((_b = this.meta) === null || _b === void 0 ? void 0 : _b.style) === 'object') customStyles = JSON.parse(JSON.stringify(((_c = this.meta) === null || _c === void 0 ? void 0 : _c.style['afterpay']) || ((_d = this.meta) === null || _d === void 0 ? void 0 : _d.style)));
               var afterpayButton = this.getButton(customStyles);
               afterpayButton.onclick = function () {
-                  return _this2.onAfterPayButtonClicked();
+                  return _this3.onAfterPayButtonClicked();
               };
               var buttonWalletStyle = this.getButtonStyle(customStyles);
               container.getElement().appendChild(afterpayButton);
@@ -6893,40 +6942,46 @@
       }, {
           key: 'onAfterPayButtonClicked',
           value: function onAfterPayButtonClicked() {
-              var _this3 = this;
+              var _this4 = this;
 
-              this.storageDispatcher.push({ intent: StorageDataIntent.WIDGET_SESSION, data: { token: this.token } });
-              return new Promise(function () {
-                  var _a, _b;
-                  var afterpayJS = document.createElement('script');
-                  var countryCode = (_a = _this3.meta) === null || _a === void 0 ? void 0 : _a.country;
-                  afterpayJS.type = 'text/javascript';
-                  afterpayJS.src = ((_b = _this3.meta) === null || _b === void 0 ? void 0 : _b.gateway_mode) === 'live' ? 'https://portal.afterpay.com/afterpay.js' : 'https://portal.sandbox.afterpay.com/afterpay.js';
-                  afterpayJS.async = true;
-                  afterpayJS.defer = true;
-                  afterpayJS.onload = function () {
-                      window.AfterPay.initialize({ countryCode: countryCode });
-                      _this3.getCheckoutSession().then(function (response) {
-                          window.AfterPay.redirect({
-                              token: response.ref_token
+              var _a, _b;
+              var afterpayJS = document.createElement('script');
+              var countryCode = (_a = this.meta) === null || _a === void 0 ? void 0 : _a.country;
+              afterpayJS.type = 'text/javascript';
+              afterpayJS.src = ((_b = this.meta) === null || _b === void 0 ? void 0 : _b.gateway_mode) === 'live' ? 'https://portal.afterpay.com/afterpay.js' : 'https://portal.sandbox.afterpay.com/afterpay.js';
+              afterpayJS.async = true;
+              afterpayJS.defer = true;
+              afterpayJS.onload = function () {
+                  window.AfterPay.initialize({ countryCode: countryCode });
+                  _this4.storageDispatcher.push({ intent: StorageDataIntent.WIDGET_SESSION, data: { token: _this4.token } }, {
+                      onSuccess: function onSuccess() {
+                          _this4.getCheckoutSession().then(function (response) {
+                              window.AfterPay.redirect({
+                                  token: response.ref_token
+                              });
+                          }).catch(function (err) {
+                              window.AfterPay.close();
+                              _this4.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
+                                  err: err
+                              });
                           });
-                      }).catch(function (err) {
+                      },
+                      onError: function onError() {
+                          console.error('Error initializing Afterpay wallet');
                           window.AfterPay.close();
-                          _this3.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
-                              err: err
-                          });
-                      });
-                  };
-                  document.head.appendChild(afterpayJS);
-              });
+                          _this4.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {});
+                      }
+                  });
+              };
+              document.head.appendChild(afterpayJS);
           }
       }, {
           key: 'getCheckoutSession',
           value: function getCheckoutSession() {
-              var _this4 = this;
+              var _this5 = this;
 
               return new Promise(function (resolve, reject) {
-                  return _this4.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
+                  return _this5.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
                       data: {
                           request_type: 'CREATE_SESSION',
                           wallet_type: WALLET_TYPE.AFTERPAY
@@ -7053,7 +7108,7 @@
    * @param {string} [type] Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required.
    */
   /**
-   * Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
+   * Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal, Afterpay)
    * @constructor
    *
    * @example