npm - @paydock/client-sdk - Versions diffs - 1.101.1 → 1.102.1-beta - Mend

@paydock/client-sdk 1.101.1 → 1.102.1-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 (59) hide show

package/README.md CHANGED Viewed

@@ -2398,7 +2398,7 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 This example shows how to use these functions for **Flypay v2 Wallet**.
 _(Required `meta` fields: - . Optional `meta` fields: -)_
-### Full example
+### Flypay V2 Full example
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -2415,12 +2415,16 @@ _(Required `meta` fields: - . Optional `meta` fields: -)_
     let button = new paydock.WalletButtons(
 		"#widget",
 		charge_token,
-		{},
+		{
+            access_token: 'TOKEN',
+            refresh_token: 'TOKEN',
+        },
 	);
     button.setEnv('sandbox');
     button.onUnavailable(() => console.log("No wallet buttons available"));
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
+    button.onAuthTokensChanged((data) => console.log('Authentication tokens changed'));
     button.load();
 </script>
 </html>
@@ -2677,6 +2681,8 @@ Interface of data used by the wallet checkout and payment proccess.
 | [request_payer_name] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
 | [request_payer_email] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
 | [request_payer_phone] | <code>boolean</code> | Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets. |
+| [access_token] | <code>string</code> | Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets. |
+| [refresh_token] | <code>string</code> | Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets. |
 | [request_shipping] | <code>boolean</code> | Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Flypay V2, Stripe, Afterpay]. |
 | [shipping_options] | [<code>Array.&lt;IApplePayShippingOption&gt;</code>](#IApplePayShippingOption) \| [<code>Array.&lt;IPayPalShippingOption&gt;</code>](#IPayPalShippingOption) | Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets. |
 | [merchant_name] | <code>string</code> | Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets. |

package/bundles/widget.umd.js CHANGED Viewed

@@ -684,7 +684,7 @@
   // the empty string is set in case if version not provided.
   //
   // e.g: grunt build --sdk-version=v1.0.0
-  SDK._version = 'v1.101.1';
+  SDK._version = 'v1.102.1-beta';
   var ENV = {
     SANDBOX: 'sandbox',
@@ -1182,7 +1182,7 @@
    * @param {string} [gatewayID=default] - gateway ID. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token.
    * @param {string} paymentType - Type of payment source which shows in widget form. Available parameters [PAYMENT_TYPE]{@link PAYMENT_TYPE}
    * @param {string} purpose - Param which describes payment purpose. By default uses Available parameters [PURPOSE]{@link PURPOSE}
-   **/
+   */
   var Configuration = /*#__PURE__*/function () {
     function Configuration() {
       var gatewayID = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'default';
@@ -1199,8 +1199,8 @@
         predefined_fields: {
           gateway_id: gatewayID,
           type: paymentType,
-          gift_card_scheme: null,
-          processing_network: null
+          card_scheme: null,
+          card_processing_network: null
         }
       };
     }
@@ -1376,8 +1376,8 @@
       value: function setGiftCardSchemeData(giftCardScheme, processingNetwork) {
         if (this.configs.predefined_fields.type !== PAYMENT_TYPE.GIFT_CARD) throw new Error('unsupported payment type');
         if (!giftCardScheme || !processingNetwork) throw new Error('');
-        this.configs.predefined_fields.gift_card_scheme = giftCardScheme;
-        this.configs.predefined_fields.processing_network = processingNetwork;
+        this.configs.predefined_fields.card_scheme = giftCardScheme;
+        this.configs.predefined_fields.card_processing_network = processingNetwork;
       }
     }], [{
       key: "createEachToken",
@@ -1616,7 +1616,7 @@
    *      Configuration('gatewayId'),
    *      Configuration('gatewayId', 'bank_account')
    * ]);
-   **/
+   */
   var MultiWidget = /*#__PURE__*/function () {
     function MultiWidget(accessToken, conf) {
       _classCallCheck(this, MultiWidget);
@@ -2513,7 +2513,7 @@
    *      Configuration('gatewayId'),
    *      Configuration('gatewayId', 'bank_account')
    * ]);
