@paydock/client-sdk 1.123.0-beta → 1.123.2-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 (9) hide show
  1. package/bundles/index.cjs +112 -83
  2. package/bundles/index.mjs +112 -83
  3. package/bundles/types/checkout/instructions/v1/instruction.fraud_service.show.d.ts +1 -0
  4. package/bundles/types/checkout/instructions/v1/instruction.fraud_service.show.d.ts.map +1 -1
  5. package/bundles/types/checkout/layout-widgets/payment-methods.d.ts +6 -4
  6. package/bundles/types/checkout/layout-widgets/payment-methods.d.ts.map +1 -1
  7. package/bundles/widget.umd.js +112 -83
  8. package/bundles/widget.umd.min.js +1 -1
  9. package/package.json +1 -1
package/bundles/index.cjs CHANGED
@@ -954,7 +954,7 @@ SDK.headerKeys = Object.freeze({
954
954
  version: 'x-sdk-version',
955
955
  type: 'x-sdk-type'
956
956
  });
957
- SDK._version = 'v1.123.0-beta';
957
+ SDK._version = 'v1.123.2-beta';
958
958
 
959
959
  /******************************************************************************
960
960
  Copyright (c) Microsoft Corporation.
@@ -17715,8 +17715,6 @@ var InstructionCardFormShow = /*#__PURE__*/function (_InstructionHandler) {
17715
17715
  }(InstructionHandler);
17716
17716
  InstructionCardFormShow = __decorate([Instruction('instruction.card_form.show')], InstructionCardFormShow);
17717
17717
 
