npm - @paydock/client-sdk - Versions diffs - 1.94.22 → 1.100.0 - Mend

@paydock/client-sdk 1.94.22 → 1.100.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/.nvmrc +1 -0
package/README.md +189 -73
package/bundles/widget.umd.js +8847 -7218
package/bundles/widget.umd.min.js +1 -1
package/lib/components/param.d.ts +5 -0
package/lib/components/param.js +2 -0
package/lib/components/param.js.map +1 -1
package/lib/configs/env/env.d.ts +0 -1
package/lib/configs/env/env.js +0 -3
package/lib/configs/env/env.js.map +1 -1
package/lib/configs/sdk.js +1 -1
package/lib/wallet-buttons/flypay-v2.wallet-service.d.ts +20 -0
package/lib/wallet-buttons/flypay-v2.wallet-service.js +185 -0
package/lib/wallet-buttons/flypay-v2.wallet-service.js.map +1 -0
package/lib/wallet-buttons/google.wallet-service.js +11 -8
package/lib/wallet-buttons/google.wallet-service.js.map +1 -1
package/lib/wallet-buttons/interfaces.d.ts +10 -10
package/lib/wallet-buttons/paypal.wallet-service.d.ts +3 -0
package/lib/wallet-buttons/paypal.wallet-service.js +82 -41
package/lib/wallet-buttons/paypal.wallet-service.js.map +1 -1
package/lib/wallet-buttons/wallet-buttons.d.ts +10 -7
package/lib/wallet-buttons/wallet-buttons.js +14 -7
package/lib/wallet-buttons/wallet-buttons.js.map +1 -1
package/package.json +20 -19
package/slate.md +180 -65
package/typings/globals/@auspayplus/open-payments-checkout/index.d.ts +41 -0
package/typings/index.d.ts +1 -0

package/slate.md CHANGED Viewed

@@ -237,7 +237,7 @@ This example shows how you can use a lot of other methods to settings your form
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#payment-sources-simple-example)
 This widget provides a list of previously added (saved) payment-sources by customer_id or reference.
-The widget provides an opportunity to use events to track the process of selecting payment-sources and provide meta information about the payment-sources.
+The widget provides an opportunity to use events to track the process of selecting payment-sources and provide meta information about the payment-sources.
 Payment-source requires a query_token that represents a pre-generated and secure token for limiting the list
 payment-sources, for a specific user or reference.
@@ -266,7 +266,7 @@ list.load();
 // ES2015 | TypeScript
 import { HtmlPaymentSourceWidget } from '@paydock/client-sdk/payment-source-widget';
 var list = new HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
 list.load();
 ```
@@ -274,7 +274,7 @@ list.load();
 Then write only need 2 lines of code in js to initialize widget
-### Full example
+### Full example
 ```html
 <!DOCTYPE html>
@@ -286,7 +286,7 @@ Then write only need 2 lines of code in js to initialize widget
 </head>
 <body>
     <div id="list"></div>
-    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
         list.load();
@@ -326,9 +326,9 @@ list.on('select', function(data) {
 });
 ```
-This example shows how you can use a lot of other methods to settings your form
+This example shows how you can use a lot of other methods to settings your form
-### Full example
+### Full example
 ```html
 <!DOCTYPE html>
@@ -341,7 +341,7 @@ This example shows how you can use a lot of other methods to settings your form
 <body>
     <div id="list"></div>
     <input type="text" name="ps_id" />
-    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
     <script>
         var list = new paydock.HtmlPaymentSourceWidget('#list', 'publicKey', 'queryToken');
         list.filterByTypes(['card', 'checkout']);