-   **/
+   */
   var HtmlMultiWidget = /*#__PURE__*/function (_MultiWidget) {
     _inherits(HtmlMultiWidget, _MultiWidget);
     var _super = _createSuper(HtmlMultiWidget);
@@ -2854,7 +2854,7 @@
    * @param {string} [gatewayID=default] - ID of a gateway connected to PayDock. By default or if put 'default', it will use the selected default gateway. If put 'not_configured', it won’t use gateway to create downstream token.
    * @param {string} [paymentType=card] - Type of payment source which shows in widget form. Available parameters : “card”, “bank_account”.
    * @param {string} [purpose=payment_source] - Purpose of widget form. Available parameters: ‘payment_source’, ‘card_payment_source_with_cvv’, ‘card_payment_source_without_cvv’
-   **/
+   */
   var HtmlWidget = /*#__PURE__*/function (_HtmlMultiWidget) {
     _inherits(HtmlWidget, _HtmlMultiWidget);
     var _super = _createSuper(HtmlWidget);
@@ -3337,13 +3337,13 @@
     FOCUS: 'focus'
   };
   var TEMPLATE$1 = "\n    <div class=\"checkout-container\">\n        <strong class=\"checkout-title\" data-title>{{title}}</strong>\n        <p data-description>{{description}}</p>\n        <a href=\"#\" data-continue>Continue</a>\n        <a href=\"#\" data-close>Close</a>\n    </div>\n";
-  var STYLES = "\n    .hide-continue-button [data-continue] {\n        display: none;\n    }\n    \n    .checkout-overlay .cs-loader-inner {\n         color: #ddd;\n    }\n\n    .checkout-overlay { \n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0,0,0, 0.5);\n        text-align: center;\n        color: #fff;\n        opacity: 0;\n    }\n    .checkout-overlay.display { \n        opacity: 1;\n        transition: opacity 0.7s ease-out;\n    }\n    .checkout-overlay a { color: #00f; }\n    .checkout-container {\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 100%;\n        margin-top: -{{width}}px;\n    }\n    .checkout-title {\n        font-size: 24px;\n        display: block;\n        text-transform: uppercase;\n    }\n    [data-close] {\n        position: fixed;\n        right: 32px;\n        top: 32px;\n        width: 32px;\n        height: 32px;\n        opacity: 0.3;\n        overflow: hidden;\n        text-indent: -9999px;\n    }\n    [data-close]:hover { opacity: 1; }\n    [data-close]:before, [data-close]:after {\n        position: absolute;\n        left: 15px;\n        content: ' ';\n        height: 33px;\n        width: 2px;\n        background-color: #00f;\n    }\n    [data-close]:before { transform: rotate(45deg); }\n    [data-close]:after { transform: rotate(-45deg); }\n";
+  var STYLES = "\n    .hide-continue-button [data-continue] {\n        display: none;\n    }\n\n    .checkout-overlay .cs-loader-inner {\n         color: #ddd;\n    }\n\n    .checkout-overlay {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background: rgba(0,0,0, 0.5);\n        text-align: center;\n        color: #fff;\n        opacity: 0;\n    }\n    .checkout-overlay.display {\n        opacity: 1;\n        transition: opacity 0.7s ease-out;\n    }\n    .checkout-overlay a { color: #00f; }\n    .checkout-container {\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 100%;\n        margin-top: -{{width}}px;\n    }\n    .checkout-title {\n        font-size: 24px;\n        display: block;\n        text-transform: uppercase;\n    }\n    [data-close] {\n        position: fixed;\n        right: 32px;\n        top: 32px;\n        width: 32px;\n        height: 32px;\n        opacity: 0.3;\n        overflow: hidden;\n        text-indent: -9999px;\n    }\n    [data-close]:hover { opacity: 1; }\n    [data-close]:before, [data-close]:after {\n        position: absolute;\n        left: 15px;\n        content: ' ';\n        height: 33px;\n        width: 2px;\n        background-color: #00f;\n    }\n    [data-close]:before { transform: rotate(45deg); }\n    [data-close]:after { transform: rotate(-45deg); }\n";
   /**
    * Class Background create overlay for checkout
    *
    * @example
    * var overlay = new Background();
-   **/
+   */
   var Background = /*#__PURE__*/function () {
     function Background() {
       _classCallCheck(this, Background);
@@ -6016,7 +6016,7 @@
    * @param {string} [type=PaypalClassic] - Type of gateway (PaypalClassic, Zipmoney)
    * @example
    * var widget = new CheckoutButton('#button', 'accessToken','gatewayId');
-   **/
+   */
   var CheckoutButton = /*#__PURE__*/function () {
     function CheckoutButton(selector, accessToken) {
       var gatewayId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'default';
@@ -6294,7 +6294,7 @@
    * @param {string} [gatewayId=default] - Checkout mode, it could be set to 'contextual' or 'redirect'. By default it 'contextual'
    * @example
    * var widget = new ZipmoneyCheckoutButton('#button', 'publicKey','gatewayId');
-   **/
+   */
   var ZipmoneyCheckoutButton = /*#__PURE__*/function (_CheckoutButton) {
     _inherits(ZipmoneyCheckoutButton, _CheckoutButton);
     var _super = _createSuper(ZipmoneyCheckoutButton);
@@ -6369,7 +6369,7 @@
    * @param {string} [gatewayId=default] - PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway
    * @example
    * var widget = new AfterpayCheckoutButton('#button', 'access-token','gatewayId');
-   **/
+   */
   var AfterpayCheckoutButton = /*#__PURE__*/function (_CheckoutButton) {
     _inherits(AfterpayCheckoutButton, _CheckoutButton);
     var _super = _createSuper(AfterpayCheckoutButton);
@@ -6426,7 +6426,7 @@
    * @param {string} [gatewayId=default] - PayDock's gatewayId. By default or if put 'default', it will use the selected default gateway
    * @example
    * var widget = new PaypalCheckoutButton('#button', 'publicKey','gatewayId');
-   **/
+   */
   var PaypalCheckoutButton = /*#__PURE__*/function (_CheckoutButton) {
     _inherits(PaypalCheckoutButton, _CheckoutButton);
     var _super = _createSuper(PaypalCheckoutButton);
@@ -6575,7 +6575,8 @@
     PAYMENT_SUCCESS: 'payment_success',
     PAYMENT_IN_REVIEW: 'payment_in_review',
     PAYMENT_ERROR: 'payment_error',
-    CALLBACK: 'callback'
+    CALLBACK: 'callback',
+    AUTH_TOKENS_CHANGED: 'auth_tokens_changed'
   };
   var WalletService = /*#__PURE__*/function () {
     function WalletService(publicKey, meta) {
@@ -8364,14 +8365,16 @@
       return [].concat(_toConsumableArray(str), ["".concat(key).concat(separator).concat(value)]);
     }, []).join(",") : "";
   }
+  // src/checkout.ts
   var Checkout = /*#__PURE__*/function () {
     function Checkout(_ref3) {
       var _this = this,
         _this$callback;
-      var url = _ref3.url,
-        accessToken = _ref3.accessToken,
-        refreshToken = _ref3.refreshToken,
+      var auth = _ref3.auth,
+        url = _ref3.url,
         clientId = _ref3.clientId,
+        mode = _ref3.mode,
         orderId = _ref3.orderId,
         onCheckoutClosed = _ref3.onCheckoutClosed,
         onError = _ref3.onError,
@@ -8386,6 +8389,7 @@
       _defineProperty(this, "DEFAULT_FEATURES", {
         resizable: "no"
       });
+      _defineProperty(this, "auth", void 0);
       _defineProperty(this, "callback", void 0);
       _defineProperty(this, "error", void 0);
       _defineProperty(this, "frame", void 0);
@@ -8397,7 +8401,8 @@
       _defineProperty(this, "refreshToken", void 0);
       _defineProperty(this, "clientId", void 0);
       _defineProperty(this, "onCheckoutClosed", void 0);
-      _defineProperty(this, "onTokensChanged", void 0);
+      _defineProperty(this, "rootUrl", void 0);
+      _defineProperty(this, "targetOrigin", void 0);
       _defineProperty(this, "title", void 0);
       _defineProperty(this, "windowFeatures", void 0);
       _defineProperty(this, "windowObserver", void 0);
@@ -8421,7 +8426,13 @@
           window.addEventListener("message", _this.onMessage, false);
         }
       });
-      var merchantURL = encodeURIComponent(window.location.href.replace(/\/$/, ""));
+      _defineProperty(this, "postMessage", function () {
+        if (!!_this.frame && !!_this.rootUrl) {
+          _this.frame.postMessage({
+            auth: _objectSpread2({}, _this.auth)
+          }, _this.rootUrl);
+        }
+      });
       this.callback = (_this$callback = {}, _defineProperty(_this$callback, "ERROR" /* ERROR */, function ERROR(_ref4) {
         var error = _ref4.error,
           orderId2 = _ref4.orderId;
@@ -8442,13 +8453,14 @@
           orderId: orderId2
         });
       }), _defineProperty(_this$callback, "TOKENS_CHANGED" /* TOKENS_CHANGED */, function TOKENS_CHANGED(_ref7) {
-        var accessToken2 = _ref7.accessToken,
-          refreshToken2 = _ref7.refreshToken;
+        var accessToken = _ref7.accessToken,
+          refreshToken = _ref7.refreshToken;
         onTokensChanged === null || onTokensChanged === void 0 || onTokensChanged({
-          accessToken: accessToken2,
-          refreshToken: refreshToken2
+          accessToken: accessToken,
+          refreshToken: refreshToken
         });
       }), _this$callback);
+      this.auth = auth;
       this.isCheckoutOpen = false;
       this.error = void 0;
       this.frame = void 0;
@@ -8456,6 +8468,9 @@
         var data = e.data,
           origin = e.origin;
         if (origin === url) {
+          if ((data === null || data === void 0 ? void 0 : data.isDomReady) === true) {
+            _this.postMessage();
+          }
           if (data !== null && data !== void 0 && data.isPaymentSuccessful) {
             _this.callback["PAYMENT_SUCCESS" /* PAYMENT_SUCCESS */]({
               orderId: data.orderId
@@ -8481,13 +8496,13 @@
           }
         }
       };
-      this.url = "".concat(url, "?orderId=").concat(orderId, "&merchant=").concat(merchantURL);
+      var checkoutMode = mode || "default" /* DEFAULT */;
+      this.rootUrl = url;
+      this.targetOrigin = window.location.href.replace(/\/$/, "");
+      this.url = "".concat(url, "?orderId=").concat(orderId, "&merchantUrl=").concat(encodeURIComponent(this.targetOrigin), "&mode=").concat(checkoutMode);
       this.orderId = orderId;
-      this.accessToken = accessToken;
-      this.refreshToken = refreshToken;
       this.clientId = clientId;
       this.onCheckoutClosed = onCheckoutClosed;
-      this.onTokensChanged = onTokensChanged;
       this.title = title;
       this.windowFeatures = windowFeatures;
       this.windowObserver = void 0;
@@ -8587,36 +8602,37 @@
           return _regeneratorRuntime().wrap(function _callee$(_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
-                loadingOverlay = document.getElementById("loading-overlay");
-                button = document.getElementById("flypay-v2-button");
+                loadingOverlay = document.getElementById('loading-overlay');
+                button = document.getElementById('flypay-v2-button');
                 if (button) button.disabled = true;
                 _context.prev = 3;
                 if (this.orderId) {
                   _context.next = 9;
                   break;
                 }
-                if (loadingOverlay) loadingOverlay.style.display = "flex";
+                if (loadingOverlay) loadingOverlay.style.display = 'flex';
                 _context.next = 8;
                 return this.getOrderId();
               case 8:
                 this.orderId = _context.sent;
               case 9:
-                if (loadingOverlay) loadingOverlay.style.display = "none";
+                if (loadingOverlay) loadingOverlay.style.display = 'none';
                 if (this.orderId) {
                   this.flypayV2Checkout(this.orderId);
                 } else {
                   this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE);
                 }
-                _context.next = 17;
+                _context.next = 18;
                 break;
               case 13:
                 _context.prev = 13;
                 _context.t0 = _context["catch"](3);
-                if (loadingOverlay) loadingOverlay.style.display = "none";
+                if (loadingOverlay) loadingOverlay.style.display = 'none';
+                if (button) button.disabled = false;
                 this.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, {
                   err: _context.t0
                 });
-              case 17:
+              case 18:
               case "end":
                 return _context.stop();
             }
@@ -8662,7 +8678,7 @@
     }, {
       key: "createButtonStyle",
       value: function createButtonStyle() {
-        return "\n      #widget {\n        position: relative;\n      }\n\n      #loading-overlay {\n        position: absolute;\n        width: 268px;\n        height: 74px;\n        background: rgba(255, 255, 255, 0.7);\n        display: none;\n        justify-content: center;\n        align-items: center;\n      }\n\n      #loading-overlay::after {\n        content: \"\";\n        display: inline-block;\n        width: 40px;\n        height: 40px;\n        border: 4px solid #ccc;\n        border-top-color: #333;\n        border-radius: 50%;\n\n        /* Vendor prefixes for animation property */\n        -webkit-animation: spin 1s infinite linear;\n        -moz-animation: spin 1s infinite linear;\n        -o-animation: spin 1s infinite linear;\n        animation: spin 1s infinite linear;\n      }\n\n      @-webkit-keyframes spin {\n        0% {\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -webkit-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @-moz-keyframes spin {\n        0% {\n          -moz-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -moz-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @-o-keyframes spin {\n        0% {\n          -o-transform: rotate(0deg);\n          transform: rotate(0deg);\n        }\n        100% {\n          -o-transform: rotate(360deg);\n          transform: rotate(360deg);\n        }\n      }\n\n      @keyframes spin {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      .flypay-v2-checkout-btn {\n          border: none; /* Remove borders */\n          background: transparent; /* Make the button background transparent */\n          cursor: pointer; /* Make it look clickable */\n          outline: none; /* Remove focus outline */\n          padding: 0; /* Remove any default padding */\n      }\n\n      .flypay-v2-image {\n          display: block; /* Display the image as block to remove any gaps */\n          border: none; /* Ensure the image doesn't have a border */\n          width: 100%; /* Make the image take full width of the container */\n      }\n    ";
+        return "\n\t\t\t#widget {\n\t\t\t\tposition: relative;\n\t\t\t}\n\n\t\t\t#loading-overlay {\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 268px;\n\t\t\t\theight: 74px;\n\t\t\t\tbackground: rgba(255, 255, 255, 0.7);\n\t\t\t\tdisplay: none;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t#loading-overlay::after {\n\t\t\t\tcontent: \"\";\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: 40px;\n\t\t\t\theight: 40px;\n\t\t\t\tborder: 4px solid #ccc;\n\t\t\t\tborder-top-color: #333;\n\t\t\t\tborder-radius: 50%;\n\n\t\t\t\t/* Vendor prefixes for animation property */\n\t\t\t\t-webkit-animation: spin 1s infinite linear;\n\t\t\t\t-moz-animation: spin 1s infinite linear;\n\t\t\t\t-o-animation: spin 1s infinite linear;\n\t\t\t\tanimation: spin 1s infinite linear;\n\t\t\t}\n\n\t\t\t@-webkit-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-webkit-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-webkit-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@-moz-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-moz-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-moz-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@-o-keyframes spin {\n\t\t\t\t0% {\n\t\t\t\t-o-transform: rotate(0deg);\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t-o-transform: rotate(360deg);\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t@keyframes spin {\n\t\t\t\t0% {\n\t\t\t\ttransform: rotate(0deg);\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\ttransform: rotate(360deg);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.flypay-v2-checkout-btn {\n\t\t\t\tborder: none; /* Remove borders */\n\t\t\t\tbackground: transparent; /* Make the button background transparent */\n\t\t\t\tcursor: pointer; /* Make it look clickable */\n\t\t\t\toutline: none; /* Remove focus outline */\n\t\t\t\tpadding: 0; /* Remove any default padding */\n\t\t\t}\n\n\t\t\t.flypay-v2-image {\n\t\t\t\tdisplay: block; /* Display the image as block to remove any gaps */\n\t\t\t\tborder: none; /* Ensure the image doesn't have a border */\n\t\t\t\twidth: 100%; /* Make the image take full width of the container */\n\t\t\t}\n\t\t";
       }
     }, {
       key: "getOrderId",
@@ -8671,7 +8687,7 @@
         return new Promise(function (resolve, reject) {
           return _this2.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
             data: {
-              request_type: "CREATE_SESSION"
+              request_type: 'CREATE_SESSION'
             },
             onSuccess: function onSuccess(res) {
               return resolve(res.id);
@@ -8686,17 +8702,21 @@
       key: "flypayV2Checkout",
       value: function flypayV2Checkout(orderId) {
         var _this3 = this;
-        this.checkout = new Checkout(_extends(_extends(_extends({
+        var _a, _b;
+        this.checkout = new Checkout(_extends(_extends({
           orderId: orderId
-        }, this.accessToken && {
-          accessToken: this.accessToken
-        }), this.refreshToken && {
-          refreshToken: this.refreshToken
+        }, (this.accessToken || this.refreshToken) && {
+          auth: _extends(_extends({}, this.accessToken && {
+            access_token: this.accessToken
+          }), this.refreshToken && {
+            refresh_token: this.refreshToken
+          }),
+          mode: "express"
         }), {
-          clientId: '633727af-5bd2-4733-8e08-04074a98300d',
-          url: 'https://checkout.release.cxbflypay.com.au',
+          clientId: ((_a = this.meta) === null || _a === void 0 ? void 0 : _a.gateway_mode) === 'live' ? 'dbbd114e-3583-4db5-915e-59f1b3dcd08b' : '924ac1ce-00f4-44e4-8277-06cae751ef1a',
+          url: ((_b = this.meta) === null || _b === void 0 ? void 0 : _b.gateway_mode) === 'live' ? 'https://checkout.beem.com.au' : 'https://release.checkout.beem.com.au',
           onCheckoutClosed: function onCheckoutClosed() {
-            var button = document.getElementById("flypay-v2-button");
+            var button = document.getElementById('flypay-v2-button');
             if (button) button.disabled = false;
           },
           onError: function onError(err) {
@@ -8717,6 +8737,10 @@
               refreshToken = _ref.refreshToken;
             _this3.accessToken = accessToken;
             _this3.refreshToken = refreshToken;
+            _this3.eventEmitter.emit(WALLET_EVENT.AUTH_TOKENS_CHANGED, {
+              accessToken: accessToken,
+              refreshToken: refreshToken
+            });
           }
         }));
         this.checkout.open();
@@ -8741,7 +8765,8 @@
     UPDATE: "update",
     PAYMENT_SUCCESSFUL: "paymentSuccessful",
     PAYMENT_ERROR: "paymentError",
-    PAYMENT_IN_REVIEW: "paymentInReview"
+    PAYMENT_IN_REVIEW: "paymentInReview",
+    AUTH_TOKENS_CHANGED: "authTokensChanged"
   };
   /**
    * Interface of data used by the wallet checkout and payment proccess.
@@ -8756,6 +8781,8 @@
    * @param {boolean} [request_payer_name] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
    * @param {boolean} [request_payer_email] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
    * @param {boolean} [request_payer_phone] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
+   * @param {string} [access_token] Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets.
+   * @param {string} [refresh_token] Used for Flypay V2 express flow. Optional for [Flypay V2]. N/A for other wallets.
    * @param {boolean} [request_shipping] Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay, GooglePay]. N/A for [Flypay V2, Stripe, Afterpay].
    * @param {IApplePayShippingOption[] | IPayPalShippingOption[]} [shipping_options] Used to provide available shipping options.(To use shipping_options the request_shipping flag should be true). Optional for [ApplePay]. N/A for the other wallets.
    * @param {string} [merchant_name] Merchant Name used for GooglePay integration via MPGS. Required for [GooglePay]. N/A for other wallets.
@@ -8810,8 +8837,8 @@
    *
    * @param {string} selector - Selector of html element. Container for the WalletButtons.
    * @param {string} chargeToken - token for the wallet transaction, created with a secure call to `POST charges/wallet`.
-   * @param {IWalletMeta} object - data that configures the E-Wallet, which can be shown on checkout page and configures required customer information.
-   **/
+   * @param {IWalletMeta} meta - data that configures the E-Wallet, which can be shown on checkout page and configures required customer information.
+   */
   var WalletButtons = /*#__PURE__*/function () {
     function WalletButtons(selector, chargeToken, meta) {
       _classCallCheck(this, WalletButtons);
@@ -9151,6 +9178,33 @@
           });
         });
       }
+      /**
+       * Registers a callback function to be invoked when authentication tokens are changed.
+       * This function allows you to respond to changes in authentication tokens, such as when a user logs in.
+       *
+       * @example
+       * button.onAuthTokensChanged((eventData) => {
+       *     console.log('Authentication tokens changed:', eventData);
+       * });
+       *
+       * @example
+       * button.onAuthTokensChanged().then((eventData) => {
+       *     console.log('Authentication tokens changed:', eventData);
+       * });
+       *
+       * @param {listener} [handler] - Function to be called when authentication tokens are changed.
+       */
+    }, {
+      key: "onAuthTokensChanged",
+      value: function onAuthTokensChanged(handler) {
+        var _this7 = this;
+        if (typeof handler === 'function') return this.eventEmitter.subscribe(EVENT$1.AUTH_TOKENS_CHANGED, handler);
+        return new Promise(function (resolve) {
+          return _this7.eventEmitter.subscribe(EVENT$1.AUTH_TOKENS_CHANGED, function (err) {
+            return resolve(err);
+          });
+        });
+      }
     }, {
       key: "setupServiceCallbacks",
       value: function setupServiceCallbacks() {
@@ -9161,13 +9215,14 @@
         this.setupPaymentSuccessCallback();
         this.setupPaymentInReviewCallback();
         this.setupPaymentErrorCallback();
+        this.setupAuthTokensChangedCallback();
       }
     }, {
       key: "setupUnavailableCallback",
       value: function setupUnavailableCallback() {
-        var _this7 = this;
+        var _this8 = this;
         this.service.on(WALLET_EVENT.UNAVAILABLE, function (eventData) {
-          return _this7.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
+          return _this8.eventEmitter.emit(EVENT$1.UNAVAILABLE, {
             event: EVENT$1.UNAVAILABLE,
             data: eventData
           });
@@ -9176,12 +9231,12 @@
     }, {
       key: "setupUpdateCallback",
       value: function setupUpdateCallback() {
-        var _this8 = this;
+        var _this9 = this;
         this.service.on(WALLET_EVENT.UPDATE, function (eventData) {
-          return _this8.hasUpdateHandler ? _this8.eventEmitter.emit(EVENT$1.UPDATE, {
+          return _this9.hasUpdateHandler ? _this9.eventEmitter.emit(EVENT$1.UPDATE, {
             event: EVENT$1.UPDATE,
             data: eventData
-          }) : _this8.update({
+          }) : _this9.update({
             success: true
           });
         });
@@ -9189,12 +9244,12 @@
     }, {
       key: "setupWalletCallback",
       value: function setupWalletCallback() {
-        var _this9 = this;
+        var _this10 = this;
         this.service.on(WALLET_EVENT.CALLBACK, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this9.api.charge().walletCallback(data).then(function (res) {
+          _this10.api.charge().walletCallback(data).then(function (res) {
             return onSuccess(res);
           }, function (err) {
             return onError(err.message);
@@ -9204,15 +9259,15 @@
     }, {
       key: "setupPaymentCallback",
       value: function setupPaymentCallback() {
-        var _this10 = this;
+        var _this11 = this;
         this.service.on(WALLET_EVENT.PAYMENT_METHOD_SELECTED, function (eventData) {
           var data = eventData.data,
             onSuccess = eventData.onSuccess,
             onError = eventData.onError;
-          _this10.api.charge().walletCapture(data).then(function (captureResult) {
+          _this11.api.charge().walletCapture(data).then(function (captureResult) {
             if (typeof onSuccess === 'function') onSuccess();
             var event = captureResult.status === 'inreview' ? EVENT$1.PAYMENT_IN_REVIEW : EVENT$1.PAYMENT_SUCCESSFUL;
-            _this10.eventEmitter.emit(event, {
+            _this11.eventEmitter.emit(event, {
               event: event,
               data: _extends(_extends({}, captureResult), data.customer && {
                 payer_name: data.customer.payer_name,
@@ -9222,7 +9277,7 @@
             });
           }, function (err) {
             if (typeof onError === 'function') onError(err);
-            _this10.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+            _this11.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
               event: EVENT$1.PAYMENT_ERROR,
               data: err
             });
@@ -9232,9 +9287,9 @@
     }, {
       key: "setupPaymentSuccessCallback",
       value: function setupPaymentSuccessCallback() {
-        var _this11 = this;
+        var _this12 = this;
         this.service.on(WALLET_EVENT.PAYMENT_SUCCESS, function (eventData) {
-          return _this11.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
+          return _this12.eventEmitter.emit(EVENT$1.PAYMENT_SUCCESSFUL, {
             event: EVENT$1.PAYMENT_SUCCESSFUL,
             data: eventData
           });
@@ -9243,9 +9298,9 @@
     }, {
       key: "setupPaymentInReviewCallback",
       value: function setupPaymentInReviewCallback() {
-        var _this12 = this;
+        var _this13 = this;
         this.service.on(WALLET_EVENT.PAYMENT_IN_REVIEW, function (eventData) {
-          return _this12.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
+          return _this13.eventEmitter.emit(EVENT$1.PAYMENT_IN_REVIEW, {
             event: EVENT$1.PAYMENT_IN_REVIEW,
             data: eventData
           });
@@ -9254,14 +9309,25 @@
     }, {
       key: "setupPaymentErrorCallback",
       value: function setupPaymentErrorCallback() {
-        var _this13 = this;
+        var _this14 = this;
         this.service.on(WALLET_EVENT.PAYMENT_ERROR, function (eventData) {
-          return _this13.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
+          return _this14.eventEmitter.emit(EVENT$1.PAYMENT_ERROR, {
             event: EVENT$1.PAYMENT_ERROR,
             data: eventData
           });
         });
       }
+    }, {
+      key: "setupAuthTokensChangedCallback",
+      value: function setupAuthTokensChangedCallback() {
+        var _this15 = this;
+        this.service.on(WALLET_EVENT.AUTH_TOKENS_CHANGED, function (eventData) {
+          return _this15.eventEmitter.emit(EVENT$1.AUTH_TOKENS_CHANGED, {
+            event: EVENT$1.AUTH_TOKENS_CHANGED,
+            data: eventData
+          });
+        });
+      }
     }]);
     return WalletButtons;
   }();
@@ -9279,7 +9345,7 @@
    * var widget = new PaymentSourceWidget('publicKey','customerId');
    * // or
    * var widget = new PaymentSourceWidget('publicKey', customerReference, true);
-   **/
+   */
   var PaymentSourceWidget = /*#__PURE__*/function () {
     function PaymentSourceWidget(accessToken, queryToken) {
       _classCallCheck(this, PaymentSourceWidget);
@@ -9530,7 +9596,7 @@
    * @example
    *  * var widget = new HtmlPaymentSourceWidget('#widget', 'publicKey','queryToken');
-   **/
+   */
   var HtmlPaymentSourceWidget = /*#__PURE__*/function (_PaymentSourceWidget) {
     _inherits(HtmlPaymentSourceWidget, _PaymentSourceWidget);
     var _super = _createSuper(HtmlPaymentSourceWidget);
@@ -9905,7 +9971,7 @@
    * var widget = new Canvas3ds('#widget', 'token');
    *
    *
-   **/
+   */
   var Canvas3ds = /*#__PURE__*/function () {
     function Canvas3ds(selector, token) {
       _classCallCheck(this, Canvas3ds);
@@ -10201,7 +10267,7 @@
    *
    * @param {string} selector - Selector of html element. Container for widget
    * @param {string} token - One time token
-   **/
+   */
   var VaultDisplayWidget = /*#__PURE__*/function () {
     function VaultDisplayWidget(selector, token) {
       _classCallCheck(this, VaultDisplayWidget);
@@ -10564,7 +10630,7 @@
    * @example
    * var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
    *
-   **/
+   */
   var SRC = /*#__PURE__*/function () {
     function SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta) {
       _classCallCheck(this, SRC);