@paydock/client-sdk 1.84.10 → 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
@@ -6504,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' });
@@ -6868,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',
@@ -6881,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);
@@ -6897,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
@@ -7057,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