npm - @paydock/client-sdk - Versions diffs - 0.0.3 → 0.1.2-beta - Mend

@paydock/client-sdk 0.0.3 → 0.1.2-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.

Files changed (531) hide show

package/docs/wallet-buttons-express-examples.md ADDED Viewed

@@ -0,0 +1,201 @@
+## Express Wallet Buttons
+Express Wallet Buttons allow to integrate with E-Wallets in an "express" operational mode, allowing to show the respective button in product or cart pages.
+The general flow to use the widgets is:
+1. Configure your gateway and connect it using Paydock API or Dashboard.
+2. Create a container in your site
+```html
+<div id="widget"></div>
+```
+3. Initialize the specific WalletButtonExpress, providing your Access Token (preferred) or Public Key, plus required and optional meta parameters for the wallet in use. The general format is:
+```js
+new paydock.{Provider}WalletButtonExpress(
+    "#widget",
+    accessTokenOrPublicKey,
+    gatewayId,
+    gatewaySpecificMeta,
+);
+```
+4. (optional) If the screen where the button is rendered allows for cart/amount changes, call `setMeta` method to update the meta information.
+5. Handle the `onClick` callback, where you should call your server, initialize the wallet charge via `POST v1/charges/wallet` and return the wallet token.
+6. Handle the `onPaymentSuccessful`, `onPaymentError` and `onPaymentInReview` (if fraud is applicable) for payment results.
+### Supported Providers
+1. [Apple Pay](#apple-pay-wallet-button-express)
+2. [Paypal](#paypal-wallet-button-express)
+### Apple Pay Wallet Button Express
+A full description of the meta parameters for [ApplePayWalletButtonExpress](#ApplePayWalletButtonExpress) meta parameters can be found [here](#ApplePayWalletMeta). Below you will find a fully working html example.
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock ApplePayWalletButtonExpress!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.ApplePayWalletButtonExpress(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            amount_label: 'TOTAL',
+            country: 'AU',
+            currency: 'AUD',
+            amount: 15.5,
+            // merchant_capabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],
+            // supported_networks: ['visa', 'masterCard', 'amex', 'chinaUnionPay', 'discover', 'interac', 'jcb', 'privateLabel'],
+            // required_billing_contact_fields: ['email', 'name', 'phone', 'postalAddress'], // phone and email do not work according to relevant testing
+            // required_shipping_contact_fields: ['email', 'phone'], // Workaround to pull phone and email from shipping contact instead - does not require additional shipping address information
+            // supported_countries: ["AU"],
+            // style: {
+            //     button_type: "buy",
+            //     button_style: "black",
+            // },
+        }
+    );
+    button.setEnv('sandbox');
+    button.onUnavailable(function() {
+        console.log("Button not available");
+    });
+    button.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+    button.onPaymentSuccessful(function(data) {
+        console.log("Payment successful");
+        console.log(data);
+    });
+    button.onPaymentError(function(err) {
+        console.log("Payment error");
+        console.log(err);
+    });
+    button.onPaymentInReview(function(data) {
+        console.log("The payment is on fraud review");
+        console.log(data);
+    });
+    button.onClick(async (data) => {
+        console.log("Button clicked", data);
+        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
+        const parsedData = await responseData.json();
+        return parsedData.resource.data.token;
+    });
+    button.onCheckoutClose(() => {
+        console.log("Checkout closed");
+    });
+    button.load();
+</script>
+</html>
+```
+### Paypal Wallet Button Express
+A full description of the meta parameters for [PaypalWalletButtonExpress](#PaypalWalletButtonExpress) meta parameters can be found [here](#PaypalWalletMeta). Below you will find a fully working html example.
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <h2>Payment using PayDock PaypalWalletButtonExpress!</h2>
+    <div id="widget"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    let button = new paydock.PaypalWalletButtonExpress(
+        "#widget",
+        accessTokenOrPublicKey,
+        gatewayId,
+        {
+            amount: 15.5,
+            currency: 'AUD',
+            pay_later: false,
+            standalone: false,
+            capture: true,
+            // style: {
+            //     layout: 'horizontal', // or 'vertical'
+            //     color: 'gold', // or 'blue', 'silver', 'black', 'white'
+            //     shape: 'rect', // or 'pill', 'sharp'
+            //     borderRadius: 5,
+            //     height: 40,
+            //     disableMaxWidth: false,
+            //     label: 'paypal', // or 'checkout', 'buynow', 'pay', 'installment'
+            //     tagline: true,
+            //     messages: {
+            //         layout: 'text', // or 'flex'
+            //         logo: {
+            //             type: 'primary', // or 'alternative', 'inline', 'none'
+            //             position: 'left', // or 'right', 'top'
+            //         },
+            //         text: {
+            //             color: 'black', // or 'white', 'monochrome', 'grayscale'
+            //             size: 10, // or 11, 12, 13, 14, 15, 16
+            //             align: 'left', // or 'center', 'right'
+            //         },
+            //         color: 'blue', // or 'black', 'white', 'white-no-border', 'gray', 'monochrome', 'grayscale'
+            //         ratio: '1x1', // or '1x4', '8x1', '20x1'
+            //     },
+            // }
+        }
+    );
+    button.setEnv('sandbox');
+    button.onUnavailable(function() {
+        console.log("Button not available");
+    });
+    button.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+    button.onPaymentSuccessful(function(data) {
+        console.log("Payment successful");
+        console.log(data);
+    });
+    button.onPaymentError(function(err) {
+        console.log("Payment error");
+        console.log(err);
+    });
+    button.onPaymentInReview(function(data) {
+        console.log("The payment is on fraud review");
+        console.log(data);
+    });
+    button.onClick(async (data) => {
+        console.log("Button clicked", data);
+        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
+        const parsedData = await responseData.json();
+        return parsedData.resource.data.token;
+    });
+    button.onCheckoutClose(() => {
+        console.log("Checkout closed");
+    });
+    button.load();
+</script>
+</html>
+```