@@ -351,9 +351,9 @@ This example shows how you can use a lot of other methods to settings your form
         list.setStyles({
             icon_size: 'small'
         });
         list.load();
         list.onSelectInsert('input[name="ps_id"]', 'payment_source_id');
         list.on('select', function(data) {
             console.log(data);
@@ -1058,7 +1058,7 @@ This example shows how you can use a lot of other methods to settings your form
 You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#wallet-buttons-simple-example)
 Wallet Buttons allow you to easily integrate different E-Wallets into your checkout.
-Currently supports ApplePay, Google Pay, Google Pay and Apple Pay via Stripe, Flypay checkout, Paypal Smart Buttons Checkout and Afterpay.
+Currently supports ApplePay, Google Pay, Google Pay and Apple Pay via Stripe, Flypay and Flypay V2 checkout, Paypal Smart Buttons Checkout and Afterpay.
 If available in your client environment, you will display a simple button that upon clicking it the user will follow the standard flow for the appropriate Wallet. If not available an event will be raised and no button will be displayed.
@@ -1103,7 +1103,7 @@ var button = new WalletButtons(
 button.load();
 ```
-Flypay and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
+Flypay, Flypay V2 and Paypal wallets do not require any meta sent to the wallet, so the following is enough for initialization:
 ```javascript
 let button = new paydock.WalletButtons(
     "#widget",
@@ -1208,7 +1208,7 @@ button.close();
 ### Performing actions when shipping info is updated
-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).
+In Flypay, Paypal, ApplePay via MPGS and GooglePay via MPGS integrations after each shipping info update the `onUpdate(data)` will be called with the selected shipping address information, plus selected shipping method when applicable for Paypal, ApplePay and GooglePay. 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.
@@ -1217,18 +1217,18 @@ After analyzing the new shipping information, and making the post with the updat
 ```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 });
+     // call `POST charges/:id` to modify charge
+     button.update({ success: true });
 });
 ```
-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)
+For ApplePay via MPGS and GooglePay via MPGS integrations, you can also return a new `amount` and new `shipping_options` in case new options are needed based on the updated shipping data. Before the user authorizes the transaction, you receive redacted address information (address_country, address_city, address_state, address_postcode), and this data can be used to recalculate the new amount and new shipping options.
 ```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({
+     // call `POST charges/:id` to modify charge
+     button.update({
         success: true,
         body: {
             amount: 15,
@@ -1240,7 +1240,7 @@ button.onUpdate((data) => {
                     amount: "0.00"
                 },
                 {
-                    id: "NEW - FastShip",
+                    id: "NEW-FastShip",
                     label: "NEW - Fast Shipping",
                     detail: "Arrives in less than 1 day",
                     amount: "10.00"
@@ -1282,7 +1282,7 @@ button.on(EVENT.PAYMENT_ERROR, (data) => console.log("The payment was not succes
 This example shows how to use these functions for **Apple and Google Pay via Stripe**:
 _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `wallets`)_
-### Full example
+### Apple and Google Pay via Stripe Full example
 ```html
 <!DOCTYPE html>
@@ -1317,8 +1317,8 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `wa
 ```
 This example shows how to use these functions for **Paypal Smart Checkout Buttons**:
-_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
-### Full example
+_(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `standalone`, `style`)_
+### Paypal Smart Checkout Buttons Full example
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -1333,26 +1333,27 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
 <script>
     let button = new paydock.WalletButtons(
-		"#widget",
-		charge_token,
-		{
-			request_shipping: true,
-			pay_later: true,
-			style: {
-				layout: 'horizontal',
-				color: 'blue',
-				shape: 'rect',
-				label: 'paypal',
-			},
-		}
-	);
+          "#widget",
+          charge_token,
+          {
+               request_shipping: true,
+               pay_later: true,
+               standalone: false,
+               style: {
+                    layout: 'horizontal',
+                    color: 'blue',
+                    shape: 'rect',
+                    label: 'paypal',
+               },
+          }
+     );
     button.setEnv('sandbox');
     button.onUnavailable(() => console.log("No wallet buttons available"));
     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 });
-	});
+          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 });
+     });
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
     button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
@@ -1361,8 +1362,46 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
 </html>
 ```
-This example shows how to use these functions for **Flypay Checkout**.
+This example shows how to use these functions for **Flypay v1 Wallet**.
 _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_later`, `style`)_
+### Flypay Full 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://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.WalletButtons(
+          "#widget",
+          charge_token,
+          {
+               request_shipping: true
+          }
+     );
+    button.setEnv('sandbox');
+    button.onUnavailable(() => console.log("No wallet buttons available"));
+    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 });
+     });
+    button.onPaymentSuccessful((data) => console.log("The payment was successful"));
+    button.onPaymentError((data) => console.log("The payment was not successful"));
+    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
+    button.load();
+</script>
+</html>
+```
+This example shows how to use these functions for **Flypay v2 Wallet**.
+_(Required `meta` fields: - . Optional `meta` fields: -)_
 ### Full example
 ```html
 <!DOCTYPE html>
