@paydock/client-sdk 1.10.39-beta → 1.10.43-beta

package/README.md

@@ -4825,6 +4825,8 @@ Interface of data used by the wallet checkout and payment proccess.
 | [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. |
 | [request_shipping] | <code>boolean</code> | Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay]. N/A for [Stripe]. |
+| [shipping_options] | <code>array</code> | Used to provide available shipping options. Optional for [ApplePay]. N/A for the other wallets. |
+| [raw_data_initialization] | <code>object</code> | Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets. |
 | [style] | <code>object</code> | Used to style PayPal buttons, check possible values at https://developer.paypal.com/docs/business/checkout/reference/style-guide. Also used at ApplePay to select button type. Optional for [PayPal, ApplePay]. N/A for [Stripe, FlyPay]. |
 | [style.button_type] | <code>object</code> | Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Optional for [ApplePay]. N/A for other wallets. |
 | [wallets] | <code>array</code> | By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe]. N/A for other wallets. |
@@ -4886,7 +4888,7 @@ var button = new WalletButtons(
 
 ### walletButtons.update()
 Triggers the update process of the wallet, if available.
-Currently supported by Flypay and Paypal Wallets.
+Currently supported by Flypay, Paypal and ApplePay via MPGS Wallets.
 
 **Kind**: instance method of [<code>WalletButtons</code>](#WalletButtons)  
 **Example**  
@@ -4904,6 +4906,42 @@ var button = new WalletButtons(
      button.update({ success: true });
  });
 ```
+**Example**  
+```js
+// ApplePay via MPGS example:
+var button = new WalletButtons(
+     '#buttons',
+     token,
+     {
+         amount_label: 'Total',
+         country: 'AU',
+         ...
+     }
+ );
+ button.on('update', (data) => {
+     updateChargeAmountInBackend(data);
+     button.update({
+        success: true,
+        body: {
+             amount: 15,
+             shipping_options: [
+                  {
+                     id: "NEW-FreeShip",
+                      label: "NEW - Free Shipping",
+                      detail: "Arrives in 3 to 5 days",
+                      amount: "0.00"
+                  },
+                  {
+                      id: "NEW - FastShip",
+                      label: "NEW - Fast Shipping",
+                      detail: "Arrives in less than 1 day",
+                      amount: "10.00"
+                  }
+              ]
+         }
+      });
+ });
+```
 <a name="WalletButtons+setEnv" id="WalletButtons+setEnv"></a>
 
 ### walletButtons.setEnv(env, [alias])
@@ -5210,7 +5248,7 @@ button.close();
 
 ### Performing actions when shipping info is updated
 
-In Flypay and Paypal integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information (plus selected shipping method for Paypal). Merchants should handle this callback, recalculate shipping costs in their server by analyzing the new data, and submit a backend to backend request to `POST charges/:id` with the new total amount and shipping amount (you can find the documentation of this call in the PayDock API documentation).
+In Flypay, Paypal and ApplePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information (plus selected shipping method for Paypal). Merchants should handle this callback, recalculate shipping costs in their server by analyzing the new data, and submit a backend to backend request to `POST charges/:id` with the new total amount and shipping amount (you can find the documentation of this call in the PayDock API documentation).
 
 For Paypal integration specifically, if shipping is enabled for the wallet button and different shipping methods were provided in the create wallet charge call, Merchants must ensure that the posted `shipping.amount` to `POST charges/:id` matches the selected shipping option amount (value sent in when initializing the wallet charge). In other words, when providing shipping methods the shipping amount is bound to being one of the provided shipping method amount necessarily. Bear in mind that the total charge amount must include the `shipping.amount`, since it represents the full amount to be charged to the customer.
 
@@ -5224,6 +5262,35 @@ button.onUpdate((data) => {
 });
 ```
 
+For ApplePay via MPGS integration specifically, you must return the new `amount` and new `shipping_options` If new options are needed based on the updated shipping data. Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information (address_country, address_city, address_state, address_postcode), this data can be used to recalculate the amount and new shipping options. (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact)
+
+```javascript
+button.onUpdate((data) => {
+    console.log("Updating amount via a backend to backend call to POST charges/:id");
+	// call `POST charges/:id` to modify charge
+	button.update({
+        success: true,
+        body: {
+            amount: 15,
+            shipping_options: [
+                {
+                    id: "NEW-FreeShip",
+                    label: "NEW - Free Shipping",
+                    detail: "Arrives in 3 to 5 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "NEW - FastShip",
+                    label: "NEW - Fast Shipping",
+                    detail: "Arrives in less than 1 day",
+                    amount: "10.00"
+                }
+            ]
+        }
+    });
+});
+```
+
 ### Performing actions after the payment is completed
 
 After the payment is completed, the onPaymentSuccessful(data) will be called if the payment was successful. If the payment was not successful, the function onPaymentError(data) will be called. If fraud check is active for the gateway, a fraud body was sent in the wallet charge initialize call and the fraud service left the charge in review, then the onPaymentInReview(data) will be called.
@@ -5371,7 +5438,7 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 ```
 
 This example shows how to use these functions for **ApplePay via MPGS**:
-_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `request_shipping`, `style.button_type`)_
+_(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `raw_data_initialization`, `request_shipping`, `style.button_type`)_
 ### Full example
 
 ```html
@@ -5393,10 +5460,89 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `re
         {
             amount_label: "Total",
             country: 'DE',
-            request_shipping: false,
+            request_shipping: true,
             style: {
                 button_type: 'buy',
-            }
+            },
+            shipping_options: [
+                {
+                    id: "FreeShip",
+                    label: "Free Shipping",
+                    detail: "Arrives in 5 to 7 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "FastShip",
+                    label: "Fast Shipping",
+                    detail: "Arrives in 1 day",
+                    amount: "10.00"
+                }
+            ]
+        }
+    );
+    button.setEnv('sandbox');
+    button.onUnavailable(() => console.log("No wallet buttons available"));
+    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
+    button.onPaymentError((data) => console.log("The payment was not successful"));
+    button.load();
+</script>
+</html>
+```
+
+Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest` with your own values instead of using the default ones. Below you can see an example on how to initialize the `ApplePayPaymentRequest` with the `raw_data_initialization` meta field:
+
+### Raw data initialization example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock Wallet Button!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://app-sandbox.paydock.com/v1/widget.umd.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+        "#widget",
+        charge_token,
+        {
+            raw_data_initialization: {
+                countryCode: "AU",
+                currencyCode: "AUD",
+                merchantCapabilities: ["supports3DS","supportsCredit","supportsDebit"],
+                supportedNetworks: ["visa","masterCard","amex","discover"],
+                requiredBillingContactFields: ["name","postalAddress"],
+                requiredShippingContactFields:["postalAddress","name","phone","email" ],
+                total: {
+                    label: "Total",
+                    amount: "10",
+                    type: "final",
+                }
+            },
+            amount_label: "Total",
+            country: 'DE',
+            request_shipping: true,
+            style: {
+                button_type: 'buy',
+            },
+            shipping_options: [
+                {
+                    id: "FreeShip",
+                    label: "Free Shipping",
+                    detail: "Arrives in 5 to 7 days",
+                    amount: "0.00"
+                },
+                {
+                    id: "FastShip",
+                    label: "Fast Shipping",
+                    detail: "Arrives in 1 day",
+                    amount: "10.00"
+                }
+            ]
         }
     );
     button.setEnv('sandbox');

package/bundles/widget.umd.js

@@ -5536,12 +5536,11 @@
           _this.onPaymentAuthorized = function (event) {
               var _event$payment = event.payment,
                   token = _event$payment.token,
-                  billingContact = _event$payment.billingContact;
+                  billingContact = _event$payment.billingContact,
+                  shippingContact = _event$payment.shippingContact;
 
               _this.eventEmitter.emit(WALLET_EVENT.PAYMENT_METHOD_SELECTED, {
-                  data: {
-                      payment_method_id: token.paymentData ? JSON.stringify(token.paymentData) : '',
-                      customer: {
+                  data: _extends({ customer: {
                           payment_source: {
                               card_name: token.paymentMethod.displayName,
                               type: token.paymentMethod.type,
@@ -5551,10 +5550,27 @@
                               address_country: billingContact === null || billingContact === void 0 ? void 0 : billingContact.countryCode,
                               address_city: billingContact === null || billingContact === void 0 ? void 0 : billingContact.locality,
                               address_postcode: billingContact === null || billingContact === void 0 ? void 0 : billingContact.postalCode,
-                              address_state: billingContact === null || billingContact === void 0 ? void 0 : billingContact.administrativeArea
+                              address_state: billingContact === null || billingContact === void 0 ? void 0 : billingContact.administrativeArea,
+                              ref_token: token.paymentData ? JSON.stringify(token.paymentData) : ''
+                          }
+                      } }, _this.meta.request_shipping && shippingContact && {
+                      shipping: {
+                          method: _this.selectedShippingMethodId,
+                          options: _this.meta.shipping_options,
+                          address_line1: shippingContact.addressLines[0],
+                          address_line2: shippingContact.addressLines[1],
+                          address_country: shippingContact.countryCode,
+                          address_city: shippingContact.locality,
+                          address_postcode: shippingContact.postalCode,
+                          address_state: shippingContact.administrativeArea,
+                          contact: {
+                              first_name: shippingContact.givenName,
+                              last_name: shippingContact.familyName,
+                              email: shippingContact.emailAddress,
+                              phone: shippingContact.phoneNumber
                           }
                       }
-                  },
+                  }),
                   onSuccess: function onSuccess() {
                       return _this.paymentSession.completePayment(ApplePaySession.STATUS_SUCCESS);
                   },
@@ -5563,6 +5579,51 @@
                   }
               });
           };
+          _this.onShippingContactSelected = function (event) {
+              var parsedCallbackData = _this.parseUpdateData(event.shippingContact);
+              _this.eventEmitter.emit(WALLET_EVENT.UPDATE, parsedCallbackData);
+              var update = _extends({ newTotal: {
+                      label: _this.meta.amount_label,
+                      amount: _this.meta.amount.toString(),
+                      type: "final"
+                  } }, _this.meta.request_shipping && _this.meta.shipping_options && {
+                  newShippingMethods: _this.formatShippingOptions(_this.meta.shipping_options)
+              });
+              _this.paymentSession.completeShippingContactSelection(update);
+          };
+          _this.onShippingMethodSelected = function (event) {
+              _this.selectedShippingMethodId = event.shippingMethod.identifier;
+              var update = {
+                  newTotal: {
+                      label: _this.meta.amount_label,
+                      amount: _this.meta.amount.toString(),
+                      type: "final"
+                  }
+              };
+              _this.paymentSession.completeShippingMethodSelection(update);
+          };
+          _this.parseUpdateData = function (data) {
+              // From Apple docs (https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypayment/1916097-shippingcontact):
+              // Before the user authorizes the transaction with Touch ID, Face ID, or passcode, you receive redacted address information
+              return {
+                  shipping: {
+                      address_city: data.locality,
+                      address_state: data.administrativeArea,
+                      address_postcode: data.postalCode,
+                      address_country: data.countryCode
+                  }
+              };
+          };
+          _this.formatShippingOptions = function (shipping_options) {
+              return shipping_options.map(function (o) {
+                  return {
+                      identifier: o.id,
+                      label: o.label,
+                      detail: (o === null || o === void 0 ? void 0 : o.detail) || '',
+                      amount: o.amount
+                  };
+              });
+          };
           _this.eventEmitter = eventEmitter;
           return _this;
       }
@@ -5589,17 +5650,25 @@
                   return;
               }
               return this.checkAvailability().then(function (available) {
+                  var _a;
                   if (!available) {
                       _this2.eventEmitter.emit(WALLET_EVENT.UNAVAILABLE, { event: WALLET_EVENT.UNAVAILABLE, data: { wallet: WALLET_TYPE.APPLE } });
                       return;
                   }
+                  // Store default shipping option
+                  if (_this2.meta.request_shipping && _this2.meta.shipping_options) _this2.selectedShippingMethodId = (_a = _this2.meta.shipping_options[0]) === null || _a === void 0 ? void 0 : _a.id;
                   _this2.mount(container);
               }).catch(function (err) {
                   return console.error("Error checking ApplePay availability", err);
               });
           }
-          // public update(data: IWalletServiceUpdate) {}
-
+      }, {
+          key: "update",
+          value: function update(data) {
+              var _a, _b;
+              if ((_a = data === null || data === void 0 ? void 0 : data.body) === null || _a === void 0 ? void 0 : _a.amount) this.meta.amount = data.body.amount;
+              if ((_b = data === null || data === void 0 ? void 0 : data.body) === null || _b === void 0 ? void 0 : _b.shipping_options) this.meta.shipping_options = data.body.shipping_options;
+          }
       }, {
           key: "checkAvailability",
           value: function checkAvailability() {
@@ -5637,36 +5706,26 @@
               this.paymentSession = new ApplePaySession(3, this.createRequest());
               this.paymentSession.onvalidatemerchant = this.onValidateMerchant;
               this.paymentSession.onpaymentauthorized = this.onPaymentAuthorized;
-              // Shipping not included for now
-              // this.paymentSession.onshippingcontactselected = this.onShippingContactSelected;
-              // this.paymentSession.onshippingmethodselected = this.onShippingMethodSelected;
+              this.paymentSession.onshippingcontactselected = this.onShippingContactSelected;
+              this.paymentSession.onshippingmethodselected = this.onShippingMethodSelected;
               this.paymentSession.begin();
           }
       }, {
           key: "createRequest",
           value: function createRequest() {
-              return {
-                  countryCode: this.meta.country.toUpperCase(),
-                  currencyCode: this.meta.currency.toUpperCase(),
-                  merchantCapabilities: ["supports3DS", "supportsCredit", "supportsDebit"],
-                  supportedNetworks: ["visa", "masterCard", "amex", "discover"],
-                  requiredBillingContactFields: ["name", "postalAddress"],
-                  // Shipping not included for now
-                  // requiredShippingContactFields:["postalAddress","name","phone","email" ],
-                  // ...(this.meta.shipping_options && {
-                  //     shippingMethods: this.meta.shipping_options.map(o => ({
-                  //         identifier: o.id,
-                  //         label: o.label,
-                  //         detail: o?.detail || '',
-                  //         amount: o.amount,
-                  //     }))
-                  // }),
-                  total: {
+              // 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.meta.request_shipping && this.meta.shipping_options) this.meta.raw_data_initialization.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.meta.request_shipping && _extends({ requiredShippingContactFields: ["postalAddress", "name", "phone", "email"] }, this.meta.shipping_options && {
+                  shippingMethods: this.formatShippingOptions(this.meta.shipping_options)
+              })), { total: {
                       label: this.meta.amount_label,
                       amount: this.meta.amount.toString(),
                       type: "final"
-                  }
-              };
+                  } });
           }
       }, {
           key: "getMerchantSession",
@@ -5675,11 +5734,7 @@
 
               return new Promise(function (resolve, reject) {
                   return _this5.eventEmitter.emit(WALLET_EVENT.CALLBACK, {
-                      data: {
-                          request_type: "CREATE_SESSION",
-                          wallet_type: WALLET_TYPE.APPLE,
-                          session_id: window.location.hostname
-                      },
+                      data: _extends({ request_type: "CREATE_SESSION", wallet_type: WALLET_TYPE.APPLE, session_id: window.location.hostname }, _this5.meta.request_shipping && { request_shipping: _this5.meta.request_shipping }),
                       onSuccess: function onSuccess(res) {
                           return resolve(res);
                       },
@@ -5718,6 +5773,13 @@
           value: function getGatewayName() {
               return WALLET_GATEWAY.MASTERCARD;
           }
+      }, {
+          key: "update",
+          value: function update(data) {
+              this.childWallets.forEach(function (child) {
+                  return child.update(data);
+              });
+          }
       }]);
       return MastercardWalletService;
   }(WalletService);
@@ -5947,6 +6009,8 @@
    * @param {boolean} [request_payer_email] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
    * @param {boolean} [request_payer_phone] Used mainly for fraud purposes - recommended set to true. Optional for [Stripe]. N/A for other wallets.
    * @param {boolean} [request_shipping] Used to request or not shipping address in the Wallet checkout, being able to handle amount changes via the `update` event. Optional for [FlyPay, PayPal, ApplePay]. N/A for [Stripe].
+   * @param {array} [shipping_options] Used to provide available shipping options. Optional for [ApplePay]. N/A for the other wallets.
+   * @param {object} [raw_data_initialization] Used to provide values to initialize wallet with raw data. Optional for [ApplePay]. N/A for the other wallets.
    * @param {object} [style] Used to style PayPal buttons, check possible values at https://developer.paypal.com/docs/business/checkout/reference/style-guide. Also used at ApplePay to select button type. Optional for [PayPal, ApplePay]. N/A for [Stripe, FlyPay].
    * @param {object} [style.button_type] Used to select ApplePay button type (e.g: 'buy','donate', etc), check possible values at https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css. Optional for [ApplePay]. N/A for other wallets.
    * @param {array} [wallets] By default if this is not sent or empty, we will try to show either Apple Pay or Google Pay buttons. This can be limited sending the following array in this field: ['apple','google]. Optional for [Stripe]. N/A for other wallets.
@@ -6018,7 +6082,7 @@
           }
           /**
            * Triggers the update process of the wallet, if available.
-           * Currently supported by Flypay and Paypal Wallets.
+           * Currently supported by Flypay, Paypal and ApplePay via MPGS Wallets.
            *
            * @example
            * var button = new WalletButtons(
@@ -6033,6 +6097,41 @@
            *      updateChargeAmountInBackend(data);
            *      button.update({ success: true });
            *  });
+           *
+           * @example
+           * // ApplePay via MPGS example:
+           * var button = new WalletButtons(
+           *      '#buttons',
+           *      token,
+           *      {
+           *          amount_label: 'Total',
+           *          country: 'AU',
+           *          ...
+           *      }
+           *  );
+           *  button.on('update', (data) => {
+           *      updateChargeAmountInBackend(data);
+           *      button.update({
+           *         success: true,
+           *         body: {
+           *              amount: 15,
+           *              shipping_options: [
+           *                   {
+           *                      id: "NEW-FreeShip",
+           *                       label: "NEW - Free Shipping",
+           *                       detail: "Arrives in 3 to 5 days",
+           *                       amount: "0.00"
+           *                   },
+           *                   {
+           *                       id: "NEW - FastShip",
+           *                       label: "NEW - Fast Shipping",
+           *                       detail: "Arrives in less than 1 day",
+           *                       amount: "10.00"
+           *                   }
+           *               ]
+           *          }
+           *       });
+           *  });
            */
 
       }, {