@paydock/client-sdk 1.10.73 → 1.10.77

package/README.md

@@ -4872,7 +4872,7 @@ The final method to beginning, the load process of widget to html
 
 <dl>
 <dt><a href="#WalletButtons">WalletButtons</a></dt>
-<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay and Apple Pay via Stripe, Flypay, Paypal)</p>
+<dd><p>Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)</p>
 </dd>
 </dl>
 
@@ -4913,6 +4913,7 @@ Interface of data used by the wallet checkout and payment proccess.
 | [amount_label] | <code>string</code> | Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
 | [country] | <code>string</code> | Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal]. |
 | [pay_later] | <code>string</code> | Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets. |
+| [show_billing_address] | <code>boolean</code> | Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets. |
 | [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. |
@@ -4971,7 +4972,7 @@ Interface of Shipping Options for PayPal
 <a name="WalletButtons" id="WalletButtons"></a>
 
 ## WalletButtons
-Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay and Apple Pay via Stripe, Flypay, Paypal)
+Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
 
 **Kind**: global class  
 

package/bundles/widget.umd.js

@@ -5606,10 +5606,11 @@
               });
           };
           _this.onShippingMethodSelected = function (event) {
+              var _a, _b;
               _this.latestShippingData.shippingMethod = event.shippingMethod;
               var update = {
                   newTotal: {
-                      label: _this.meta.amount_label,
+                      label: _this.meta.amount_label || ((_b = (_a = _this.getMetaRawDataInitialization()) === null || _a === void 0 ? void 0 : _a.total) === null || _b === void 0 ? void 0 : _b.label),
                       amount: _this.meta.amount.toString(),
                       type: "final"
                   }
@@ -5659,6 +5660,30 @@
               var _a, _b, _c;
               return ((_c = (_b = (_a = this.meta) === null || _a === void 0 ? void 0 : _a.credentials) === null || _b === void 0 ? void 0 : _b[WALLET_TYPE.APPLE]) === null || _c === void 0 ? void 0 : _c.merchant) || '';
           }
+      }, {
+          key: "getMetaStyles",
+          value: function getMetaStyles() {
+              var _a, _b, _c;
+              if (((_a = this.meta) === null || _a === void 0 ? void 0 : _a.style) && _typeof((_b = this.meta) === null || _b === void 0 ? void 0 : _b.style) === 'object') {
+                  var metaStyles = JSON.parse(JSON.stringify((_c = this.meta) === null || _c === void 0 ? void 0 : _c.style));
+                  if ('google' in metaStyles) metaStyles === null || metaStyles === void 0 ? true : delete metaStyles.google; // to offer backward compatibility
+                  if ('apple' in metaStyles) return metaStyles === null || metaStyles === void 0 ? void 0 : metaStyles.apple;else return metaStyles; // to offer backward compatibility
+              } else {
+                  return null;
+              }
+          }
+      }, {
+          key: "getMetaRawDataInitialization",
+          value: function getMetaRawDataInitialization() {
+              var _a, _b, _c, _d;
+              if (((_a = this.meta) === null || _a === void 0 ? void 0 : _a.raw_data_initialization) && ((_b = this.meta) === null || _b === void 0 ? void 0 : _b.raw_data_initialization) && _typeof((_c = this.meta) === null || _c === void 0 ? void 0 : _c.raw_data_initialization) === 'object') {
+                  var metaRawDataInit = JSON.parse(JSON.stringify((_d = this.meta) === null || _d === void 0 ? void 0 : _d.raw_data_initialization));
+                  if ('google' in metaRawDataInit) metaRawDataInit === null || metaRawDataInit === void 0 ? true : delete metaRawDataInit.google; // to offer backward compatibility
+                  if ('apple' in metaRawDataInit) return metaRawDataInit === null || metaRawDataInit === void 0 ? void 0 : metaRawDataInit.apple;else return metaRawDataInit; // to offer backward compatibility
+              } else {
+                  return null;
+              }
+          }
       }, {
           key: "isShippingRequired",
           value: function isShippingRequired() {
@@ -5766,11 +5791,13 @@
           value: function createRequest() {
               // In case Merchants decide to use other values they should provide all ApplePayPaymentRequest fields at "meta.raw_data_initialization".
               // https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest
-              if (this.meta.raw_data_initialization) {
-                  this.meta.raw_data_initialization.total.amount = this.meta.amount.toString();
-                  if (this.isShippingRequired() && this.hasShippingOptions()) this.meta.raw_data_initialization.shippingMethods = this.formatShippingOptions(this.meta.shipping_options);
+              var _a;
+              var rawDataInitialization = this.getMetaRawDataInitialization();
+              if (rawDataInitialization && (typeof rawDataInitialization === "undefined" ? "undefined" : _typeof(rawDataInitialization)) === 'object') {
+                  if (_typeof(rawDataInitialization.total) === 'object') rawDataInitialization.total.amount = this.meta.amount.toString();else rawDataInitialization.total = { label: ((_a = this.meta) === null || _a === void 0 ? void 0 : _a.amount_label) || '', amount: this.meta.amount.toString() };
+                  if (this.isShippingRequired() && this.hasShippingOptions()) rawDataInitialization.shippingMethods = this.formatShippingOptions(this.meta.shipping_options);
               }
-              return this.meta.raw_data_initialization ? this.meta.raw_data_initialization : _extends(_extends({ countryCode: this.meta.country.toUpperCase(), currencyCode: this.meta.currency.toUpperCase(), merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"], supportedNetworks: ["visa", "masterCard", "amex", "discover"], requiredBillingContactFields: ["name", "postalAddress"] }, this.isShippingRequired() && _extends({ requiredShippingContactFields: ["postalAddress", "name", "phone", "email"] }, this.hasShippingOptions() && {
+              return rawDataInitialization || _extends(_extends(_extends({ countryCode: this.meta.country.toUpperCase(), currencyCode: this.meta.currency.toUpperCase(), merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"], supportedNetworks: ["visa", "masterCard", "amex", "discover"] }, this.meta.show_billing_address && { requiredBillingContactFields: ["name", "postalAddress"] }), this.isShippingRequired() && _extends({ requiredShippingContactFields: ["postalAddress", "name", "phone", "email"] }, this.hasShippingOptions() && {
                   shippingMethods: this.formatShippingOptions(this.meta.shipping_options)
               })), { total: {
                       label: this.meta.amount_label,
@@ -5798,8 +5825,8 @@
       }, {
           key: "createButtonStyle",
           value: function createButtonStyle() {
-              var _a, _b, _c, _d;
-              return "\n            .paydock-apple-container {\n                width: 100%;\n                height: 40px;\n            }\n\n            @supports (-webkit-appearance: -apple-pay-button) {\n                .apple-pay-button {\n                    display: inline-block;\n                    -webkit-appearance: -apple-pay-button;\n                    -apple-pay-button-type: " + (((_b = (_a = this.meta) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.button_type) || 'plain') + "\n                }\n                .apple-pay-button-black {\n                    -apple-pay-button-style: black;\n                }\n                .apple-pay-button-white {\n                    -apple-pay-button-style: white;\n                }\n                .apple-pay-button-white-with-line {\n                    -apple-pay-button-style: white-outline;\n                }\n            }\n\n            @supports not (-webkit-appearance: -apple-pay-button) {\n                .apple-pay-button {\n                    display: inline-block;\n                    background-size: 100% 60%;\n                    background-repeat: no-repeat;\n                    background-position: 50% 50%;\n                    border-radius: 5px;\n                    padding: 0px;\n                    box-sizing: border-box;\n                    min-width: 200px;\n                    min-height: 32px;\n                    max-height: 64px;\n                    -apple-pay-button-type: " + (((_d = (_c = this.meta) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.button_type) || 'plain') + "\n                }\n                .apple-pay-button-black {\n                    background-image: -webkit-named-image(apple-pay-logo-white);\n                    background-color: black;\n                }\n                .apple-pay-button-white {\n                    background-image: -webkit-named-image(apple-pay-logo-black);\n                    background-color: white;\n                }\n                .apple-pay-button-white-with-line {\n                    background-image: -webkit-named-image(apple-pay-logo-black);\n                    background-color: white;\n                    border: .5px solid black;\n                }\n            }\n        ";
+              var _a, _b;
+              return "\n            .paydock-apple-container {\n                width: 100%;\n                height: 40px;\n            }\n\n            @supports (-webkit-appearance: -apple-pay-button) {\n                .apple-pay-button {\n                    display: inline-block;\n                    -webkit-appearance: -apple-pay-button;\n                    -apple-pay-button-type: " + (((_a = this.getMetaStyles()) === null || _a === void 0 ? void 0 : _a.button_type) || 'plain') + "\n                }\n                .apple-pay-button-black {\n                    -apple-pay-button-style: black;\n                }\n                .apple-pay-button-white {\n                    -apple-pay-button-style: white;\n                }\n                .apple-pay-button-white-with-line {\n                    -apple-pay-button-style: white-outline;\n                }\n            }\n\n            @supports not (-webkit-appearance: -apple-pay-button) {\n                .apple-pay-button {\n                    display: inline-block;\n                    background-size: 100% 60%;\n                    background-repeat: no-repeat;\n                    background-position: 50% 50%;\n                    border-radius: 5px;\n                    padding: 0px;\n                    box-sizing: border-box;\n                    min-width: 200px;\n                    min-height: 32px;\n                    max-height: 64px;\n                    -apple-pay-button-type: " + (((_b = this.getMetaStyles()) === null || _b === void 0 ? void 0 : _b.button_type) || 'plain') + "\n                }\n                .apple-pay-button-black {\n                    background-image: -webkit-named-image(apple-pay-logo-white);\n                    background-color: black;\n                }\n                .apple-pay-button-white {\n                    background-image: -webkit-named-image(apple-pay-logo-black);\n                    background-color: white;\n                }\n                .apple-pay-button-white-with-line {\n                    background-image: -webkit-named-image(apple-pay-logo-black);\n                    background-color: white;\n                    border: .5px solid black;\n                }\n            }\n        ";
           }
       }]);
       return AppleWalletService;
@@ -5858,6 +5885,18 @@
               var _a, _b, _c;
               return (_c = (_b = (_a = this.meta) === null || _a === void 0 ? void 0 : _a.credentials) === null || _b === void 0 ? void 0 : _b[WALLET_TYPE.GOOGLE]) === null || _c === void 0 ? void 0 : _c.merchant;
           }
+      }, {
+          key: "getMetaStyles",
+          value: function getMetaStyles() {
+              var _a, _b, _c, _d;
+              if (_typeof((_a = this.meta) === null || _a === void 0 ? void 0 : _a.style) === 'object' && 'google' in ((_b = this.meta) === null || _b === void 0 ? void 0 : _b.style)) return (_d = (_c = this.meta) === null || _c === void 0 ? void 0 : _c.style) === null || _d === void 0 ? void 0 : _d.google;else return null;
+          }
+      }, {
+          key: "getMetaRawDataInitialization",
+          value: function getMetaRawDataInitialization() {
+              var _a, _b, _c, _d, _e;
+              if (((_a = this.meta) === null || _a === void 0 ? void 0 : _a.raw_data_initialization) && _typeof((_b = this.meta) === null || _b === void 0 ? void 0 : _b.raw_data_initialization) === 'object' && 'google' in ((_c = this.meta) === null || _c === void 0 ? void 0 : _c.raw_data_initialization)) return (_e = (_d = this.meta) === null || _d === void 0 ? void 0 : _d.raw_data_initialization) === null || _e === void 0 ? void 0 : _e.google;else return null;
+          }
       }, {
           key: "isShippingRequired",
           value: function isShippingRequired() {
@@ -5956,11 +5995,14 @@
           value: function mount(container) {
               var _this3 = this;
 
+              var _a, _b, _c;
               container.getElement().appendChild(this.paymentsClient.createButton({
-                  buttonSizeMode: "fill",
                   onClick: function onClick() {
                       return _this3.loadPaymentData();
-                  }
+                  },
+                  buttonType: ((_a = this.getMetaStyles()) === null || _a === void 0 ? void 0 : _a.button_type) || 'pay',
+                  buttonSizeMode: ((_b = this.getMetaStyles()) === null || _b === void 0 ? void 0 : _b.button_size_mode) || "fill",
+                  buttonColor: ((_c = this.getMetaStyles()) === null || _c === void 0 ? void 0 : _c.button_color) || "default"
               }));
           }
       }, {
@@ -6033,7 +6075,8 @@
               return {
                   apiVersion: 2,
                   apiVersionMinor: 0,
-                  allowedPaymentMethods: [this.createCardData()]
+                  allowedPaymentMethods: [this.createCardData()],
+                  existingPaymentMethodRequired: true
               };
           }
       }, {
@@ -6069,12 +6112,13 @@
       }, {
           key: "createCardData",
           value: function createCardData() {
-              return {
-                  // TODO: Add raw_data_initialization as in ApplePay
+              var rawDataInitialization = this.getMetaRawDataInitialization();
+              return rawDataInitialization || {
                   type: "CARD",
                   parameters: {
                       allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
-                      allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"]
+                      allowedCardNetworks: ["AMEX", "DISCOVER", "INTERAC", "JCB", "MASTERCARD", "VISA"],
+                      billingAddressRequired: !!this.meta.show_billing_address
                   }
               };
           }
@@ -6358,6 +6402,7 @@
    * @param {string} [amount_label] Label shown next to the total amount to be paid. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal].
    * @param {string} [country] Country of the user. 2 letter ISO code format. Required for [Stripe, ApplePay, GooglePay]. N/A for [FlyPay, PayPal].
    * @param {string} [pay_later] Used to enable Pay Later feature in PayPal Smart Checkout WalletButton integration when available. Optional for [PayPal]. N/A for other wallets.
+   * @param {boolean} [show_billing_address] Used to hide/show the billing address on ApplePay and GooglePay popups. Default value is false. Optional for [ApplePay, GooglePay]. N/A for other wallets.
    * @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.
@@ -6402,7 +6447,7 @@
    * @param {string} [type] Type of the Shipping Option. Values can be 'SHIPPING' or 'PICKUP'. Required.
    */
   /**
-   * Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay and Apple Pay via Stripe, Flypay, Paypal)
+   * Class WalletButtons to work with different E-Wallets within html (currently supports Apple Pay, Google Pay™ and Apple Pay via Stripe, Flypay, Paypal)
    * @constructor
    *
    * @example