@paydock/client-sdk 1.10.73-beta → 1.10.77-beta

package/README.md

@@ -4603,10 +4603,42 @@ After you initialized the 3ds charge via `v1/charges/standalone-3ds` API endpoin
 </html>
 ```
 
-**The chargeAuthSuccess event is executed both for frictionless flow, or for challenge flow after the customer has correctly authenticated with the bank using whatever challenge imposed.**
-**The chargeAuthChallenge event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank)**
-**The chargeAuthDecoupled event is sent when the flow is a decoupled challenge, alongside a `data.result.description` field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a chargeAuthSuccess or chargeAuthReject event**
-**The error event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted**
+The chargeAuthSuccess event is executed both for frictionless flow, or for challenge flow after the customer has correctly authenticated with the bank using whatever challenge imposed.
+The chargeAuthChallenge event is sent before starting a challenge flow (i.e. opening an IFrame for the customer to complete a challenge with ther bank)
+The chargeAuthDecoupled event is sent when the flow is a decoupled challenge, alongside a `data.result.description` field that you must show to the customer, indicating the method the user must use to authenticate. For example this may happen by having the cardholder authenticating directly with their banking app through biometrics. Once the end customer does this, the Canvas3ds will be able to recognize the challenge result is ready and will either produce a chargeAuthSuccess or chargeAuthReject event
+The error event is sent if an unexpected issue with the client library occurs. In such scenarios, you should consider the autentication process as interrupted
+
+### Event and Values
+
+| Event Value         | Type                | Description                                                    |
+| ------------------- | ------------------- | -------------------------------------------------------------- |
+| chargeAuthSuccess   | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| chargeAuthReject    | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse)       |
+| chargeAuthChallenge | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse)       |
+| chargeAuthDecoupled | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse)       |
+| error               | <code>object</code> | Instance of [chargeError](#cb_chargeError)                     |
+
+## Response Values
+
+<a name="cb_chargeEventResponse" id="cb_chargeEventResponse"></a>
+
+### ChargeEventResponse
+
+| Param                           | Type                           | Description                                                                                        |
+| ------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------- |
+| status                          | <code>string</code>            | status for the event transaction                                                                   |
+| charge_3ds_id                   | <code>string</code>            | Universal unique transaction identifier to identify the transaction                                |
+| <code>result.description</code> | <code>string</code> [Optional] | field that you must show to the customer, indicating the method the user must use to authenticate. |
+
+### ChargeError
+
+<a name="cb_chargeError" id="cb_chargeError"></a>
+
+| Param         | Type                | Description                                                         |
+| ------------- | ------------------- | ------------------------------------------------------------------- |
+| error         | <code>object</code> | error response                                                      |
+| charge_3ds_id | <code>string</code> | Universal unique transaction identifier to identify the transaction |
+
 
 ## Vault Display Widget
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)
@@ -4881,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. |

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.