17718
- var TEMPLATE = "\n<style>\n @import url('https://fonts.cdnfonts.com/css/segoe-ui-4');\n @import url('https://fonts.cdnfonts.com/css/droid-sans-2');\n @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');\n @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Fira+Sans&family=Oxygen&family=Roboto&family=Ubuntu&display=swap');\n \n /* RESET DEFAULT STYLES */\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video,\n input {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n ol,\n ul {\n list-style: none;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n /* MAIN STYLES */\n .wrap {\n padding: 10px;\n background-color: {{background_color}};\n }\n\n .widget-body {\n background-color: #fff;\n border: 1px solid {{border_color}};\n }\n\n .payment-source {\n cursor: pointer;\n padding: 1em 0.8em;\n display: flex;\n align-items: center;\n height: 70px;\n }\n\n .payment-source:not(:last-child) {\n border-bottom: 1px solid {{border_color}};\n }\n\n .payment-source__wrap {\n display: flex;\n align-items: center;\n font-family: {{font_family}};\n font-size: {{font_size}};\n color: {{text_color}}\n }\n\n .payment-source__radio {\n margin-right: 2em;\n width: 18px;\n min-width: 18px;\n height: 18px;\n border: 1px solid {{button_color}};\n border-radius: 50%;\n appearance: none;\n cursor: pointer;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source__radio::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n border-radius: 50%;\n }\n\n .payment-source__radio:checked::before {\n border: 4px solid {{button_color}};\n outline: 1px solid {{button_color}};\n }\n\n .payment-source__title {\n margin-right: 2em;\n font-weight: 400;\n line-height: 1.2;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n font-size: 14px;\n }\n }\n\n .payment-source__icon {\n margin-right: 2em;\n max-height: 35px;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source .card__scheme {\n margin-left: auto;\n display: flex;\n align-items: center;\n }\n\n .payment-source .card__scheme__item:not(:last-child) {\n margin-right: 10px;\n }\n\n .payment-source .card__scheme__img {\n max-width: 50px;\n\n @media screen and (max-width: 460px) {\n max-width: 40px;\n }\n\n @media screen and (max-width: 410px) {\n max-width: 30px;\n }\n }\n\n .payment-source__form {\n margin-top: 1em;\n margin-bottom: 1em;\n margin-left: calc(2em + 18px);\n\n @media screen and (max-width: 380px) {\n margin-left: calc(1em + 18px);\n }\n }\n\n .payment-source__form .form-group:not(:last-child) {\n margin-bottom: 1.5em;\n }\n\n .payment-source__form .form-control {\n padding: 10px 2px 10px 10px;\n height: 40px;\n background: #F9F9F9;\n border: 1px solid {{border_color}};\n }\n\n .payment-source__form .form-control:not(:last-child) {\n margin-right: 1.5em;\n }\n\n .payment-source__form .form-control.col-12 {\n width: calc(100% - 1.5em);\n }\n\n .payment-source__form .form-control.col-3 {\n width: calc(33.33% - 1.5em);\n }\n\n .footer__pay-btn {\n margin-left: auto;\n padding: 10px 2em;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F6F0EB;\n font-size: 16px;\n background-color: {{button_color}};\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.10);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .footer__pay-btn--paypal {\n padding: 5px 2em;\n background-color: #FFC43A;\n }\n\n .footer__pay-btn--gpay {\n font-size: 22px;\n }\n\n .footer__pay-btn--gpay img {\n margin-left: 5px;\n }\n\n .footer__pay-btn img {\n max-height: 100%;\n }\n</style>\n<main class=\"wrap\">\n <div class=\"widget-body\">\n <ul class=\"payment-sources__list\">\n {{paymentMethods}}\n </ul>\n </div>\n</main>\n</div>\n";
17719
-
17720
17718
  var PAYMENT_METHOD = {
17721
17719
  card: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"card\" type=\"radio\" name=\"radio-group\" />\n <h2 class=\"payment-source__title\">Pay with Credit or Debit card</h2>\n </div>\n </li>\n </label>",
17722
17720
  bank_account: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"bank_account\" type=\"radio\" name=\"radio-group\" />\n <h2 class=\"payment-source__title\">Pay Bank Account</h2>\n </div>\n </li>\n </label>",
@@ -17729,11 +17727,13 @@ var PAYMENT_METHOD = {
17729
17727
  afterpay_checkout: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"afterpay_checkout\" type=\"radio\" name=\"radio-group\">\n ".concat(getIcon(paymentMethods.AFTERPAY), "\n </div>\n </li>\n </label>")
17730
17728
  };
17731
17729
 
17730
+ var TEMPLATE = "\n<style>\n @import url('https://fonts.cdnfonts.com/css/segoe-ui-4');\n @import url('https://fonts.cdnfonts.com/css/droid-sans-2');\n @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');\n @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Fira+Sans&family=Oxygen&family=Roboto&family=Ubuntu&display=swap');\n \n /* RESET DEFAULT STYLES */\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video,\n input {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n ol,\n ul {\n list-style: none;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n /* MAIN STYLES */\n .wrap {\n padding: 10px;\n background-color: {{background_color}};\n }\n\n .widget-body {\n background-color: #fff;\n border: 1px solid {{border_color}};\n }\n\n .payment-source {\n cursor: pointer;\n padding: 1em 0.8em;\n display: flex;\n align-items: center;\n height: 70px;\n }\n\n .payment-source:not(:last-child) {\n border-bottom: 1px solid {{border_color}};\n }\n\n .payment-source__wrap {\n display: flex;\n align-items: center;\n font-family: {{font_family}};\n font-size: {{font_size}};\n color: {{text_color}}\n }\n\n .payment-source__radio {\n margin-right: 2em;\n width: 18px;\n min-width: 18px;\n height: 18px;\n border: 1px solid {{button_color}};\n border-radius: 50%;\n appearance: none;\n cursor: pointer;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source__radio::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n border-radius: 50%;\n }\n\n .payment-source__radio:checked::before {\n border: 4px solid {{button_color}};\n outline: 1px solid {{button_color}};\n }\n\n .payment-source__title {\n margin-right: 2em;\n font-weight: 400;\n line-height: 1.2;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n font-size: 14px;\n }\n }\n\n .payment-source__icon {\n margin-right: 2em;\n max-height: 35px;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source .card__scheme {\n margin-left: auto;\n display: flex;\n align-items: center;\n }\n\n .payment-source .card__scheme__item:not(:last-child) {\n margin-right: 10px;\n }\n\n .payment-source .card__scheme__img {\n max-width: 50px;\n\n @media screen and (max-width: 460px) {\n max-width: 40px;\n }\n\n @media screen and (max-width: 410px) {\n max-width: 30px;\n }\n }\n\n .payment-source__form {\n margin-top: 1em;\n margin-bottom: 1em;\n margin-left: calc(2em + 18px);\n\n @media screen and (max-width: 380px) {\n margin-left: calc(1em + 18px);\n }\n }\n\n .payment-source__form .form-group:not(:last-child) {\n margin-bottom: 1.5em;\n }\n\n .payment-source__form .form-control {\n padding: 10px 2px 10px 10px;\n height: 40px;\n background: #F9F9F9;\n border: 1px solid {{border_color}};\n }\n\n .payment-source__form .form-control:not(:last-child) {\n margin-right: 1.5em;\n }\n\n .payment-source__form .form-control.col-12 {\n width: calc(100% - 1.5em);\n }\n\n .payment-source__form .form-control.col-3 {\n width: calc(33.33% - 1.5em);\n }\n\n .footer__pay-btn {\n margin-left: auto;\n padding: 10px 2em;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F6F0EB;\n font-size: 16px;\n background-color: {{button_color}};\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.10);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .footer__pay-btn--paypal {\n padding: 5px 2em;\n background-color: #FFC43A;\n }\n\n .footer__pay-btn--gpay {\n font-size: 22px;\n }\n\n .footer__pay-btn--gpay img {\n margin-left: 5px;\n }\n\n .footer__pay-btn img {\n max-height: 100%;\n }\n</style>\n<main class=\"wrap\">\n <div class=\"widget-body\">\n <ul class=\"payment-sources__list\">\n {{paymentMethods}}\n </ul>\n </div>\n</main>\n</div>\n";
17731
+
17732
17732
  var PAYMENTS_METHODS = {
17733
- APPLE_PAY: "applepay_wallet",
17734
- GOOGLE_PAY: "googlepay_wallet"
17733
+ APPLE_PAY: 'applepay_wallet',
17734
+ GOOGLE_PAY: 'googlepay_wallet'
17735
17735
  };
17736
- var PAYMENT_METHOD_ORDER = ["card", "afterpay_checkout", "applepay_wallet", "googlepay_wallet", "paypal_wallet", "zip_checkout"];
17736
+ var PAYMENT_METHOD_ORDER = ['card', 'afterpay_checkout', 'applepay_wallet', 'googlepay_wallet', 'paypal_wallet', 'zip_checkout'];
17737
17737
  var PaymentMethods = /*#__PURE__*/function () {
17738
17738
  function PaymentMethods(selector, methods, styles, chosen, instruction_token) {
17739
17739
  var skip = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
@@ -17757,51 +17757,24 @@ var PaymentMethods = /*#__PURE__*/function () {
17757
17757
  var _this = this;
17758
17758
  this.setPaymentMethodsOrder();
17759
17759
  this.setStylesToStandaloneWidget();
17760
- var initState = new Promise(function (resolve, reject) {
17761
- return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
17762
- var paymentMethodsAllowed, _iterator, _step, method;
17763
- return _regeneratorRuntime().wrap(function _callee$(_context) {
17764
- while (1) switch (_context.prev = _context.next) {
17765
- case 0:
17766
- paymentMethodsAllowed = [];
17767
- _iterator = _createForOfIteratorHelper(this.methods);
17768
- _context.prev = 2;
17769
- _iterator.s();
17770
- case 4:
17771
- if ((_step = _iterator.n()).done) {
17772
- _context.next = 11;
17773
- break;
17774
- }
17775
- method = _step.value;
17776
- if (!(method === PAYMENTS_METHODS.APPLE_PAY && !this.isApplePaySupported())) {
17777
- _context.next = 8;
17778
- break;
17779
- }
17780
- return _context.abrupt("continue", 9);
17781
- case 8:
17782
- paymentMethodsAllowed.push(PAYMENT_METHOD[method]);
17783
- case 9:
17784
- _context.next = 4;
17785
- break;
17786
- case 11:
17787
- _context.next = 16;
17788
- break;
17789
- case 13:
17790
- _context.prev = 13;
17791
- _context.t0 = _context["catch"](2);
17792
- _iterator.e(_context.t0);
17793
- case 16:
17794
- _context.prev = 16;
17795
- _iterator.f();
17796
- return _context.finish(16);
17797
- case 19:
17798
- resolve(paymentMethodsAllowed.join(' '));
17799
- case 20:
17800
- case "end":
17801
- return _context.stop();
17760
+ var initState = new Promise(function (resolve, _reject) {
17761
+ var paymentMethodsAllowed = [];
17762
+ var _iterator = _createForOfIteratorHelper(_this.methods),
17763
+ _step;
17764
+ try {
17765
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
17766
+ var method = _step.value;
17767
+ if (method === PAYMENTS_METHODS.APPLE_PAY && !_this.isApplePaySupported()) {
17768
+ continue;
17802
17769
  }
17803
- }, _callee, this, [[2, 13, 16, 19]]);
17804
- }));
17770
+ paymentMethodsAllowed.push(PAYMENT_METHOD[method]);
17771
+ }
17772
+ } catch (err) {
17773
+ _iterator.e(err);
17774
+ } finally {
17775
+ _iterator.f();
17776
+ }
17777
+ resolve(paymentMethodsAllowed.join(' '));
17805
17778
  });
17806
17779
  initState.then(function (content) {
17807
17780
  var template = _this.setStyles(content);
@@ -17813,7 +17786,7 @@ var PaymentMethods = /*#__PURE__*/function () {
17813
17786
  _this.setListenerButtons(iframeDocument);
17814
17787
  _this.iFrame.setIframeHeight(iframeElement, iframeDocument, '.wrap');
17815
17788
  } else {
17816
- _this.iFrame.getElement().addEventListener("load", function (event) {
17789
+ _this.iFrame.getElement().addEventListener('load', function (event) {
17817
17790
  _this.setListenerButtons(iframeDocument);
17818
17791
  _this.iFrame.setIframeHeight(iframeElement, iframeDocument, '.wrap');
17819
17792
  });
@@ -17824,26 +17797,37 @@ var PaymentMethods = /*#__PURE__*/function () {
17824
17797
  key: "setListenerButtons",
17825
17798
  value: function setListenerButtons(iframeDocument) {
17826
17799
  var _this2 = this;
17827
- var selectedPaymentMethod = "";
17800
+ var selectedPaymentMethod = '';
17828
17801
  Spinner.hide();
17829
17802
  var buttons = iframeDocument.querySelectorAll('[pm-button]');
17830
- buttons.forEach(function (button) {
17831
- button.addEventListener('click', function (event) {
17832
- var clickedButton = event.target;
17833
- var customAttributeValue = clickedButton.getAttribute('pm-button');
17834
- if (selectedPaymentMethod !== customAttributeValue && !_this2.disablePaymentMethodOptions) {
17835
- _this2.chosen(customAttributeValue);
17836
- selectedPaymentMethod = customAttributeValue;
17837
- Spinner.show();
17838
- }
17839
- });
17840
- });
17803
+ var _iterator2 = _createForOfIteratorHelper(buttons),
17804
+ _step2;
17805
+ try {
17806
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
17807
+ var button = _step2.value;
17808
+ button.addEventListener('click', function (event) {
17809
+ var clickedButton = event.target;
17810
+ var customAttributeValue = clickedButton.getAttribute('pm-button');
17811
+ if (selectedPaymentMethod !== customAttributeValue && !_this2.disablePaymentMethodOptions) {
17812
+ _this2.chosen(customAttributeValue);
17813
+ selectedPaymentMethod = customAttributeValue;
17814
+ Spinner.show();
17815
+ }
17816
+ });
17817
+ }
17818
+ } catch (err) {
17819
+ _iterator2.e(err);
17820
+ } finally {
17821
+ _iterator2.f();
17822
+ }
17841
17823
  }
17842
17824
  }, {
17843
17825
  key: "setEnv",
17844
17826
  value: function setEnv(instruction_token) {
17845
17827
  var tokenContent = AccessToken.validateJWT(instruction_token);
17846
- if (!tokenContent) throw new Error("Invalid instruction token.");
17828
+ if (!tokenContent) {
17829
+ throw new Error('Invalid instruction token.');
17830
+ }
17847
17831
  return AccessToken.extractEnv(tokenContent.body);
17848
17832
  }
17849
17833
  }, {
@@ -17852,7 +17836,9 @@ var PaymentMethods = /*#__PURE__*/function () {
17852
17836
  var _a, _b, _c, _d, _e, _f;
17853
17837
  var template = TEMPLATE.replace('{{paymentMethods}}', content);
17854
17838
  var listElement = document === null || document === void 0 ? void 0 : document.querySelector(SELECTORS.LIST);
17855
- if (listElement) listElement.style.backgroundColor = this.styles.background_color || DEFAULT_VARIABLES.BG_COLOR;
17839
+ if (listElement) {
17840
+ listElement.style.backgroundColor = this.styles.background_color || DEFAULT_VARIABLES.BG_COLOR;
17841
+ }
17856
17842
  template = ((_a = this.styles) === null || _a === void 0 ? void 0 : _a.button_color) ? template.replace(/{{button_color}}/g, this.styles.button_color) : template.replace(/{{button_color}}/g, DEFAULT_VARIABLES.BTN_COLOR);
17857
17843
  template = ((_b = this.styles) === null || _b === void 0 ? void 0 : _b.border_color) ? template.replace(/{{border_color}}/g, this.styles.border_color) : template.replace(/{{border_color}}/g, DEFAULT_VARIABLES.BORDER_COLOR);
17858
17844
  template = ((_c = this.styles) === null || _c === void 0 ? void 0 : _c.background_color) ? template.replace(/{{background_color}}/g, this.styles.background_color) : template.replace(/{{background_color}}/g, DEFAULT_VARIABLES.BG_COLOR);
@@ -17876,7 +17862,9 @@ var PaymentMethods = /*#__PURE__*/function () {
17876
17862
  key: "setPaymentMethodsOrder",
17877
17863
  value: function setPaymentMethodsOrder() {
17878
17864
  var _a;
17879
- if (!((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length)) return this.methods;
17865
+ if (!((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length)) {
17866
+ return this.methods;
17867
+ }
17880
17868
  this.methods.sort(function (a, b) {
17881
17869
  return PAYMENT_METHOD_ORDER.indexOf(a) - PAYMENT_METHOD_ORDER.indexOf(b);
17882
17870
  });
@@ -17889,25 +17877,62 @@ var PaymentMethods = /*#__PURE__*/function () {
17889
17877
  var iframe = document === null || document === void 0 ? void 0 : document.querySelector("".concat(SELECTORS.LIST, " iframe"));
17890
17878
  var iframeDocument = iframe.contentDocument || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
17891
17879
  if (iframeDocument) {
17892
- var radiosButtons = iframeDocument.querySelectorAll('input[type="radio"].payment-source__radio');
17893
- var labels = iframeDocument.querySelectorAll('.payment-source');
17894
- labels.forEach(function (label) {
17895
- label.style.cursor = "not-allowed";
17896
- });
17897
- radiosButtons.forEach(function (radioButton) {
17898
- var labels = iframeDocument.querySelectorAll('.payment-source');
17899
- labels.forEach(function (label) {
17900
- label.style.cursor = "not-allowed";
17901
- });
17902
- radioButton.style.cursor = "not-allowed";
17903
- if (!radioButton.checked) {
17904
- radioButton.style.border = "9px solid #EBEBE4";
17880
+ var labels = this.queryAllPaymentSource(iframeDocument);
17881
+ var _iterator3 = _createForOfIteratorHelper(labels),
17882
+ _step3;
17883
+ try {
17884
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
17885
+ var label = _step3.value;
17886
+ label.style.cursor = 'not-allowed';
17905
17887
  }
17906
- radioButton.disabled = true;
17907
- radioButton.classList.add("disabled");
17908
- });
17888
+ } catch (err) {
17889
+ _iterator3.e(err);
17890
+ } finally {
17891
+ _iterator3.f();
17892
+ }
17893
+ var radiosButtons = this.queryAllPaymentSourceRadioButtons(iframeDocument);
17894
+ var _iterator4 = _createForOfIteratorHelper(radiosButtons),
17895
+ _step4;
17896
+ try {
17897
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
17898
+ var radioButton = _step4.value;
17899
+ var _labels = this.queryAllPaymentSource(iframeDocument);
17900
+ var _iterator5 = _createForOfIteratorHelper(_labels),
17901
+ _step5;
17902
+ try {
17903
+ for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
17904
+ var _label = _step5.value;
17905
+ _label.style.cursor = 'not-allowed';
17906
+ }
17907
+ } catch (err) {
17908
+ _iterator5.e(err);
17909
+ } finally {
17910
+ _iterator5.f();
17911
+ }
17912
+ radioButton.style.cursor = 'not-allowed';
17913
+ if (!radioButton.checked) {
17914
+ radioButton.style.border = '9px solid #EBEBE4';
17915
+ }
17916
+ radioButton.disabled = true;
17917
+ radioButton.classList.add('disabled');
17918
+ }
17919
+ } catch (err) {
17920
+ _iterator4.e(err);
17921
+ } finally {
17922
+ _iterator4.f();
17923
+ }
17909
17924
  }
17910
17925
  }
17926
+ }, {
17927
+ key: "queryAllPaymentSource",
17928
+ value: function queryAllPaymentSource(iframeDocument) {
17929
+ return iframeDocument.querySelectorAll('.payment-source');
17930
+ }
17931
+ }, {
17932
+ key: "queryAllPaymentSourceRadioButtons",
17933
+ value: function queryAllPaymentSourceRadioButtons(iframeDocument) {
17934
+ return iframeDocument.querySelectorAll('input[type="radio"].payment-source__radio');
17935
+ }
17911
17936
  }]);
17912
17937
  }();
17913
17938
 
@@ -17948,6 +17973,7 @@ var InstructionFraudServiceShow = /*#__PURE__*/function (_InstructionHandler) {
17948
17973
  key: "handle",
17949
17974
  value: function handle(context) {
17950
17975
  var _this = this;
17976
+ var _a;
17951
17977
  document.addEventListener(FRAUD_PREVENTION_EVENTS.NAMESPACE, function (event) {
17952
17978
  switch (event.detail.type) {
17953
17979
  case FRAUD_PREVENTION_EVENTS.TYPES.FINTERPRINT_TOKEN_READY:
@@ -17996,11 +18022,14 @@ var InstructionFraudServiceShow = /*#__PURE__*/function (_InstructionHandler) {
17996
18022
  providerId: context.payload.gateway_id,
17997
18023
  csp: false
17998
18024
  });
18025
+ if (context.next_instruction) {
18026
+ (_a = this.checkoutWidget) === null || _a === void 0 ? void 0 : _a.fetchInstruction();
18027
+ }
17999
18028
  }
18000
18029
  }, {
18001
18030
  key: "destroy",
18002
18031
  value: function destroy() {
18003
- document.querySelector(this.formSelector).innerHTML = '';
18032
+ // document.querySelector(this.formSelector).innerHTML = '';
18004
18033
  }
18005
18034
  }]);
18006
18035
  }(InstructionHandler);
package/bundles/index.mjs CHANGED
@@ -952,7 +952,7 @@ SDK.headerKeys = Object.freeze({
952
952
  version: 'x-sdk-version',
953
953
  type: 'x-sdk-type'
954
954
  });
955
- SDK._version = 'v1.123.0-beta';
955
+ SDK._version = 'v1.123.2-beta';
956
956
 
957
957
  /******************************************************************************
958
958
  Copyright (c) Microsoft Corporation.
@@ -17713,8 +17713,6 @@ var InstructionCardFormShow = /*#__PURE__*/function (_InstructionHandler) {
17713
17713
  }(InstructionHandler);
17714
17714
  InstructionCardFormShow = __decorate([Instruction('instruction.card_form.show')], InstructionCardFormShow);
17715
17715
 
17716
- var TEMPLATE = "\n<style>\n @import url('https://fonts.cdnfonts.com/css/segoe-ui-4');\n @import url('https://fonts.cdnfonts.com/css/droid-sans-2');\n @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');\n @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Fira+Sans&family=Oxygen&family=Roboto&family=Ubuntu&display=swap');\n \n /* RESET DEFAULT STYLES */\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video,\n input {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n ol,\n ul {\n list-style: none;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n /* MAIN STYLES */\n .wrap {\n padding: 10px;\n background-color: {{background_color}};\n }\n\n .widget-body {\n background-color: #fff;\n border: 1px solid {{border_color}};\n }\n\n .payment-source {\n cursor: pointer;\n padding: 1em 0.8em;\n display: flex;\n align-items: center;\n height: 70px;\n }\n\n .payment-source:not(:last-child) {\n border-bottom: 1px solid {{border_color}};\n }\n\n .payment-source__wrap {\n display: flex;\n align-items: center;\n font-family: {{font_family}};\n font-size: {{font_size}};\n color: {{text_color}}\n }\n\n .payment-source__radio {\n margin-right: 2em;\n width: 18px;\n min-width: 18px;\n height: 18px;\n border: 1px solid {{button_color}};\n border-radius: 50%;\n appearance: none;\n cursor: pointer;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source__radio::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n border-radius: 50%;\n }\n\n .payment-source__radio:checked::before {\n border: 4px solid {{button_color}};\n outline: 1px solid {{button_color}};\n }\n\n .payment-source__title {\n margin-right: 2em;\n font-weight: 400;\n line-height: 1.2;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n font-size: 14px;\n }\n }\n\n .payment-source__icon {\n margin-right: 2em;\n max-height: 35px;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source .card__scheme {\n margin-left: auto;\n display: flex;\n align-items: center;\n }\n\n .payment-source .card__scheme__item:not(:last-child) {\n margin-right: 10px;\n }\n\n .payment-source .card__scheme__img {\n max-width: 50px;\n\n @media screen and (max-width: 460px) {\n max-width: 40px;\n }\n\n @media screen and (max-width: 410px) {\n max-width: 30px;\n }\n }\n\n .payment-source__form {\n margin-top: 1em;\n margin-bottom: 1em;\n margin-left: calc(2em + 18px);\n\n @media screen and (max-width: 380px) {\n margin-left: calc(1em + 18px);\n }\n }\n\n .payment-source__form .form-group:not(:last-child) {\n margin-bottom: 1.5em;\n }\n\n .payment-source__form .form-control {\n padding: 10px 2px 10px 10px;\n height: 40px;\n background: #F9F9F9;\n border: 1px solid {{border_color}};\n }\n\n .payment-source__form .form-control:not(:last-child) {\n margin-right: 1.5em;\n }\n\n .payment-source__form .form-control.col-12 {\n width: calc(100% - 1.5em);\n }\n\n .payment-source__form .form-control.col-3 {\n width: calc(33.33% - 1.5em);\n }\n\n .footer__pay-btn {\n margin-left: auto;\n padding: 10px 2em;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F6F0EB;\n font-size: 16px;\n background-color: {{button_color}};\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.10);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .footer__pay-btn--paypal {\n padding: 5px 2em;\n background-color: #FFC43A;\n }\n\n .footer__pay-btn--gpay {\n font-size: 22px;\n }\n\n .footer__pay-btn--gpay img {\n margin-left: 5px;\n }\n\n .footer__pay-btn img {\n max-height: 100%;\n }\n</style>\n<main class=\"wrap\">\n <div class=\"widget-body\">\n <ul class=\"payment-sources__list\">\n {{paymentMethods}}\n </ul>\n </div>\n</main>\n</div>\n";
17717
-
17718
17716
  var PAYMENT_METHOD = {
17719
17717
  card: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"card\" type=\"radio\" name=\"radio-group\" />\n <h2 class=\"payment-source__title\">Pay with Credit or Debit card</h2>\n </div>\n </li>\n </label>",
17720
17718
  bank_account: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"bank_account\" type=\"radio\" name=\"radio-group\" />\n <h2 class=\"payment-source__title\">Pay Bank Account</h2>\n </div>\n </li>\n </label>",
@@ -17727,11 +17725,13 @@ var PAYMENT_METHOD = {
17727
17725
  afterpay_checkout: "<label class=\"payment-source\">\n <li class=\"payment-source\">\n <div class=\"payment-source__wrap\">\n <input class=\"payment-source__radio\" pm-button=\"afterpay_checkout\" type=\"radio\" name=\"radio-group\">\n ".concat(getIcon(paymentMethods.AFTERPAY), "\n </div>\n </li>\n </label>")
17728
17726
  };
17729
17727
 
17728
+ var TEMPLATE = "\n<style>\n @import url('https://fonts.cdnfonts.com/css/segoe-ui-4');\n @import url('https://fonts.cdnfonts.com/css/droid-sans-2');\n @import url('https://fonts.cdnfonts.com/css/helvetica-neue-55');\n @import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Fira+Sans&family=Oxygen&family=Roboto&family=Ubuntu&display=swap');\n \n /* RESET DEFAULT STYLES */\n *,\n *:before,\n *:after {\n box-sizing: border-box;\n }\n\n html,\n body,\n div,\n span,\n applet,\n object,\n iframe,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p,\n blockquote,\n pre,\n a,\n abbr,\n acronym,\n address,\n big,\n cite,\n code,\n del,\n dfn,\n em,\n img,\n ins,\n kbd,\n q,\n s,\n samp,\n small,\n strike,\n strong,\n sub,\n sup,\n tt,\n var,\n b,\n u,\n i,\n center,\n dl,\n dt,\n dd,\n ol,\n ul,\n li,\n fieldset,\n form,\n label,\n legend,\n table,\n caption,\n tbody,\n tfoot,\n thead,\n tr,\n th,\n td,\n article,\n aside,\n canvas,\n details,\n embed,\n figure,\n figcaption,\n footer,\n header,\n hgroup,\n menu,\n nav,\n output,\n ruby,\n section,\n summary,\n time,\n mark,\n audio,\n video,\n input {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font: inherit;\n vertical-align: baseline;\n }\n\n article,\n aside,\n details,\n figcaption,\n figure,\n footer,\n header,\n hgroup,\n menu,\n nav,\n section {\n display: block;\n }\n\n body {\n line-height: 1;\n }\n\n ol,\n ul {\n list-style: none;\n }\n\n ul {\n padding: 0;\n margin: 0;\n }\n\n /* MAIN STYLES */\n .wrap {\n padding: 10px;\n background-color: {{background_color}};\n }\n\n .widget-body {\n background-color: #fff;\n border: 1px solid {{border_color}};\n }\n\n .payment-source {\n cursor: pointer;\n padding: 1em 0.8em;\n display: flex;\n align-items: center;\n height: 70px;\n }\n\n .payment-source:not(:last-child) {\n border-bottom: 1px solid {{border_color}};\n }\n\n .payment-source__wrap {\n display: flex;\n align-items: center;\n font-family: {{font_family}};\n font-size: {{font_size}};\n color: {{text_color}}\n }\n\n .payment-source__radio {\n margin-right: 2em;\n width: 18px;\n min-width: 18px;\n height: 18px;\n border: 1px solid {{button_color}};\n border-radius: 50%;\n appearance: none;\n cursor: pointer;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source__radio::before {\n content: \"\";\n display: block;\n width: 100%;\n height: 100%;\n background-color: #fff;\n border-radius: 50%;\n }\n\n .payment-source__radio:checked::before {\n border: 4px solid {{button_color}};\n outline: 1px solid {{button_color}};\n }\n\n .payment-source__title {\n margin-right: 2em;\n font-weight: 400;\n line-height: 1.2;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n font-size: 14px;\n }\n }\n\n .payment-source__icon {\n margin-right: 2em;\n max-height: 35px;\n\n @media screen and (max-width: 380px) {\n margin-right: 1em;\n }\n }\n\n .payment-source .card__scheme {\n margin-left: auto;\n display: flex;\n align-items: center;\n }\n\n .payment-source .card__scheme__item:not(:last-child) {\n margin-right: 10px;\n }\n\n .payment-source .card__scheme__img {\n max-width: 50px;\n\n @media screen and (max-width: 460px) {\n max-width: 40px;\n }\n\n @media screen and (max-width: 410px) {\n max-width: 30px;\n }\n }\n\n .payment-source__form {\n margin-top: 1em;\n margin-bottom: 1em;\n margin-left: calc(2em + 18px);\n\n @media screen and (max-width: 380px) {\n margin-left: calc(1em + 18px);\n }\n }\n\n .payment-source__form .form-group:not(:last-child) {\n margin-bottom: 1.5em;\n }\n\n .payment-source__form .form-control {\n padding: 10px 2px 10px 10px;\n height: 40px;\n background: #F9F9F9;\n border: 1px solid {{border_color}};\n }\n\n .payment-source__form .form-control:not(:last-child) {\n margin-right: 1.5em;\n }\n\n .payment-source__form .form-control.col-12 {\n width: calc(100% - 1.5em);\n }\n\n .payment-source__form .form-control.col-3 {\n width: calc(33.33% - 1.5em);\n }\n\n .footer__pay-btn {\n margin-left: auto;\n padding: 10px 2em;\n height: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #F6F0EB;\n font-size: 16px;\n background-color: {{button_color}};\n box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.10);\n border: none;\n border-radius: 6px;\n cursor: pointer;\n }\n\n .footer__pay-btn--paypal {\n padding: 5px 2em;\n background-color: #FFC43A;\n }\n\n .footer__pay-btn--gpay {\n font-size: 22px;\n }\n\n .footer__pay-btn--gpay img {\n margin-left: 5px;\n }\n\n .footer__pay-btn img {\n max-height: 100%;\n }\n</style>\n<main class=\"wrap\">\n <div class=\"widget-body\">\n <ul class=\"payment-sources__list\">\n {{paymentMethods}}\n </ul>\n </div>\n</main>\n</div>\n";
17729
+
17730
17730
  var PAYMENTS_METHODS = {
17731
- APPLE_PAY: "applepay_wallet",
17732
- GOOGLE_PAY: "googlepay_wallet"
17731
+ APPLE_PAY: 'applepay_wallet',
17732
+ GOOGLE_PAY: 'googlepay_wallet'
17733
17733
  };
17734
- var PAYMENT_METHOD_ORDER = ["card", "afterpay_checkout", "applepay_wallet", "googlepay_wallet", "paypal_wallet", "zip_checkout"];
17734
+ var PAYMENT_METHOD_ORDER = ['card', 'afterpay_checkout', 'applepay_wallet', 'googlepay_wallet', 'paypal_wallet', 'zip_checkout'];
17735
17735
  var PaymentMethods = /*#__PURE__*/function () {
17736
17736
  function PaymentMethods(selector, methods, styles, chosen, instruction_token) {
17737
17737
  var skip = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
@@ -17755,51 +17755,24 @@ var PaymentMethods = /*#__PURE__*/function () {
17755
17755
  var _this = this;
17756
17756
  this.setPaymentMethodsOrder();
17757
17757
  this.setStylesToStandaloneWidget();
17758
- var initState = new Promise(function (resolve, reject) {
17759
- return __awaiter(_this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
17760
- var paymentMethodsAllowed, _iterator, _step, method;
17761
- return _regeneratorRuntime().wrap(function _callee$(_context) {
17762
- while (1) switch (_context.prev = _context.next) {
17763
- case 0:
17764
- paymentMethodsAllowed = [];
17765
- _iterator = _createForOfIteratorHelper(this.methods);
17766
- _context.prev = 2;
17767
- _iterator.s();
17768
- case 4:
17769
- if ((_step = _iterator.n()).done) {
17770
- _context.next = 11;
17771
- break;
17772
- }
17773
- method = _step.value;
17774
- if (!(method === PAYMENTS_METHODS.APPLE_PAY && !this.isApplePaySupported())) {
17775
- _context.next = 8;
17776
- break;
17777
- }
17778
- return _context.abrupt("continue", 9);
17779
- case 8:
17780
- paymentMethodsAllowed.push(PAYMENT_METHOD[method]);
17781
- case 9:
17782
- _context.next = 4;
17783
- break;
17784
- case 11:
17785
- _context.next = 16;
17786
- break;
17787
- case 13:
17788
- _context.prev = 13;
17789
- _context.t0 = _context["catch"](2);
17790
- _iterator.e(_context.t0);
17791
- case 16:
17792
- _context.prev = 16;
17793
- _iterator.f();
17794
- return _context.finish(16);
17795
- case 19:
17796
- resolve(paymentMethodsAllowed.join(' '));
17797
- case 20:
17798
- case "end":
17799
- return _context.stop();
17758
+ var initState = new Promise(function (resolve, _reject) {
17759
+ var paymentMethodsAllowed = [];
17760
+ var _iterator = _createForOfIteratorHelper(_this.methods),
17761
+ _step;
17762
+ try {
17763
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
17764
+ var method = _step.value;
17765
+ if (method === PAYMENTS_METHODS.APPLE_PAY && !_this.isApplePaySupported()) {
17766
+ continue;
17800
17767
  }
17801
- }, _callee, this, [[2, 13, 16, 19]]);
17802
- }));
17768
+ paymentMethodsAllowed.push(PAYMENT_METHOD[method]);
17769
+ }
17770
+ } catch (err) {
17771
+ _iterator.e(err);
17772
+ } finally {
17773
+ _iterator.f();
17774
+ }
17775
+ resolve(paymentMethodsAllowed.join(' '));
17803
17776
  });
17804
17777
  initState.then(function (content) {
17805
17778
  var template = _this.setStyles(content);
@@ -17811,7 +17784,7 @@ var PaymentMethods = /*#__PURE__*/function () {
17811
17784
  _this.setListenerButtons(iframeDocument);
17812
17785
  _this.iFrame.setIframeHeight(iframeElement, iframeDocument, '.wrap');
17813
17786
  } else {
17814
- _this.iFrame.getElement().addEventListener("load", function (event) {
17787
+ _this.iFrame.getElement().addEventListener('load', function (event) {
17815
17788
  _this.setListenerButtons(iframeDocument);
17816
17789
  _this.iFrame.setIframeHeight(iframeElement, iframeDocument, '.wrap');
17817
17790
  });
@@ -17822,26 +17795,37 @@ var PaymentMethods = /*#__PURE__*/function () {
17822
17795
  key: "setListenerButtons",
17823
17796
  value: function setListenerButtons(iframeDocument) {
17824
17797
  var _this2 = this;
17825
- var selectedPaymentMethod = "";
17798
+ var selectedPaymentMethod = '';
17826
17799
  Spinner.hide();
17827
17800
  var buttons = iframeDocument.querySelectorAll('[pm-button]');
17828
- buttons.forEach(function (button) {
17829
- button.addEventListener('click', function (event) {
17830
- var clickedButton = event.target;
17831
- var customAttributeValue = clickedButton.getAttribute('pm-button');
17832
- if (selectedPaymentMethod !== customAttributeValue && !_this2.disablePaymentMethodOptions) {
17833
- _this2.chosen(customAttributeValue);
17834
- selectedPaymentMethod = customAttributeValue;
17835
- Spinner.show();
17836
- }
17837
- });
17838
- });
17801
+ var _iterator2 = _createForOfIteratorHelper(buttons),
17802
+ _step2;
17803
+ try {
17804
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
17805
+ var button = _step2.value;
17806
+ button.addEventListener('click', function (event) {
17807
+ var clickedButton = event.target;
17808
+ var customAttributeValue = clickedButton.getAttribute('pm-button');
17809
+ if (selectedPaymentMethod !== customAttributeValue && !_this2.disablePaymentMethodOptions) {
17810
+ _this2.chosen(customAttributeValue);
17811
+ selectedPaymentMethod = customAttributeValue;
17812
+ Spinner.show();
17813
+ }
17814
+ });
17815
+ }
17816
+ } catch (err) {
17817
+ _iterator2.e(err);
17818
+ } finally {
17819
+ _iterator2.f();
17820
+ }
17839
17821
  }
17840
17822
  }, {
17841
17823
  key: "setEnv",
17842
17824
  value: function setEnv(instruction_token) {
17843
17825
  var tokenContent = AccessToken.validateJWT(instruction_token);
17844
- if (!tokenContent) throw new Error("Invalid instruction token.");
17826
+ if (!tokenContent) {
17827
+ throw new Error('Invalid instruction token.');
17828
+ }
17845
17829
  return AccessToken.extractEnv(tokenContent.body);
17846
17830
  }
17847
17831
  }, {
@@ -17850,7 +17834,9 @@ var PaymentMethods = /*#__PURE__*/function () {
17850
17834
  var _a, _b, _c, _d, _e, _f;
17851
17835
  var template = TEMPLATE.replace('{{paymentMethods}}', content);
17852
17836
  var listElement = document === null || document === void 0 ? void 0 : document.querySelector(SELECTORS.LIST);
17853
- if (listElement) listElement.style.backgroundColor = this.styles.background_color || DEFAULT_VARIABLES.BG_COLOR;
17837
+ if (listElement) {
17838
+ listElement.style.backgroundColor = this.styles.background_color || DEFAULT_VARIABLES.BG_COLOR;
17839
+ }
17854
17840
  template = ((_a = this.styles) === null || _a === void 0 ? void 0 : _a.button_color) ? template.replace(/{{button_color}}/g, this.styles.button_color) : template.replace(/{{button_color}}/g, DEFAULT_VARIABLES.BTN_COLOR);
17855
17841
  template = ((_b = this.styles) === null || _b === void 0 ? void 0 : _b.border_color) ? template.replace(/{{border_color}}/g, this.styles.border_color) : template.replace(/{{border_color}}/g, DEFAULT_VARIABLES.BORDER_COLOR);
17856
17842
  template = ((_c = this.styles) === null || _c === void 0 ? void 0 : _c.background_color) ? template.replace(/{{background_color}}/g, this.styles.background_color) : template.replace(/{{background_color}}/g, DEFAULT_VARIABLES.BG_COLOR);
@@ -17874,7 +17860,9 @@ var PaymentMethods = /*#__PURE__*/function () {
17874
17860
  key: "setPaymentMethodsOrder",
17875
17861
  value: function setPaymentMethodsOrder() {
17876
17862
  var _a;
17877
- if (!((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length)) return this.methods;
17863
+ if (!((_a = this.methods) === null || _a === void 0 ? void 0 : _a.length)) {
17864
+ return this.methods;
17865
+ }
17878
17866
  this.methods.sort(function (a, b) {
17879
17867
  return PAYMENT_METHOD_ORDER.indexOf(a) - PAYMENT_METHOD_ORDER.indexOf(b);
17880
17868
  });
@@ -17887,25 +17875,62 @@ var PaymentMethods = /*#__PURE__*/function () {
17887
17875
  var iframe = document === null || document === void 0 ? void 0 : document.querySelector("".concat(SELECTORS.LIST, " iframe"));
17888
17876
  var iframeDocument = iframe.contentDocument || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
17889
17877
  if (iframeDocument) {
17890
- var radiosButtons = iframeDocument.querySelectorAll('input[type="radio"].payment-source__radio');
17891
- var labels = iframeDocument.querySelectorAll('.payment-source');
17892
- labels.forEach(function (label) {
17893
- label.style.cursor = "not-allowed";
17894
- });
17895
- radiosButtons.forEach(function (radioButton) {
17896
- var labels = iframeDocument.querySelectorAll('.payment-source');
17897
- labels.forEach(function (label) {
17898
- label.style.cursor = "not-allowed";
17899
- });
17900
- radioButton.style.cursor = "not-allowed";
17901
- if (!radioButton.checked) {
17902
- radioButton.style.border = "9px solid #EBEBE4";
17878
+ var labels = this.queryAllPaymentSource(iframeDocument);
17879
+ var _iterator3 = _createForOfIteratorHelper(labels),
17880
+ _step3;
17881
+ try {
17882
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
17883
+ var label = _step3.value;
17884
+ label.style.cursor = 'not-allowed';
17903
17885
  }
17904
- radioButton.disabled = true;
17905
- radioButton.classList.add("disabled");
17906
- });
17886
+ } catch (err) {
17887
+ _iterator3.e(err);
17888
+ } finally {
17889
+ _iterator3.f();
17890
+ }
17891
+ var radiosButtons = this.queryAllPaymentSourceRadioButtons(iframeDocument);
17892
+ var _iterator4 = _createForOfIteratorHelper(radiosButtons),
17893
+ _step4;
17894
+ try {
17895
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
17896
+ var radioButton = _step4.value;
17897
+ var _labels = this.queryAllPaymentSource(iframeDocument);
17898
+ var _iterator5 = _createForOfIteratorHelper(_labels),
17899
+ _step5;
17900
+ try {
17901
+ for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
17902
+ var _label = _step5.value;
17903
+ _label.style.cursor = 'not-allowed';
17904
+ }
17905
+ } catch (err) {
17906
+ _iterator5.e(err);
17907
+ } finally {
17908
+ _iterator5.f();
17909
+ }
17910
+ radioButton.style.cursor = 'not-allowed';
17911
+ if (!radioButton.checked) {
17912
+ radioButton.style.border = '9px solid #EBEBE4';
17913
+ }
17914
+ radioButton.disabled = true;
17915
+ radioButton.classList.add('disabled');
17916
+ }
17917
+ } catch (err) {
17918
+ _iterator4.e(err);
17919
+ } finally {
17920
+ _iterator4.f();
17921
+ }
17907
17922
  }
17908
17923
  }
17924
+ }, {
17925
+ key: "queryAllPaymentSource",
17926
+ value: function queryAllPaymentSource(iframeDocument) {
17927
+ return iframeDocument.querySelectorAll('.payment-source');
17928
+ }
17929
+ }, {
17930
+ key: "queryAllPaymentSourceRadioButtons",
17931
+ value: function queryAllPaymentSourceRadioButtons(iframeDocument) {
17932
+ return iframeDocument.querySelectorAll('input[type="radio"].payment-source__radio');
17933
+ }
17909
17934
  }]);
17910
17935
  }();
17911
17936
 
@@ -17946,6 +17971,7 @@ var InstructionFraudServiceShow = /*#__PURE__*/function (_InstructionHandler) {
17946
17971
  key: "handle",
17947
17972
  value: function handle(context) {
17948
17973
  var _this = this;
17974
+ var _a;
17949
17975
  document.addEventListener(FRAUD_PREVENTION_EVENTS.NAMESPACE, function (event) {
17950
17976
  switch (event.detail.type) {
17951
17977
  case FRAUD_PREVENTION_EVENTS.TYPES.FINTERPRINT_TOKEN_READY:
@@ -17994,11 +18020,14 @@ var InstructionFraudServiceShow = /*#__PURE__*/function (_InstructionHandler) {
17994
18020
  providerId: context.payload.gateway_id,
17995
18021
  csp: false
17996
18022
  });
18023
+ if (context.next_instruction) {
18024
+ (_a = this.checkoutWidget) === null || _a === void 0 ? void 0 : _a.fetchInstruction();
18025
+ }
17997
18026
  }
17998
18027
  }, {
17999
18028
  key: "destroy",
18000
18029
  value: function destroy() {
18001
- document.querySelector(this.formSelector).innerHTML = '';
18030
+ // document.querySelector(this.formSelector).innerHTML = '';
18002
18031
  }
18003
18032
  }]);
18004
18033
  }(InstructionHandler);
package/bundles/types/checkout/instructions/v1/instruction.fraud_service.show.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare class InstructionFraudServiceShow extends InstructionHandler {
14
14
  customisation?: {
15
15
  base?: object;
16
16
  };
17
+ next_instruction?: boolean;
17
18
  }): void;
18
19
  destroy(): void;
19
20
  }
package/bundles/types/checkout/instructions/v1/instruction.fraud_service.show.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"instruction.fraud_service.show.d.ts","sourceRoot":"","sources":["../../../../src/checkout/instructions/v1/instruction.fraud_service.show.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAE5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAGvE,qBACa,2BAA4B,SAAQ,kBAAkB;IACjE,SAAS,CAAC,GAAG,EAAE,sBAAsB,CAAC;IAE/B,MAAM,CAAC,OAAO,EAAE;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QACpE,iBAAiB,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KACnC,GAAG,IAAI;IAyDD,OAAO;CAGf"}
1
+ {"version":3,"file":"instruction.fraud_service.show.d.ts","sourceRoot":"","sources":["../../../../src/checkout/instructions/v1/instruction.fraud_service.show.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oDAAoD,CAAC;AAE5F,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAGvE,qBACa,2BAA4B,SAAQ,kBAAkB;IACjE,SAAS,CAAC,GAAG,EAAE,sBAAsB,CAAC;IAE/B,MAAM,CAAC,OAAO,EAAE;QACrB,UAAU,EAAE,MAAM,CAAC;QACnB,UAAU,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE;YAAE,UAAU,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,MAAM,CAAA;SAAE,CAAC;QACpE,iBAAiB,EAAE,MAAM,CAAC;QAC1B,aAAa,CAAC,EAAE;YAAE,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QAClC,gBAAgB,CAAC,EAAE,OAAO,CAAC;KAC5B,GAAG,IAAI;IA6DD,OAAO;CAGf"}