@@ -1380,28 +1419,21 @@ _(Required `meta` fields: - . Optional `meta` fields: `request_shipping`, `pay_l
     let button = new paydock.WalletButtons(
 		"#widget",
 		charge_token,
-		{
-			request_shipping: true
-		}
+		{},
 	);
     button.setEnv('sandbox');
     button.onUnavailable(() => console.log("No wallet buttons available"));
-    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 });
-	});
     button.onPaymentSuccessful((data) => console.log("The payment was successful"));
     button.onPaymentError((data) => console.log("The payment was not successful"));
-    button.onPaymentInReview((data) => console.log("The payment is on fraud review"));
     button.load();
 </script>
 </html>
 ```
-This example shows how to use these functions for **ApplePay via MPGS**:
+This example shows how to use these functions for **ApplePay via MPGS** and **GooglePay via MPGS**:
 _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `raw_data_initialization`, `request_shipping`, `style.button_type`)_
-### Full example
+### ApplePay and GooglePay via MPGS Full example
 ```html
 <!DOCTYPE html>
@@ -1423,8 +1455,16 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
             amount_label: "Total",
             country: 'DE',
             request_shipping: true,
+            show_billing_address: true,
             style: {
-                button_type: 'buy',
+                google: {
+                    button_type: 'buy',
+                    button_size_mode: 'static',
+                    button_color: 'white',
+                },
+                apple: {
+                    button_type: 'buy',
+                },
             },
             shipping_options: [
                 {
@@ -1446,14 +1486,40 @@ _(Required `meta` fields: `amount_label`, `country`. Optional `meta` fields: `ra
     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.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"
+                    }
+                ]
+            }
+        });
+    });
     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:
+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
+Similarly, for **GooglePay via MPGS** you can initialize the `PaymentMethodSpecification` with your own values instead of using the default ones. Below you can see an example on how to initialize the `PaymentMethodSpecification` with the `raw_data_initialization` meta field.
+### ApplePay and GooglePay via MPGS Raw data initialization example
 ```html
 <!DOCTYPE html>
@@ -1473,23 +1539,48 @@ Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest`
         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",
-                }
+                apple: {
+                    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",
+                    }
+                },
+                google: {
+                    type: "CARD",
+                    parameters: {
+                        allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
+                        allowedCardNetworks: [
+                            "AMEX",
+                            "DISCOVER",
+                            "INTERAC",
+                            "JCB",
+                            "MASTERCARD",
+                            "VISA",
+                        ],
+                        billingAddressRequired: true,
+                    },
+                },
             },
             amount_label: "Total",
             country: 'DE',
             request_shipping: true,
+            show_billing_address: true,
             style: {
-                button_type: 'buy',
+                google: {
+                    button_type: 'buy',
+                    button_size_mode: 'static',
+                    button_color: 'white',
+                },
+                apple: {
+                    button_type: 'buy',
+                },
             },
             shipping_options: [
                 {
@@ -1511,6 +1602,30 @@ Also, for **ApplePay via MPGS** you can initialize the `ApplePayPaymentRequest`
     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.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"
+                    }
+                ]
+            }
+        });
+    });
     button.load();
 </script>
 </html>

package/typings/globals/@auspayplus/open-payments-checkout/index.d.ts ADDED Viewed

@@ -0,0 +1,41 @@
+declare module '@auspayplus/open-payments-checkout' {
+  // WindowFeatures type
+  type WindowFeatures = {
+    width?: number;
+    height?: number;
+    left?: number;
+    popup?: 'yes' | 'no' | '1' | '0';
+    resizable?: 'yes' | 'no' | '1' | '0';
+    top?: number;
+  };
+  // Callbacks type
+  interface ICheckoutCallback {
+    orderId: string;
+    error?: Error;
+  }
+  // Constructor options for Checkout
+  interface CheckoutOptions {
+    orderId: string;
+    url: string;
+    accessToken?: string;
+    refreshToken?: string;
+    clientId?: string;
+    onCheckoutClosed?: (callbackData: ICheckoutCallback) => void;
+    onError?: (callbackData: ICheckoutCallback) => void;
+    onPaymentSuccess?: (callbackData: ICheckoutCallback) => void;
+    onPaymentError?: (callbackData: ICheckoutCallback) => void;
+    onTokensChanged?: ({ accessToken, refreshToken }: { accessToken: string; refreshToken: string; }) => void;
+    windowFeatures?: WindowFeatures;
+  }
+  // Checkout class declaration
+  export class Checkout {
+    constructor(options: CheckoutOptions);
+    isCheckoutOpen(): boolean;
+    listenMessage(): void;
+    open(): void;
+    close(): void;
+  }
+}

package/typings/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 /// <reference path="globals/jasmine-ajax/index.d.ts" />
 /// <reference path="globals/jasmine/index.d.ts" />
 /// <reference path="globals/jquery/index.d.ts" />
+/// <reference path="globals/@auspayplus/open-payments-checkout/index.d.ts" />