npm - @paydock/client-sdk - Versions diffs - 1.103.1 → 1.104.1-beta - Mend

@paydock/client-sdk 1.103.1 → 1.104.1-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 (482) hide show

package/docs/api-wrapper.md ADDED Viewed

@@ -0,0 +1,78 @@
+## Classes
+<dl>
+<dt><a href="#Api">Api</a></dt>
+<dd><p>Class Api include method for working with paydock api</p>
+</dd>
+</dl>
+## Interfaces
+<dl>
+<dt><a href="#BrowserDetails">BrowserDetails</a></dt>
+<dd><p>Interface for browser details response.</p>
+</dd>
+</dl>
+<a name="BrowserDetails" id="BrowserDetails" href="#BrowserDetails">&nbsp;</a>
+## BrowserDetails
+Interface for browser details response.
+**Kind**: global interface
+| Param | Type |
+| --- | --- |
+| [name] | <code>string</code> |
+| [java_enabled] | <code>string</code> |
+| [language] | <code>string</code> |
+| [screen_height] | <code>string</code> |
+| [screen_width] | <code>string</code> |
+| [time_zone] | <code>string</code> |
+| [color_depth] | <code>string</code> |
+<a name="Api" id="Api" href="#Api">&nbsp;</a>
+## Api
+Class Api include method for working with paydock api
+**Kind**: global class
+* [Api](#Api)
+    * [new Api(publicKey)](#new_Api_new)
+    * [.getBrowserDetails()](#Api+getBrowserDetails) ⇒ [<code>BrowserDetails</code>](#BrowserDetails)
+    * [.charge()](#Api+charge)
+<a name="new_Api_new" id="new_Api_new" href="#new_Api_new">&nbsp;</a>
+### new Api(publicKey)
+| Param | Type | Description |
+| --- | --- | --- |
+| publicKey | <code>string</code> | PayDock users public key |
+**Example**
+```js
+var api = new Api('publicKey');
+```
+<a name="Api+getBrowserDetails" id="Api+getBrowserDetails" href="#Api+getBrowserDetails">&nbsp;</a>
+### api.getBrowserDetails() ⇒ [<code>BrowserDetails</code>](#BrowserDetails)
+Method for getting browser details
+**Kind**: instance method of [<code>Api</code>](#Api)
+**Returns**: [<code>BrowserDetails</code>](#BrowserDetails) - Browser details object
+**Example**
+```js
+api.getBrowserDetails();
+```
+<a name="Api+charge" id="Api+charge" href="#Api+charge">&nbsp;</a>
+### api.charge()
+Current method allows to work with charge related endpoints
+**Kind**: instance method of [<code>Api</code>](#Api)
+**Example**
+```js
+api.charge();
+```

package/docs/canvas3ds-examples.md ADDED Viewed

@@ -0,0 +1,242 @@
+## Canvas3ds
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#canvas3d)
+This widget provides you to integrate 3d Secure
+## Canvas3ds simple example
+### Container
+```html
+<div id="widget"></div>
+```
+You must create a container for the widget. Inside this tag, the widget will be initialized
+### Initialization
+```javascript
+var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
+canvas3ds.load();
+```
+```javascript
+// ES2015 | TypeScript
+import { Canvas3ds } from '@paydock/client-sdk';
+var list = new Canvas3ds('#widget', 'token');
+list.load();
+```
+Then write only need 2 lines of code in js to initialize widget
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 300px;}</style>
+</head>
+<body>
+    <div id="widget"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+    <script>
+        var canvas3ds = new paydock.Canvas3ds('#widget', 'token');
+        canvas3ds.load();
+    </script>
+</body>
+</html>
+```
+## Canvas3ds advanced example
+### Settings
+```javascript
+canvas3ds.setEnv('sandbox'); // set enviroment
+canvas3ds.hide(); // hide widget
+canvas3ds.show(); // show widget
+canvas3ds.on('chargeAuthSuccess', function (data) {
+  console.log(data);
+});
+canvas3ds.on('chargeAuthReject', function (data) {
+  console.log(data);
+});
+canvas3ds.on('chargeAuthCancelled', function (data) {
+  console.log(data);
+});
+canvas3ds.on('additionalDataCollectSuccess', function (data) {
+  console.log(data);
+});
+canvas3ds.on('additionalDataCollectReject', function (data) {
+  console.log(data);
+});
+canvas3ds.on('chargeAuth', function (data) {
+  console.log(data);
+});
+```
+This example shows how you can use a lot of other methods to settings your form
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
+</head>
+<body>
+    <div id="widget3ds"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+    <script>
+        var canvas3ds = new paydock.Canvas3ds('#widget3ds', 'token');
+        canvas3ds.on('chargeAuthSuccess', function (data) {
+            console.log('chargeAuthSuccess', data);
+        });
+        canvas3ds.on('chargeAuthReject', function (data) {
+            console.log('chargeAuthReject', data);
+        });
+        canvas3ds.load();
+    </script>
+</body>
+</html>
+```
+### Full example with pre authorization
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>iframe {border: 0;width: 40%;height: 450px;}</style>
+</head>
+<body>
+    <div id="widget"></div>
+    <div id="widget3ds"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+    <script>
+        (async function () {
+            var htmlWidget = new paydock.HtmlWidget('#widget', 'publicKey', 'gatewayId');
+            htmlWidget.load();
+            var {payment_source} = await htmlWidget.on('finish');
+            var preAuthResp = await new paydock.Api('publicKey').setEnv('sandbox').charge().preAuth({
+                  amount: 100,
+                  currency: 'AUD',
+                  token: payment_source,
+                });
+            var canvas = new paydock.Canvas3ds('#widget3ds', preAuthResp._3ds.token);
+            canvas.load();
+            var chargeAuthEvent = await canvas.on('chargeAuth');
+            console.log('chargeAuthEvent', chargeAuthEvent);
+        })()
+    </script>
+</body>
+</html>
+```
+## Canvas 3ds for Standalone 3ds charges
+After you initialized the standalone 3ds charge via `v1/charges/standalone-3ds` API endpoint, you get a token used to initialize the Canvas3ds. All above information regarding setup, loading and initialization still apply.
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Title</title>
+        <style>
+            iframe {
+                border: 0;
+                width: 40%;
+                height: 450px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="widget3ds"></div>
+        <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js"></script>
+        <script>
+            var canvas3ds = new paydock.Canvas3ds("#widget3ds", "token");
+            canvas3ds.on("chargeAuthSuccess", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthReject", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthChallenge", function (data) {
+                console.log(data);
+            });
+            canvas3ds.on("chargeAuthDecoupled", function (data) {
+                console.log(data.result.description);
+            });
+            canvas3ds.on("chargeAuthInfo", function (data) {
+                console.log(data.info);
+            });
+            canvas3ds.on("error", function ({ charge_3ds_id, error }) {
+                console.log(error);
+            });
+            canvas3ds.load();
+        </script>
+    </body>
+</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 `chargeAuthReject` event is executed when the authorization was rejected or when a timeout was received by the underlying system:
+  - A `data.status` of `AuthTimedOut` will be received for timeouts.
+  - A `data.status` of `rejected` will be received when the authorization was rejected.
+  - A `data.status` of `invalid_event` will be received for unhandled situations.
+- 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). Once the end customer performs the challenge, the Canvas3ds will be able to identify the challenge result and will either produce a `chargeAuthSuccess` or `chargeAuthReject` event.
+- 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:
+  - When getting this event, you will get on `data.error` the full error object.
+### Events and Values
+| Event Value         | Type                | Description                                                    |
+| ------------------- | ------------------- | -------------------------------------------------------------- |
+| <code>chargeAuthSuccess</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| <code>chargeAuthReject</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| <code>chargeAuthChallenge</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| <code>chargeAuthDecoupled</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| <code>chargeAuthInfo</code> | <code>object</code> | Instance of [ChargeEventResponse](#cb_chargeEventResponse) |
+| <code>error</code> | <code>object</code> | Instance of [chargeError](#cb_chargeError) |
+## Response Values
+<a name="cb_chargeEventResponse" id="cb_chargeEventResponse"></a>
+### ChargeEventResponse
+| Param                           | Type                           | Description                                                                                        |
+| ------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------- |
+| <code>status</code> | <code>string</code> | status for the event transaction |
+| <code>charge_3ds_id</code> | <code>string</code> | Universal unique transaction identifier to identify the transaction |
+| <code>info</code> | <code>string</code> | info field for `chargeAuthInfo` event |
+| <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 during the decoupled challenge flow. |
+### ChargeError
+<a name="cb_chargeError" id="cb_chargeError"></a>
+| Param         | Type                | Description                                                         |
+| ------------- | ------------------- | ------------------------------------------------------------------- |
+| <code>error</code> | <code>object</code> | error response |
+| <code>charge_3ds_id</code> | <code>string</code> | Universal unique transaction identifier to identify the transaction |

package/docs/cba-header.md ADDED Viewed

@@ -0,0 +1,13 @@
+# Client-sdk
+It is a solution for collecting and handling payment sources in secure way.
+With SDK you can create a payment form widget as an independent part or insert use inside your form.
+The SDK supports methods for customization of widget by your needs (styling, form fields, etc)
+## Other information
+To work with the widget you will need public_key or access_token ([see Authentication](https://widget.powerboard.commbank.com.au/sdk/latest/readme.html))
+Also you will need added gateway ([see API Reference by gateway](https://widget.powerboard.commbank.com.au/sdk/latest/readme.html))

package/docs/cba-license.md ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ ## License
2	+ © 2022 Commonwealth Bank of Australia

package/docs/checkout-examples.md ADDED Viewed

@@ -0,0 +1,248 @@
+## Checkout button
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#cb_CheckoutButton)
+PayPal meta parameters description [here](https://www.npmjs.com/package/@paydock/client-sdk#ipaypalmeta)
+Zipmoney meta parameters description [here](https://www.npmjs.com/package/@paydock/client-sdk#izipmoneymeta)
+This widget allows you to turn your button into a full Checkout Button.
+As a result, you will be able to receive a one-time token for charges, subscriptions etc. And other data given to the user by the payment gateway.
+## Checkout button simple example
+### Container
+```html
+<button type="button" id="button">
+    checkout
+</button>
+```
+You must create a button to turn it into checkout-button
+### Initialization
+```javascript
+var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
+```
+```javascript
+// ES2015 | TypeScript
+var button = new PaypalCheckoutButton('#button', 'publicKey');
+```
+Then write only need 1 line of code in js to initialize widget
+### Full example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+    <button type="button" id="button">checkout</button>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+    <script>
+        var button = new paydock.PaypalCheckoutButton('#button', 'publicKey');
+    </script>
+</body>
+</html>
+```
+## Checkout button advanced example
+### Optional methods
+```javascript
+button.onFinishInsert('input[name="pst"]', 'payment_source_token'); // insert one-time-token to your input after finish checkout
+button.setMeta({
+       brand_name: 'Paydock',
+       reference: '15',
+       first_name: 'receiver-name',
+       last_name: 'receiver-last-name',
+       phone: '9379992'}); // settings for checkout pages
+button.on('finish', function (data) { // Add handler of event
+       console.log('on:finish', data);
+});
+```
+This example shows how you can use a lot of other methods to settings your button
+### Full Paypal example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+</head>
+<body>
+<form id="paymentForm">
+    <button type="button" id="button">
+        <img src="https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif" align="left" style="margin-right:7px;">
+    </button>
+</form>
+<input type="text" name="pst" />
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+<script>
+	var button = new paydock.PaypalCheckoutButton('#button', 'publicKey', 'gatewayId');
+	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
+    button.setMeta({
+           brand_name: 'Paydock',
+           reference: '15',
+           first_name: 'Joshua',
+           last_name: 'Wood',
+           phone: '0231049872'});
+    button.on('finish', function (data) {
+           console.log('on:finish', data);
+    });
+</script>
+</body>
+</html>
+```
+### Full ZipMoney example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+</head>
+<body>
+<form id="paymentForm">
+    <button type="button" id="button">
+        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVrrEYxDmq4WXv7hfHygKD9ltnOqv0K6soSAhmbKNllPNYWiLiJA" align="left" style="margin-right:7px;">
+    </button>
+</form>
+<input type="text" name="pst" />
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+<script>
+	var button = new paydock.ZipmoneyCheckoutButton('#button', 'publicKey', 'gatewayId');
+	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
+    button.setMeta("first_name": "Joshua",
+       "tokenize": true,
+       "last_name": "Wood",
+       "email":"joshuawood@hotmail.com.au",
+       "gender": "male",
+       "charge": {
+           "amount": "4",
+           "currency":"AUD",
+           "shipping_type": "delivery",
+           "shipping_address": {
+               "first_name": "Joshua",
+               "last_name": "Wood",
+               "line1": "Suite 660",
+               "line2": "822 Ruiz Square",
+               "country": "AU",
+               "postcode": "3223",
+               "city": "Sydney",
+               "state": "LA"
+           },
+           "billing_address": {
+               "first_name": "Joshua",
+               "last_name": "Wood",
+               "line1": "Suite 660",
+               "line2": "test",
+               "country": "AU",
+               "postcode": "3223",
+               "city": "Sydney",
+               "state": "LA"
+           },
+           "items": [
+               {
+                   "name":"ACME Toolbox",
+                   "amount":"2",
+                   "quantity": 1,
+                   "reference":"Fuga consequuntur sint ab magnam"
+               },
+               {
+                   "name":"Device 42",
+                   "amount":"2",
+                   "quantity": 1,
+                   "reference":"Fuga consequuntur sint ab magnam"
+               }
+           ]
+       },
+       "statistics": {
+           "account_created": "2017-05-05",
+           "sales_total_number": "5",
+           "sales_total_amount": "4",
+           "sales_avg_value": "45",
+           "sales_max_value": "400",
+           "refunds_total_amount": "21",
+           "previous_chargeback": "true",
+           "currency": "AUD",
+           "last_login": "2017-06-01"
+       });
+    button.on('finish', function (data) {
+           console.log('on:finish', data);
+    });
+</script>
+</body>
+</html>
+```
+### Full Aftepay example
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+</head>
+<body>
+<button type="button" id="button">
+    <img src="https://daepxvbfwwgd0.cloudfront.net/assets/logo_scroll-0c43312c5845a0dcd7a3373325da6402bc1d635d3415af28ed40d6c1b48e3d5c.png" align="left" style="margin-right:7px;">
+</button>
+<input type="text" name="pst" />
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.js" ></script>
+<script>
+	var button = new paydock.AfterpayCheckoutButton('#button', 'publicKey', 'gatewayId');
+	button.onFinishInsert('input[name="pst"]', 'payment_source_token');
+    button.showEnhancedTrackingProtectionPopup(true);
+    button.setMeta({
+        amount: "100",
+        currency: "AUD",
+        reference: 'Vitae commodi provident assumenda',
+        email: 'wanda.mertz@example.com',
+        first_name: 'Wanda',
+        last_name: 'Mertz',
+        address_line: '61426 Osvaldo Plains',
+        address_line2: 'Apt. 276',
+        address_city: 'Lake Robyn',
+        address_state: 'WY',
+        address_postcode: '07396',
+        address_country: 'Australia',
+        phone: '0412345678',
+    });
+    button.on('finish', function (data) {
+           console.log('on:finish', data);
+    });
+</script>
+</body>
+</html>
+```

package/docs/header.md ADDED Viewed

@@ -0,0 +1,15 @@
+# Client-sdk
+It is a solution for collecting and handling payment sources in secure way.
+With SDK you can create a payment form widget as an independent part or insert use inside your form.
+The SDK supports methods for customization of widget by your needs (styling, form fields, etc)
+## Other information
+To work with the widget you will need public_key or access_token ([see Authentication](https://docs.paydock.com/#authentication))
+Also you will need added gateway ([see API Reference by gateway](https://docs.paydock.com/#gateways))

package/docs/html/layout.html ADDED Viewed

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
+    <title></title>
+</head>
+<body>
+<div id="container">
+    <header>
+        <a href="/">
+            <img alt="logo" class="logo" src="https://staging.powerboard.commbank.com.au/images/logo_cba.png" height="63px" width="150px"/>
+        </a>
+    </header>
+    <div style="display: flex">
+        <nav>
+            <ul>
+                <li>
+                    <a href="#client-sdk">Client-sdk</a>
+                    <ul>
+                        <li><a href="#other-information">Other information</a></li>
+                        <li><a href="#get-started">Get started</a></li>
+                        <li><a href="#download-from-cdn">Download from CDN</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#widget">Widget</a>
+                    <ul>
+                        <li><a href="#widget-simple-example">Simple example</a></li>
+                        <li><a href="#widget-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#payment-sources-widget">Payment sources widget</a>
+                    <ul>
+                        <li><a href="#payment-sources-simple-example">Simple example</a></li>
+                        <li><a href="#payment-sources-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-1">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#checkout-button">Checkout button</a>
+                    <ul>
+                        <li><a href="#checkout-button-simple-example">Simple example</a></li>
+                        <li><a href="#checkout-button-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-2">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#canvas3ds">Canvas3ds</a>
+                    <ul>
+                        <li><a href="#canvas3ds-simple-example">Simple example</a></li>
+                        <li><a href="#canvas3ds-advanced-example">Advanced example</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#wallet-buttons">Wallet Buttons</a>
+                    <ul>
+                        <li><a href="#wallet-buttons-simple-example">Simple example</a></li>
+                        <li><a href="#wallet-buttons-advanced-example">Advanced example</a></li>
+                        <li><a href="#classes-3">Classes</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#secure-remote-commerce">Secure Remote Commerce</a>
+                    <ul>
+                        <li><a href="#src-simple-example">SRC simple example</a></li>
+                        <li><a href="#src-advanced-example">SRC advanced example</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+        <div id="content"><!--{{content}}--></div>
+    </div>
+</div>
+</body>
+</html>