@paydock/client-sdk 1.104.6-beta → 1.104.9-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.
- package/README.md +58 -59
- package/bundles/index.cjs +71 -44
- package/bundles/index.cjs.d.ts +12 -12
- package/bundles/index.cjs.map +1 -1
- package/bundles/index.mjs +71 -44
- package/bundles/index.mjs.d.ts +12 -12
- package/bundles/index.mjs.map +1 -1
- package/bundles/types/api/api-service-internal.d.ts +1 -1
- package/bundles/types/api/api-service-internal.d.ts.map +1 -1
- package/bundles/types/components/wallet-background.d.ts +2 -1
- package/bundles/types/components/wallet-background.d.ts.map +1 -1
- package/bundles/types/helper/element-id.d.ts +5 -0
- package/bundles/types/helper/element-id.d.ts.map +1 -0
- package/bundles/types/secure-remote-commerce/click-to-pay-secure-remote-commerce.d.ts +31 -0
- package/bundles/types/secure-remote-commerce/click-to-pay-secure-remote-commerce.d.ts.map +1 -0
- package/bundles/types/secure-remote-commerce/index.d.ts +4 -4
- package/bundles/types/secure-remote-commerce/index.d.ts.map +1 -1
- package/bundles/types/secure-remote-commerce/interfaces.d.ts +4 -4
- package/bundles/types/secure-remote-commerce/interfaces.d.ts.map +1 -1
- package/bundles/types/secure-remote-commerce/providers/mastercard-src/index.d.ts +1 -1
- package/bundles/types/secure-remote-commerce/providers/mastercard-src/mastercard-src.d.ts +4 -4
- package/bundles/types/secure-remote-commerce/providers/mastercard-src/mastercard-src.d.ts.map +1 -1
- package/bundles/types/secure-remote-commerce/secure-remote-commerce.d.ts +3 -3
- package/bundles/types/secure-remote-commerce/secure-remote-commerce.d.ts.map +1 -1
- package/bundles/types/wallet-buttons/flypay-v2.wallet-service.d.ts +1 -1
- package/bundles/types/wallet-buttons/flypay-v2.wallet-service.d.ts.map +1 -1
- package/bundles/types/wallet-buttons/helpers/flypay-v2.helper.d.ts +5 -3
- package/bundles/types/wallet-buttons/helpers/flypay-v2.helper.d.ts.map +1 -1
- package/bundles/widget.umd.js +71 -44
- package/bundles/widget.umd.js.d.ts +12 -12
- package/bundles/widget.umd.js.map +1 -1
- package/bundles/widget.umd.js.min.d.ts +12 -12
- package/bundles/widget.umd.min.js +1 -1
- package/bundles/widget.umd.min.js.map +1 -1
- package/docs/{secure-remote-commerce-examples.md → click-to-pay-examples.md} +18 -19
- package/docs/{secure-remote-commerce.md → click-to-pay.md} +40 -40
- package/docs/html/layout.html +3 -3
- package/package.json +45 -45
- package/slate.md +18 -19
- package/bundles/types/secure-remote-commerce/mastercard-secure-remote-commerce.d.ts +0 -31
- package/bundles/types/secure-remote-commerce/mastercard-secure-remote-commerce.d.ts.map +0 -1
package/bundles/index.mjs
CHANGED
|
@@ -683,7 +683,7 @@ SDK.headerKeys = Object.freeze({
|
|
|
683
683
|
version: 'x-sdk-version',
|
|
684
684
|
type: 'x-sdk-type'
|
|
685
685
|
});
|
|
686
|
-
SDK._version = 'v1.104.
|
|
686
|
+
SDK._version = 'v1.104.9-beta';
|
|
687
687
|
|
|
688
688
|
var API_AUTH_TYPE;
|
|
689
689
|
(function (API_AUTH_TYPE) {
|
|
@@ -1502,7 +1502,7 @@ var ApiServiceInternal = /*#__PURE__*/function () {
|
|
|
1502
1502
|
var CARD_SCHEME_SERVICE;
|
|
1503
1503
|
(function (CARD_SCHEME_SERVICE) {
|
|
1504
1504
|
CARD_SCHEME_SERVICE["VISA_SRC"] = "VisaSRC";
|
|
1505
|
-
CARD_SCHEME_SERVICE["MASTERCARD_SRC"] = "
|
|
1505
|
+
CARD_SCHEME_SERVICE["MASTERCARD_SRC"] = "ClickToPay";
|
|
1506
1506
|
})(CARD_SCHEME_SERVICE || (CARD_SCHEME_SERVICE = {}));
|
|
1507
1507
|
|
|
1508
1508
|
var ApiInternal = /*#__PURE__*/function (_ApiBase) {
|
|
@@ -5425,14 +5425,14 @@ var HtmlPaymentSourceWidget = /*#__PURE__*/function (_PaymentSourceWidget) {
|
|
|
5425
5425
|
}(PaymentSourceWidget);
|
|
5426
5426
|
|
|
5427
5427
|
/**
|
|
5428
|
-
* List of available event's name in the
|
|
5428
|
+
* List of available event's name in the Click To Pay checkout lifecycle
|
|
5429
5429
|
* @enum EVENT
|
|
5430
5430
|
*
|
|
5431
5431
|
* @type {object}
|
|
5432
5432
|
* @param {string} IFRAME_LOADED=iframeLoaded Initial event sent when IFrame is initially loaded.
|
|
5433
5433
|
* @param {string} CHECKOUT_READY=checkoutReady Event sent when checkout is loaded and ready to be used by customer. Leverage alongside [showCheckout](#SRC+showCheckout) and [hideCheckout](#SRC+hideCheckout).
|
|
5434
|
-
* @param {string} CHECKOUT_POPUP_OPEN=checkoutPopupOpen Event sent when
|
|
5435
|
-
* @param {string} CHECKOUT_POPUP_CLOSE=checkoutPopupClose Event sent when
|
|
5434
|
+
* @param {string} CHECKOUT_POPUP_OPEN=checkoutPopupOpen Event sent when Click To Pay checkout flow is started, regardless of embedded or windowed mode.
|
|
5435
|
+
* @param {string} CHECKOUT_POPUP_CLOSE=checkoutPopupClose Event sent when Click To Pay checkout flow is closed, regardless of embedded or windowed mode.
|
|
5436
5436
|
* @param {string} CHECKOUT_COMPLETED=checkoutCompleted Event sent on successful checkout by customer. Check [data](#EventDataCheckoutCompletedData) for more information.
|
|
5437
5437
|
* @param {string} CHECKOUT_ERROR=checkoutError Event sent on error checkout by customer. Check [data](#EventData) for more information.
|
|
5438
5438
|
*/
|
|
@@ -5469,9 +5469,9 @@ var STYLE = {
|
|
|
5469
5469
|
ENABLE_SRC_POPUP: 'enable_src_popup'
|
|
5470
5470
|
};
|
|
5471
5471
|
|
|
5472
|
-
var
|
|
5473
|
-
function
|
|
5474
|
-
_classCallCheck(this,
|
|
5472
|
+
var ClickToPaySRC = /*#__PURE__*/function () {
|
|
5473
|
+
function ClickToPaySRC(iframe_selector, service_id, public_key, meta, eventEmitter, autoResize, env, alias) {
|
|
5474
|
+
_classCallCheck(this, ClickToPaySRC);
|
|
5475
5475
|
this.meta = meta;
|
|
5476
5476
|
this.eventEmitter = eventEmitter;
|
|
5477
5477
|
this.autoResize = autoResize;
|
|
@@ -5494,7 +5494,7 @@ var MastercardSRC = /*#__PURE__*/function () {
|
|
|
5494
5494
|
this.iFrameEvent = new IFrameEvent(window);
|
|
5495
5495
|
this.setupIFrameEvents();
|
|
5496
5496
|
}
|
|
5497
|
-
return _createClass(
|
|
5497
|
+
return _createClass(ClickToPaySRC, [{
|
|
5498
5498
|
key: "setupIFrameEvents",
|
|
5499
5499
|
value: function setupIFrameEvents() {
|
|
5500
5500
|
var _this = this;
|
|
@@ -5527,7 +5527,7 @@ var MastercardSRC = /*#__PURE__*/function () {
|
|
|
5527
5527
|
value: function load() {
|
|
5528
5528
|
var _this2 = this;
|
|
5529
5529
|
this.iFrame.load(this.link.getUrl(), {
|
|
5530
|
-
title: '
|
|
5530
|
+
title: 'Click To Pay checkout'
|
|
5531
5531
|
});
|
|
5532
5532
|
var iframeElement = this.iFrame.getElement();
|
|
5533
5533
|
this.iFrame.setStyle('width', '100%');
|
|
@@ -5625,7 +5625,7 @@ var SRC = /*#__PURE__*/function () {
|
|
|
5625
5625
|
_this.meta.customizations = _this.style; // assign the style on the start of the widget
|
|
5626
5626
|
switch (type) {
|
|
5627
5627
|
case CARD_SCHEME_SERVICE.MASTERCARD_SRC:
|
|
5628
|
-
_this.provider = new
|
|
5628
|
+
_this.provider = new ClickToPaySRC(_this.iframe_selector, _this.service_id, _this.public_key_or_access_token, _this.meta, _this.eventEmitter, _this.autoResize, _this.env, _this.alias);
|
|
5629
5629
|
break;
|
|
5630
5630
|
}
|
|
5631
5631
|
if (_this.provider) _this.provider.load();
|
|
@@ -5738,26 +5738,26 @@ var SRC = /*#__PURE__*/function () {
|
|
|
5738
5738
|
}();
|
|
5739
5739
|
|
|
5740
5740
|
/**
|
|
5741
|
-
* Class
|
|
5741
|
+
* Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option
|
|
5742
5742
|
*
|
|
5743
5743
|
* @extends SRC
|
|
5744
5744
|
*
|
|
5745
5745
|
* @constructor
|
|
5746
5746
|
*
|
|
5747
|
-
* @param {string} iframe_selector - Selector of html element. Container for
|
|
5747
|
+
* @param {string} iframe_selector - Selector of html element. Container for Click To Pay checkout iFrame.
|
|
5748
5748
|
* @param {string} service_id - Card Scheme Service ID
|
|
5749
5749
|
* @param {string} public_key_or_access_token - Paydock public key or Access Token
|
|
5750
|
-
* @param {
|
|
5750
|
+
* @param {IClickToPayMeta} meta - Data that configures the Click To Pay checkout
|
|
5751
5751
|
* @example
|
|
5752
|
-
* var mastercardSRC = new
|
|
5752
|
+
* var mastercardSRC = new ClickToPay('#checkoutIframe', 'service_id', 'public_key', {});
|
|
5753
5753
|
*
|
|
5754
5754
|
*/
|
|
5755
|
-
var
|
|
5755
|
+
var ClickToPay = /*#__PURE__*/function (_SRC) {
|
|
5756
5756
|
/** @constructs */ // constructs added for correct parse classes jsdoc2md
|
|
5757
|
-
function
|
|
5757
|
+
function ClickToPay(iframe_selector, service_id, public_key_or_access_token, meta) {
|
|
5758
5758
|
var _this;
|
|
5759
|
-
_classCallCheck(this,
|
|
5760
|
-
_this = _callSuper(this,
|
|
5759
|
+
_classCallCheck(this, ClickToPay);
|
|
5760
|
+
_this = _callSuper(this, ClickToPay, [iframe_selector, service_id, public_key_or_access_token, meta]);
|
|
5761
5761
|
_this.iframe_selector = iframe_selector;
|
|
5762
5762
|
_this.service_id = service_id;
|
|
5763
5763
|
_this.public_key_or_access_token = public_key_or_access_token;
|
|
@@ -5765,16 +5765,16 @@ var MastercardSRCClickToPay = /*#__PURE__*/function (_SRC) {
|
|
|
5765
5765
|
return _this;
|
|
5766
5766
|
}
|
|
5767
5767
|
/**
|
|
5768
|
-
* The final method after configuring the SRC to start the load process of
|
|
5768
|
+
* The final method after configuring the SRC to start the load process of Click To Pay checkout
|
|
5769
5769
|
*
|
|
5770
5770
|
*/
|
|
5771
|
-
_inherits(
|
|
5772
|
-
return _createClass(
|
|
5771
|
+
_inherits(ClickToPay, _SRC);
|
|
5772
|
+
return _createClass(ClickToPay, [{
|
|
5773
5773
|
key: "load",
|
|
5774
5774
|
value: function load() {
|
|
5775
5775
|
if (this.provider) return;
|
|
5776
5776
|
this.meta.customizations = this.style;
|
|
5777
|
-
this.provider = new
|
|
5777
|
+
this.provider = new ClickToPaySRC(this.iframe_selector, this.service_id, this.public_key_or_access_token, this.meta, this.eventEmitter, this.autoResize, this.env, this.alias);
|
|
5778
5778
|
this.provider.load();
|
|
5779
5779
|
}
|
|
5780
5780
|
}]);
|
|
@@ -6036,16 +6036,18 @@ var WalletTrigger = /*#__PURE__*/function (_Trigger) {
|
|
|
6036
6036
|
}]);
|
|
6037
6037
|
}(Trigger);
|
|
6038
6038
|
|
|
6039
|
-
var TEMPLATE = "\n <div class=\"checkout-container\">\n <div class=\"checkout-bg-logo\"></div>\n <a href=\"#\" data-close>Close</a>\n </div>\n";
|
|
6040
|
-
var STYLES = "\n .checkout-bg-logo {\n display: block;\n background: url({{url}}) no-repeat;\n width: 100px;\n height: 50px;\n margin: 0 auto;\n border-radius: 10px;\n background-size: contain;\n }\n\n .checkout-overlay {\n z-index: 2147483647;\n }\n\n .checkout-container [data-close] {\n opacity: 1;\n }\n .checkout-container [data-close]:before,\n .checkout-container [data-close]:after {\n background-color: #fff;\n }\n";
|
|
6039
|
+
var TEMPLATE = "\n <div class=\"checkout-container\">\n <div class=\"checkout-bg-logo\"></div>\n <a href=\"#\" data-continue>Continue</a>\n <a href=\"#\" data-close>Close</a>\n </div>\n";
|
|
6040
|
+
var STYLES = "\n .checkout-bg-logo {\n display: block;\n background: url({{url}}) no-repeat;\n width: 100px;\n height: 50px;\n margin: 0 auto;\n border-radius: 10px;\n background-size: contain;\n }\n [data-continue] {\n margin-top: 24px;\n display: block;\n font-family: Helvetica, sans-serif;\n text-decoration: none;\n color: #fff !important;\n border: 1px solid white;\n width: 100px;\n border-radius: 16px;\n padding: 5px;\n }\n [data-continue]:hover {\n background-color: #f2f2f2;\n border: none;\n color: rgba(0, 0, 0, 0.7) !important;\n }\n .checkout-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .checkout-overlay {\n z-index: 2147483647;\n }\n\n .checkout-container [data-close] {\n opacity: 1;\n }\n .checkout-container [data-close]:before,\n .checkout-container [data-close]:after {\n background-color: #fff;\n }\n";
|
|
6041
6041
|
var WalletBackground = /*#__PURE__*/function (_Background) {
|
|
6042
6042
|
function WalletBackground(bgImageUrl) {
|
|
6043
6043
|
var _this;
|
|
6044
6044
|
var hideCloseButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
6045
|
+
var hideContinueButton = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
6045
6046
|
_classCallCheck(this, WalletBackground);
|
|
6046
6047
|
_this = _callSuper(this, WalletBackground);
|
|
6047
6048
|
_this.bgImageUrl = bgImageUrl;
|
|
6048
6049
|
_this.hideCloseButton = hideCloseButton;
|
|
6050
|
+
_this.hideContinueButton = hideContinueButton;
|
|
6049
6051
|
_this.imageStyle = null;
|
|
6050
6052
|
return _this;
|
|
6051
6053
|
}
|
|
@@ -6070,6 +6072,7 @@ var WalletBackground = /*#__PURE__*/function (_Background) {
|
|
|
6070
6072
|
var body = document.body || document.getElementsByTagName("body")[0];
|
|
6071
6073
|
var template = String(TEMPLATE);
|
|
6072
6074
|
if (this.hideCloseButton === true) template = template.replace('<a href="#" data-close>Close</a>', '');
|
|
6075
|
+
if (this.hideContinueButton === true) template = template.replace('<a href="#" data-continue>Continue</a>', '');
|
|
6073
6076
|
this.overlay = document.createElement("div");
|
|
6074
6077
|
this.overlay.classList.add("checkout-overlay");
|
|
6075
6078
|
this.overlay.setAttribute("checkout-overlay", " ");
|
|
@@ -7972,14 +7975,31 @@ var Checkout = class {
|
|
|
7972
7975
|
}
|
|
7973
7976
|
};
|
|
7974
7977
|
|
|
7975
|
-
function getFlypayV2Button() {
|
|
7976
|
-
return
|
|
7978
|
+
function getFlypayV2Button(widgetId) {
|
|
7979
|
+
return getButtonWithClassNames('paydock-flypay-button', widgetId);
|
|
7977
7980
|
}
|
|
7978
|
-
function getDisabledFlypayV2Button() {
|
|
7979
|
-
return
|
|
7981
|
+
function getDisabledFlypayV2Button(widgetId) {
|
|
7982
|
+
return getButtonWithClassNames('paydock-flypay-button paydock-flypay-button__disabled', widgetId);
|
|
7980
7983
|
}
|
|
7981
|
-
function
|
|
7982
|
-
return "
|
|
7984
|
+
function getWidgetClassName(widgetId) {
|
|
7985
|
+
return "flypay-v2-checkout-btn__wrapper__".concat(widgetId);
|
|
7986
|
+
}
|
|
7987
|
+
function getOverlayId(widgetId) {
|
|
7988
|
+
return "".concat(widgetId, "-loading-overlay");
|
|
7989
|
+
}
|
|
7990
|
+
function createFlypayV2ButtonStyle(widgetId) {
|
|
7991
|
+
var widgetClassName = getWidgetClassName(widgetId);
|
|
7992
|
+
return "\n .".concat(widgetClassName, " {\n position: relative;\n height: 100%;\n width: 100%;\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 .").concat(widgetClassName, " .paydock-flypay-button {\n background-color: #212121;\n border-radius: 9999px;\n width: 100%; /* set hard pixel dimensions here for a button with intrinsic dimensions */\n height: 100%; /* and leave the 100% settings for the Coles use case (enabled by extra param object flag) */\n display: grid;\n grid-template-columns: 20% 1fr 20%;\n grid-template-rows: 20% 1fr 20%;\n grid-template-areas:\n \". . .\"\n \". center .\"\n \". . .\";\n box-sizing: border-box;\n }\n \n .").concat(widgetClassName, " .paydock-flypay-button:hover {\n background-color: #3d3d3d;\n }\n \n .").concat(widgetClassName, " .paydock-flypay-button:focus-visible {\n outline-color: transparent;\n box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #2670ee;\n outline-color: transparent;\n }\n \n .").concat(widgetClassName, " .paydock-flypay-button:active {\n background-color: #6f6f6f;\n }\n \n .").concat(widgetClassName, " .paydock-flypay-button:disabled,\n .").concat(widgetClassName, " .paydock-flypay-button__disabled {\n opacity: 25%;\n cursor: not-allowed;\n }\n \n #").concat(widgetId, "-loading-overlay {\n position: absolute;\n height: 100%;\n width: 100%;\n background: rgba(255, 255, 255, 0.7);\n display: none;\n justify-content: center;\n align-items: center;\n cursor: not-allowed; /* Make it look not clickable */ \n }\n \n #").concat(widgetId, "-loading-overlay::after {\n content: \"\";\n height: 60%;\n aspect-ratio: 1 / 1;\n display: inline-block;\n border: 4px solid #ccc;\n border-top-color: #333;\n border-radius: 50%;\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 ");
|
|
7993
|
+
}
|
|
7994
|
+
function getButtonWithClassNames(classNames, containerId) {
|
|
7995
|
+
return "\n <div id=\"".concat(containerId, "-loading-overlay\"></div>\n <div class=\"").concat(classNames, "\" tabindex=\"0\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 125.2 21\" data-name=\"pay-with-flypay\"\n style=\"grid-area: center; width: 100%; height: 100%\"\n fill=\"none\"\n >\n <path\n fill=\"#fff\"\n d=\"M89 .5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5ZM98 22.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1h-15a.5.5 0 0 1-.5-.5ZM87 3.5a.5.5 0 0 1 .5-.5H121c.758 0 1.42.031 1.974.133.553.102 1.044.284 1.421.618.78.694.849 1.829.598 3.331-.258 1.552-1.025 3.843-1.711 5.715a100.003 100.003 0 0 1-1.211 3.128l-.081.198-.021.051v.001c-.531 1.583-1.345 2.557-2.269 3.126-.92.566-1.898.699-2.7.699H96.5a.5.5 0 1 1 0-1v.5-.5H117c.698 0 1.47-.117 2.175-.55.697-.43 1.382-1.2 1.851-2.608l.005-.017.008-.018.006-.016.021-.05.079-.194a94.823 94.823 0 0 0 1.198-3.094c.689-1.878 1.422-4.087 1.664-5.535.249-1.498.068-2.113-.277-2.42-.186-.165-.476-.296-.938-.381C122.33 4.03 121.742 4 121 4H87.5a.5.5 0 0 1-.5-.5ZM76.512 9.512h3.157V7.34h-3.157v-.01h-.02c.01-1.196.841-2.17 2.52-2.17H81V3h-1.988C75.547 3 74.008 4.936 74 7.326V16h2.512V9.512ZM82 3.55 84.987 3H85v13h-3V3.55Z\"\n />\n <path\n fill=\"#fff\"\n d=\"M91.592 15.365a4.557 4.557 0 0 1-1.595.33c-2.391 0-4-1.68-3.997-4.092V7.546l2.41-.543V11.6c0 1.118.536 1.738 1.59 1.738 1.055 0 1.592-.622 1.592-1.738V7.543L94 7v9.855C94 19.41 92.497 21 90.073 21h-.596v-2.359h.59c.71 0 1.525-.641 1.525-1.786v-1.49Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M2.54 11.6h2.598c1.356 0 2.399-.299 3.129-.896.731-.598 1.096-1.62 1.096-3.063 0-1.323-.365-2.3-1.096-2.93-.73-.631-1.71-.947-2.938-.947H0V16h2.54v-4.4Zm4.291-3.943c0 .637-.166 1.102-.498 1.395-.337.293-.808.44-1.411.44H2.54V5.889h2.382c.603 0 1.071.136 1.403.407.337.271.506.725.506 1.361ZM14.651 6.736c-1.522 0-2.596.398-3.221 1.195-.393.51-.614 1.16-.664 1.95h2.283c.055-.348.166-.624.332-.83.232-.276.628-.414 1.187-.414.498 0 .874.072 1.128.216.261.138.391.392.391.763 0 .305-.169.529-.507.673-.188.083-.501.152-.938.207l-.805.1c-.913.116-1.605.31-2.075.58-.858.499-1.287 1.304-1.287 2.416 0 .858.266 1.522.797 1.993.537.464 1.215.697 2.034.697.642 0 1.217-.147 1.726-.44a4.83 4.83 0 0 0 1.129-.905c.017.205.039.388.067.548.027.16.077.332.149.515h2.573v-.349a.843.843 0 0 1-.348-.274c-.078-.11-.125-.32-.141-.63-.011-.41-.017-.759-.017-1.047V9.55c0-1.09-.385-1.832-1.154-2.225-.769-.393-1.649-.59-2.639-.59Zm-.648 7.828c-.321 0-.592-.092-.813-.274-.227-.177-.341-.468-.341-.872 0-.454.183-.788.548-1.004.216-.128.573-.236 1.071-.324l.531-.1c.266-.05.473-.102.623-.157.155-.061.307-.139.456-.233v.88c-.016.791-.24 1.336-.672 1.635a2.39 2.39 0 0 1-1.403.449Z\"\n clip-rule=\"evenodd\"\n />\n <path\n fill=\"#fff\"\n d=\"m26.097 6.952-1.867 6.674-1.976-6.674h-2.631l3.32 9.446c.022.066-.028.25-.149.548-.117.299-.244.495-.382.59-.144.099-.321.162-.531.19a3.752 3.752 0 0 1-.665.025l-.298-.017v1.893c.254.017.445.025.572.025.128.005.296.008.507.008 1.046 0 1.743-.207 2.092-.622.348-.41.821-1.472 1.419-3.188l3.104-8.898h-2.515ZM40.192 9.409l1.419 6.59h2.433l2.623-9.047h-2.466l-1.411 6.516-1.378-6.516h-2.399l-1.303 6.491-1.411-6.491h-2.54L36.299 16h2.457l1.436-6.591ZM50.41 16V6.952h-2.399V16h2.399ZM50.41 5.873V3.689h-2.399v2.184h2.399ZM56.852 16.083v-1.768l-.241.016h-.224c-.482 0-.769-.044-.863-.133-.094-.094-.142-.326-.142-.697V8.72h1.47V7.035h-1.47V4.51h-2.34v2.524H51.78V8.72h1.262v5.57c0 .564.132.982.398 1.253.41.426 1.173.62 2.291.581l1.121-.041ZM66.547 16v-5.313c0-.808-.028-1.389-.083-1.743a2.347 2.347 0 0 0-.457-1.046 2.656 2.656 0 0 0-1.128-.888 3.836 3.836 0 0 0-1.519-.29c-.499 0-.974.104-1.428.315-.448.204-.844.57-1.187 1.095V3.806h-2.358V16h2.358v-4.898c0-.775.16-1.37.481-1.785.327-.42.803-.63 1.428-.63.603 0 1.013.21 1.228.63.167.3.25.692.25 1.18V16h2.415Z\"\n />\n <path\n fill=\"#fff\"\n fill-rule=\"evenodd\"\n d=\"M103 16h1.997l1.276-2.003h3.56l.265 2.003H112l-1.337-9h-1.778L103 16Zm6.231-6.674.383 2.954h-2.237l1.854-2.954ZM98.02 16l.754-2.72h1.752a6.36 6.36 0 0 0 1.762-.228c.512-.139.992-.37 1.412-.683.398-.299.721-.677.95-1.107.24-.465.36-.978.349-1.496 0-.772-.239-1.389-.716-1.85a2.871 2.871 0 0 0-1.195-.7A5.816 5.816 0 0 0 101.401 7h-2.926L96 16h2.02Zm3.307-7.205c.257-.007.512.026.757.097.194.06.368.165.51.304.101.098.18.215.232.344a.977.977 0 0 1 .072.402c.012.232-.039.463-.147.671-.108.209-.27.387-.471.519-.413.279-.955.418-1.635.418h-1.38l.751-2.752h1.314l-.003-.003Z\"\n clip-rule=\"evenodd\"\n />\n <path\n fill=\"#fff\"\n d=\"m113.439 16 .982-3.548L112.5 7h2.266l1.087 3.73L119.112 7h2.388l-5.078 5.63-.939 3.37h-2.044Z\"\n />\n </svg>\n </div>\n ");
|
|
7996
|
+
}
|
|
7997
|
+
|
|
7998
|
+
/**
|
|
7999
|
+
* Generate a unique id compatible with HTML element id
|
|
8000
|
+
*/
|
|
8001
|
+
function getUniqueId() {
|
|
8002
|
+
return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
|
|
7983
8003
|
}
|
|
7984
8004
|
|
|
7985
8005
|
var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
@@ -7987,10 +8007,15 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
7987
8007
|
var _this;
|
|
7988
8008
|
_classCallCheck(this, FlypayV2WalletService);
|
|
7989
8009
|
_this = _callSuper(this, FlypayV2WalletService, [publicKey, meta]);
|
|
8010
|
+
// Unique id for the widget in order to avoid conflicts with other widgets on the same page
|
|
8011
|
+
// Also, used as the id for the button element
|
|
8012
|
+
_this.widgetId = getUniqueId();
|
|
7990
8013
|
_this.onFlypayV2ButtonClick = function () {
|
|
7991
8014
|
var setLoadingOverlayDisplay = function setLoadingOverlayDisplay(displayStyle) {
|
|
7992
|
-
var loadingOverlay = document.getElementById(
|
|
7993
|
-
if (loadingOverlay)
|
|
8015
|
+
var loadingOverlay = document.getElementById(getOverlayId(_this.widgetId));
|
|
8016
|
+
if (loadingOverlay) {
|
|
8017
|
+
loadingOverlay.style.display = displayStyle;
|
|
8018
|
+
}
|
|
7994
8019
|
};
|
|
7995
8020
|
_this.disable();
|
|
7996
8021
|
setLoadingOverlayDisplay('flex');
|
|
@@ -8039,7 +8064,6 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
8039
8064
|
return _createClass(FlypayV2WalletService, [{
|
|
8040
8065
|
key: "load",
|
|
8041
8066
|
value: function load(container) {
|
|
8042
|
-
this.containerId = container.getSelector();
|
|
8043
8067
|
this.mount(container);
|
|
8044
8068
|
}
|
|
8045
8069
|
}, {
|
|
@@ -8051,19 +8075,19 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
8051
8075
|
}, {
|
|
8052
8076
|
key: "enable",
|
|
8053
8077
|
value: function enable() {
|
|
8054
|
-
var button = document.getElementById(
|
|
8078
|
+
var button = document.getElementById(this.widgetId);
|
|
8055
8079
|
if (button) {
|
|
8056
8080
|
button.disabled = false;
|
|
8057
|
-
this.flypayV2Button.innerHTML = getFlypayV2Button();
|
|
8081
|
+
this.flypayV2Button.innerHTML = getFlypayV2Button(this.widgetId);
|
|
8058
8082
|
}
|
|
8059
8083
|
}
|
|
8060
8084
|
}, {
|
|
8061
8085
|
key: "disable",
|
|
8062
8086
|
value: function disable() {
|
|
8063
|
-
var button = document.getElementById(
|
|
8087
|
+
var button = document.getElementById(this.widgetId);
|
|
8064
8088
|
if (button) {
|
|
8065
8089
|
button.disabled = true;
|
|
8066
|
-
this.flypayV2Button.innerHTML = getDisabledFlypayV2Button();
|
|
8090
|
+
this.flypayV2Button.innerHTML = getDisabledFlypayV2Button(this.widgetId);
|
|
8067
8091
|
}
|
|
8068
8092
|
}
|
|
8069
8093
|
}, {
|
|
@@ -8077,14 +8101,14 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
8077
8101
|
key: "getButton",
|
|
8078
8102
|
value: function getButton() {
|
|
8079
8103
|
var style = document.createElement('style');
|
|
8080
|
-
style.innerHTML = createFlypayV2ButtonStyle(this.
|
|
8104
|
+
style.innerHTML = createFlypayV2ButtonStyle(this.widgetId);
|
|
8081
8105
|
document.head.appendChild(style);
|
|
8082
8106
|
this.flypayV2Button = document.createElement('button');
|
|
8083
|
-
this.flypayV2Button.classList.add(
|
|
8107
|
+
this.flypayV2Button.classList.add(getWidgetClassName(this.widgetId));
|
|
8084
8108
|
this.flypayV2Button.setAttribute('type', 'button');
|
|
8085
8109
|
this.flypayV2Button.setAttribute('aria-label', 'Pay with flypay');
|
|
8086
|
-
this.flypayV2Button.setAttribute('id',
|
|
8087
|
-
this.flypayV2Button.innerHTML = getFlypayV2Button();
|
|
8110
|
+
this.flypayV2Button.setAttribute('id', this.widgetId);
|
|
8111
|
+
this.flypayV2Button.innerHTML = getFlypayV2Button(this.widgetId);
|
|
8088
8112
|
return this.flypayV2Button;
|
|
8089
8113
|
}
|
|
8090
8114
|
}, {
|
|
@@ -8181,7 +8205,7 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
8181
8205
|
key: "initBackground",
|
|
8182
8206
|
value: function initBackground() {
|
|
8183
8207
|
var _this5 = this;
|
|
8184
|
-
var bg = new WalletBackground(this.link.getNetUrl() + FLYPAY_LOGO_LINK);
|
|
8208
|
+
var bg = new WalletBackground(this.link.getNetUrl() + FLYPAY_LOGO_LINK, false, false);
|
|
8185
8209
|
bg.setBackdropTitle("");
|
|
8186
8210
|
bg.setBackdropDescription("");
|
|
8187
8211
|
bg.onTrigger(TRIGGER$2.CLOSE, function () {
|
|
@@ -8190,6 +8214,9 @@ var FlypayV2WalletService = /*#__PURE__*/function (_WalletService) {
|
|
|
8190
8214
|
(_a = _this5.background) === null || _a === void 0 ? void 0 : _a.clear();
|
|
8191
8215
|
_this5.enable();
|
|
8192
8216
|
});
|
|
8217
|
+
bg.onTrigger(TRIGGER$2.FOCUS, function () {
|
|
8218
|
+
return _this5.checkout.open();
|
|
8219
|
+
});
|
|
8193
8220
|
return bg;
|
|
8194
8221
|
}
|
|
8195
8222
|
}]);
|
|
@@ -10420,5 +10447,5 @@ var HtmlWidget = /*#__PURE__*/function (_HtmlMultiWidget) {
|
|
|
10420
10447
|
}]);
|
|
10421
10448
|
}(HtmlMultiWidget);
|
|
10422
10449
|
|
|
10423
|
-
export { AfterpayCheckoutButton, Api, CHECKOUT_BUTTON_EVENT, Canvas3ds, Configuration, ELEMENT, EVENT$2 as EVENT, Builder$1 as ExternalCheckoutBuilder, Checker as ExternalCheckoutChecker, FORM_FIELD, HtmlMultiWidget, HtmlPaymentSourceWidget, HtmlWidget,
|
|
10450
|
+
export { AfterpayCheckoutButton, Api, CHECKOUT_BUTTON_EVENT, Canvas3ds, ClickToPay, Configuration, ELEMENT, EVENT$2 as EVENT, Builder$1 as ExternalCheckoutBuilder, Checker as ExternalCheckoutChecker, FORM_FIELD, HtmlMultiWidget, HtmlPaymentSourceWidget, HtmlWidget, MultiWidget, PAYMENT_TYPE, PURPOSE, Builder as PaymentSourceBuilder, PaymentSourceWidget, PaypalCheckoutButton, STYLABLE_ELEMENT, STYLABLE_ELEMENT_STATE, STYLE$2 as STYLE, SUPPORTED_CARD_TYPES, TEXT, TRIGGER$1 as TRIGGER, TYPE, VAULT_DISPLAY_STYLE, VaultDisplayWidget, WalletButtons, ZipmoneyCheckoutButton };
|
|
10424
10451
|
//# sourceMappingURL=index.mjs.map
|
package/bundles/index.mjs.d.ts
CHANGED
|
@@ -1676,7 +1676,7 @@ interface Customer {
|
|
|
1676
1676
|
first_name?: string;
|
|
1677
1677
|
last_name?: string;
|
|
1678
1678
|
}
|
|
1679
|
-
interface
|
|
1679
|
+
interface IClickToPayMeta extends IBaseSRCMeta {
|
|
1680
1680
|
dpa_data?: IBaseSRCMeta['dpa_data'] & {
|
|
1681
1681
|
dpa_address?: string;
|
|
1682
1682
|
dpa_email_address?: string;
|
|
@@ -1845,7 +1845,7 @@ declare abstract class SRC {
|
|
|
1845
1845
|
protected iframe_selector: string;
|
|
1846
1846
|
protected service_id: string;
|
|
1847
1847
|
protected public_key_or_access_token: string;
|
|
1848
|
-
protected meta:
|
|
1848
|
+
protected meta: IClickToPayMeta;
|
|
1849
1849
|
protected eventEmitter: EventEmitter;
|
|
1850
1850
|
protected env: string;
|
|
1851
1851
|
protected alias?: string;
|
|
@@ -1853,7 +1853,7 @@ declare abstract class SRC {
|
|
|
1853
1853
|
protected provider: SRCProvider;
|
|
1854
1854
|
protected autoResize: boolean;
|
|
1855
1855
|
protected style: IStyles;
|
|
1856
|
-
constructor(iframe_selector: string, service_id: string, public_key_or_access_token: string, meta:
|
|
1856
|
+
constructor(iframe_selector: string, service_id: string, public_key_or_access_token: string, meta: IClickToPayMeta);
|
|
1857
1857
|
/**
|
|
1858
1858
|
* Object contain styles for widget - call before `.load()`.
|
|
1859
1859
|
*
|
|
@@ -1923,28 +1923,28 @@ declare abstract class SRC {
|
|
|
1923
1923
|
}
|
|
1924
1924
|
|
|
1925
1925
|
/**
|
|
1926
|
-
* Class
|
|
1926
|
+
* Class ClickToPay include methods for interacting with the ClickToPay checkout and Manual Card option
|
|
1927
1927
|
*
|
|
1928
1928
|
* @extends SRC
|
|
1929
1929
|
*
|
|
1930
1930
|
* @constructor
|
|
1931
1931
|
*
|
|
1932
|
-
* @param {string} iframe_selector - Selector of html element. Container for
|
|
1932
|
+
* @param {string} iframe_selector - Selector of html element. Container for Click To Pay checkout iFrame.
|
|
1933
1933
|
* @param {string} service_id - Card Scheme Service ID
|
|
1934
1934
|
* @param {string} public_key_or_access_token - Paydock public key or Access Token
|
|
1935
|
-
* @param {
|
|
1935
|
+
* @param {IClickToPayMeta} meta - Data that configures the Click To Pay checkout
|
|
1936
1936
|
* @example
|
|
1937
|
-
* var mastercardSRC = new
|
|
1937
|
+
* var mastercardSRC = new ClickToPay('#checkoutIframe', 'service_id', 'public_key', {});
|
|
1938
1938
|
*
|
|
1939
1939
|
*/
|
|
1940
|
-
declare class
|
|
1940
|
+
declare class ClickToPay extends SRC {
|
|
1941
1941
|
protected iframe_selector: string;
|
|
1942
1942
|
protected service_id: string;
|
|
1943
1943
|
protected public_key_or_access_token: string;
|
|
1944
|
-
protected meta:
|
|
1945
|
-
/** @constructs */ constructor(iframe_selector: string, service_id: string, public_key_or_access_token: string, meta:
|
|
1944
|
+
protected meta: IClickToPayMeta;
|
|
1945
|
+
/** @constructs */ constructor(iframe_selector: string, service_id: string, public_key_or_access_token: string, meta: IClickToPayMeta);
|
|
1946
1946
|
/**
|
|
1947
|
-
* The final method after configuring the SRC to start the load process of
|
|
1947
|
+
* The final method after configuring the SRC to start the load process of Click To Pay checkout
|
|
1948
1948
|
*
|
|
1949
1949
|
*/
|
|
1950
1950
|
load(): void;
|
|
@@ -3203,4 +3203,4 @@ declare class HtmlWidget extends HtmlMultiWidget {
|
|
|
3203
3203
|
setGiftCardScheme(giftCardScheme: any, processingNetwork: any): void;
|
|
3204
3204
|
}
|
|
3205
3205
|
|
|
3206
|
-
export { AfterpayCheckoutButton, Api, CHECKOUT_BUTTON_EVENT, Canvas3ds, Configuration, ELEMENT, EVENT, Builder$1 as ExternalCheckoutBuilder, Checker as ExternalCheckoutChecker, FORM_FIELD, HtmlMultiWidget, HtmlPaymentSourceWidget, HtmlWidget, type ICheckout, type IDetails, type IElementStyleInput, type IEventCheckoutFinishData, type IPayPalMeta, type IStyles$1 as IStyles, type ITexts,
|
|
3206
|
+
export { AfterpayCheckoutButton, Api, CHECKOUT_BUTTON_EVENT, Canvas3ds, ClickToPay, Configuration, ELEMENT, EVENT, Builder$1 as ExternalCheckoutBuilder, Checker as ExternalCheckoutChecker, FORM_FIELD, HtmlMultiWidget, HtmlPaymentSourceWidget, HtmlWidget, type ICheckout, type IDetails, type IElementStyleInput, type IEventCheckoutFinishData, type IPayPalMeta, type IStyles$1 as IStyles, type ITexts, MultiWidget, PAYMENT_TYPE, PURPOSE, Builder as PaymentSourceBuilder, PaymentSourceWidget, PaypalCheckoutButton, STYLABLE_ELEMENT, STYLABLE_ELEMENT_STATE, STYLE, SUPPORTED_CARD_TYPES, TEXT, TRIGGER, TYPE, VAULT_DISPLAY_STYLE, type VaultDisplayStyle, VaultDisplayWidget, WalletButtons, ZipmoneyCheckoutButton };
|