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/secure-remote-commerce-examples.md ADDED Viewed

@@ -0,0 +1,258 @@
+## Secure Remote Commerce
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
+This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
+## SRC simple example
+### Container
+```html
+<div id="checkoutButton"></div>
+<div id="checkoutIframe"></div>
+```
+You must create a container for the initial checkout button, and a different one for the checkout iFrame. Inside the first tag the button will be initialized, and inside the second one the iFrame will be loaded once the button is clicked.
+### Initialization
+```javascript
+var src = new paydock.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+```javascript
+// ES2015 | TypeScript
+import { SRC } from '@paydock/client-sdk';
+var src = new SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {}, // meta
+);
+src.load();
+```
+*NOTE:* it's highly recommended to use a Paydock Access Token instead of the public key for security reasons. When creating it, you will need to enable the `Secure Remote Commerce` and add a whiteliste for the domain of your checkout screen.
+### 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="checkoutButton"></div>
+    <div id="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.SRC(
+            "#checkoutButton",
+            "#checkoutIframe",
+            "scheme_service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.load();
+    </script>
+</body>
+</html>
+```
+## SRC advanced example
+### Settings
+```javascript
+src.setEnv('sandbox'); // set enviroment
+src.hideButton(); // hide button
+src.showButton(); // show button
+src.hideCheckout(); // hide checkout iframe
+src.showCheckout(); // show checkout iframe
+src.on('checkoutButtonLoaded', () => {
+    console.log("Button loaded");
+});
+src.on('checkoutButtonClicked', () => {
+    console.log("Button clicked");
+});
+src.on('iframeLoaded', () => {
+    console.log("Initial iframe loaded");
+});
+src.on('checkoutReady', () => {
+    console.log("Checkout ready to be used");
+});
+src.on('checkoutCompleted', (token) => {
+    console.log(token);
+});
+src.on('checkoutError', (error) => {
+    console.log(error);
+});
+```
+Here you can see how you can use this methods to customize your checkout experience
+### 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="checkoutButton"></div>
+    <div id="checkoutIframe"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var src = new paydock.SRC(
+            "#checkoutButton",
+            "#checkoutIframe",
+            "scheme_service_id",
+            "paydock_public_key_or_access_token",
+            {},
+        );
+        src.on('checkoutReady', () => {
+            console.log("Checkout ready to be used");
+        });
+        src.on('checkoutCompleted', (token) => {
+            console.log(token);
+        });
+        src.load();
+    </script>
+</body>
+</html>
+```
+## Customization options for address fields
+### Shipping address:
+To customize shipping address experience we use a flag that manages how VisaSRC requires or not shipping address to the customer. Options are NONE (default option), POSTAL_COUNTRY or ALL.
+```
+var src = new paydock.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "dpa_transaction_options": {
+            "dpa_shipping_preference": "ALL"
+        }
+    },
+);
+```
+With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
+Another option is at time of creating the charge. Say that you have a different way of collecting the shipping address (outside Paydock checkout), you can then disable the shipping address on our SRC widget and send it when creating the charge creation after getting the One Time Token out of the SRC widget:
+```
+POST v1/charges
+{
+    "amount": "10.00",
+    "currency": "AUD",
+    "token": "token",
+    "customer": {
+        "payment_source": {
+            "gateway_id": "gateway_id"
+        }
+    },
+    "shipping": {
+        "address_line1": "address_line1",
+        "address_line2": "address_line2",
+        "address_line3": "address_line3",
+        "address_city": "address_city",
+        "address_postcode": "address_postcode",
+        "address_state": "address_state",
+        "address_country": "address_country"
+    }
+}
+```
+- Billing address:
+Billing address fields are always present on the checkout and required when adding a new credit card (or for new consumer checkout). You can send billing fields on the meta data to pre-fill these fields inside the customer object:
+```
+var src = new paydock.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key_or_access_token",
+    {
+        "customer": {
+            "email": "test@email.com",
+            "first_name": "Name",
+            "last_name": "Surname",
+            "phone": {
+                "country_code": "1",
+                "phone": "2124567890"
+            },
+            "payment_source": {
+                "address_line1": "Line 1",
+                "address_line2": "Line 2",
+                "address_city": "Miami",
+                "address_postcode": "33126",
+                "address_state": "FL",
+                "address_country": "US"
+            }
+        }
+    },
+);
+```
+## Personalization Styling
+To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
+### Example code
+```
+var src = new paydock.SRC(
+    "#checkoutButton",
+    "#checkoutIframe",
+    "scheme_service_id",
+    "paydock_public_key",
+);
+button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
+```
+## Event and Values
+| Event Value         | Type                | Description                                                    |
+| ------------------- | ------------------- | -------------------------------------------------------------- |
+| primary_color  | <code>string</code> | HEX color for the principal buttons, example : #32a852 |
+| button_text_color    | <code>string</code> | HEX color for the text of the buttons, example : #32a852|
+| font_family    | <code>string</code> | Look more [mozilla.org/color](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)|
+| card_schemes    | <code>[string] - array of string</code> | Possible values "visa", "mastercard", "amex" and "discover" - Default show all logos

package/docs/secure-remote-commerce.md ADDED Viewed

@@ -0,0 +1,265 @@
+## Classes
+<dl>
+<dt><a href="#SRC">SRC</a></dt>
+<dd><p>Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC</p>
+</dd>
+</dl>
+## Interfaces
+<dl>
+<dt><a href="#IVisaSRCMeta">IVisaSRCMeta</a> : <code>object</code></dt>
+<dd><p>Interface of data used for the Visa Checkout.</p>
+</dd>
+</dl>
+<a name="IVisaSRCMeta" id="IVisaSRCMeta" href="#IVisaSRCMeta">&nbsp;</a>
+## IVisaSRCMeta : <code>object</code>
+Interface of data used for the Visa Checkout.
+**Kind**: global interface
+| Param | Type | Description |
+| --- | --- | --- |
+| [srci_transaction_id] | <code>string</code> | Used to identify the SRC Id. |
+| [dpa_data] | <code>object</code> | Object where the DPA creation data is stored. |
+| [dpa_data.dpa_presentation_name] | <code>string</code> | Name in which the DPA is presented in. |
+| [dpa_data.dpa_uri] | <code>string</code> | Used for indicating the DPA URI. |
+| [dpa_transaction_options] | <code>object</code> | Object that stores options for creating a trasaction with DPA. |
+| [dpa_transaction_options.dpa_locale] | <code>string</code> | DPA’s preferred locale, example en_US. |
+| [dpa_transaction_options.dpa_accepted_billing_countries] | <code>Array</code> | Used to indicate list of accepted billing countries for DPA. |
+| [dpa_transaction_options.dpa_accepted_shipping_countries] | <code>Array</code> | Used to indicate list of accepted shipping countries for DPA. |
+| [dpa_transaction_options.dpa_billing_preference] | <code>string</code> | Used for listing the enumeration for billing preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'. |
+| [dpa_transaction_options.dpa_shipping_preference] | <code>string</code> | Used for listing the enumeration for shipping preferences for DPA. Options are 'ALL', 'POSTAL_COUNTRY' and 'NONE'. |
+| [dpa_transaction_options.consumer_name_requested] | <code>boolean</code> | Used to check if the name of the consumer is needed. |
+| [dpa_transaction_options.consumer_email_address_requested] | <code>boolean</code> | Used to check if the email of the consumer is needed. |
+| [dpa_transaction_options.consumer_phone_number_requested] | <code>boolean</code> | Used to check if the phone number of the consumer is needed. |
+| [dpa_transaction_options.payment_options] | <code>object</code> | Object used to check the payment options that are included. |
+| [dpa_transaction_options.payment_options.dpa_dynamic_data_ttl_minutes] | <code>number</code> | The minimum requested validity period for the transaction credentials. |
+| [dpa_transaction_options.payment_options.dynamic_data_type] | <code>string</code> | Used for listing the enumeration for dynamic data types. Options are 'TAVV' and 'DTVV'. |
+| [dpa_transaction_options.payment_options.dpa_pan_requested] | <code>boolean</code> | Used to check if PAN number was requested. |
+| [dpa_transaction_options.review_action] | <code>string</code> | Used for listing the enumeration of review actions. Options are 'pay' and 'continue'. |
+| [dpa_transaction_options.checkout_description] | <code>string</code> | Used for indicating the description of the checkout. |
+| [dpa_transaction_options.transaction_type] | <code>string</code> | Used for listing the enumeration of the type of the transaction. 'PURCHASE', 'BILL_PAYMENT' and 'MONEY_TRANSFER' |
+| [dpa_transaction_options.order_type] | <code>string</code> | Used for listing the enumeration of the type of the order. Options are 'REAUTHORIZATION', 'RECURRING' and 'INSTALLMENT'. |
+| [dpa_transaction_options.transaction_amount] | <code>object</code> | Object used to describe the details of the transaction. |
+| [dpa_transaction_options.transaction_amount.transaction_amount] | <code>number</code> | Used to indicate the amount of the transaction. |
+| [dpa_transaction_options.transaction_amount.transaction_currency_code] | <code>string</code> | Used to indicate the currency code of the transaction. 3 letter ISO code format. |
+| [dpa_transaction_options.merchant_order_id] | <code>string</code> | Used to indicate the merchants order Id. |
+| [dpa_transaction_options.merchant_category_code] | <code>string</code> | Used to indicate the merchants category code. |
+| [dpa_transaction_options.merchant_country_code] | <code>string</code> | Used to indicate the merchants country code. 2 letter ISO code format. |
+| [customer] | <code>object</code> | Object where the customer data is stored to prefill in the checkout. |
+| [customer.email] | <code>string</code> | Customer email. |
+| [customer.first_name] | <code>string</code> | Customer first name. |
+| [customer.last_name] | <code>string</code> | Customer last name. |
+| [customer.phone] | <code>object</code> | Object where the customer phone is stored. |
+| [customer.phone.country_code] | <code>string</code> | Customer phone country code (example "1" for US). |
+| [customer.phone.phone] | <code>string</code> | Customer phone number. |
+| [customer.payment_source] | <code>object</code> | Object where the customer billing address data is stored. |
+| [customer.payment_source.address_line1] | <code>string</code> | Customer billing address line 1. |
+| [customer.payment_source.address_line2] | <code>string</code> | Customer billing address line 2. |
+| [customer.payment_source.address_city] | <code>string</code> | Customer billing address city. |
+| [customer.payment_source.address_postcode] | <code>string</code> | Customer billing address postcode. |
+| [customer.payment_source.address_state] | <code>string</code> | Customer billing address state code (if applicable for the country, example "FL" for Florida). |
+| [customer.payment_source.address_country] | <code>string</code> | Customer billing address country code (example "US"). |
+<a name="SRC" id="SRC" href="#SRC">&nbsp;</a>
+## SRC
+Class SRC include methods for interacting with different secure remote commerce options such as Visa SRC
+**Kind**: global class
+* [SRC](#SRC)
+    * [new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)](#new_SRC_new)
+    * [.setStyles(fields)](#SRC+setStyles)
+    * [.load()](#SRC+load)
+    * [.setEnv(env, [alias])](#SRC+setEnv)
+    * [.getEnv()](#SRC+getEnv)
+    * [.on(eventName, [cb])](#SRC+on) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+    * [.hideButton([saveSize])](#SRC+hideButton)
+    * [.showButton()](#SRC+showButton)
+    * [.hideCheckout([saveSize])](#SRC+hideCheckout)
+    * [.showCheckout()](#SRC+showCheckout)
+    * [.reload()](#SRC+reload)
+    * [.useAutoResize()](#SRC+useAutoResize)
+<a name="new_SRC_new" id="new_SRC_new" href="#new_SRC_new">&nbsp;</a>
+### new SRC(button_selector, iframe_selector, service_id, public_key_or_access_token, meta)
+| Param | Type | Description |
+| --- | --- | --- |
+| button_selector | <code>string</code> | Selector of html element. Container for SRC checkout button. |
+| iframe_selector | <code>string</code> | Selector of html element. Container for SRC checkout iFrame. |
+| service_id | <code>string</code> | Card Scheme Service ID |
+| public_key_or_access_token | <code>string</code> | Paydock public key or Access Token |
+| meta | [<code>IVisaSRCMeta</code>](#IVisaSRCMeta) | Data that configures the SRC checkout |
+**Example**
+```js
+var SRC = new SRC('#checkoutButton', '#checkoutIframe', 'service_id', 'public_key', {});
+```
+<a name="SRC+setStyles" id="SRC+setStyles" href="#SRC+setStyles">&nbsp;</a>
+### srC.setStyles(fields)
+Object contain styles for widget - call before `.load()`.
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+| Param | Type | Description |
+| --- | --- | --- |
+| fields | <code>IStyles</code> | name of styles which can be shown in widget [STYLE](STYLE) |
+**Example**
+```js
+widget.setStyles({
+      button_text_color: '#32a852',
+      primary_color: '#32a852',
+      font_family: 'sans-serif',
+      card_schemes: ['visa']
+  });
+```
+<a name="SRC+load" id="SRC+load" href="#SRC+load">&nbsp;</a>
+### srC.load()
+The final method after configuring the SRC to start the load process of SRC checkout
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+<a name="SRC+setEnv" id="SRC+setEnv" href="#SRC+setEnv">&nbsp;</a>
+### srC.setEnv(env, [alias])
+Current method can change environment. By default environment = sandbox.
+Also we can change domain alias for this environment. By default domain_alias = paydock.com
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+| Param | Type | Description |
+| --- | --- | --- |
+| env | <code>string</code> | sandbox, production |
+| [alias] | <code>string</code> | Own domain alias |
+**Example**
+```js
+SRC.setEnv('production');
+```
+<a name="SRC+getEnv" id="SRC+getEnv" href="#SRC+getEnv">&nbsp;</a>
+### srC.getEnv()
+Method to read the current environment
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+**Example**
+```js
+SRC.getEnv();
+```
+<a name="SRC+on" id="SRC+on" href="#SRC+on">&nbsp;</a>
+### srC.on(eventName, [cb]) ⇒ <code>Promise.&lt;any&gt;</code> \| <code>void</code>
+Listen to events of SRC
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+| Param | Type | Description |
+| --- | --- | --- |
+| eventName | <code>string</code> | Available event names [EVENT](#EVENT) |
+| [cb] | <code>listener</code> |  |
+**Example**
+```js
+SRC.on('checkoutCompleted', function (token) {
+     console.log(token);
+});
+// or
+SRC.on('checkoutCompleted').then(function (token) {
+     console.log(token);
+});
+```
+<a name="SRC+hideButton" id="SRC+hideButton" href="#SRC+hideButton">&nbsp;</a>
+### srC.hideButton([saveSize])
+Using this method you can hide button
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |
+**Example**
+```js
+SRC.hideButton();
+```
+<a name="SRC+showButton" id="SRC+showButton" href="#SRC+showButton">&nbsp;</a>
+### srC.showButton()
+Using this method you can show the SRC button after using hideButton method
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+**Example**
+```js
+SRC.showButton();
+```
+<a name="SRC+hideCheckout" id="SRC+hideCheckout" href="#SRC+hideCheckout">&nbsp;</a>
+### srC.hideCheckout([saveSize])
+Using this method you can hide checkout after load and button click
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| [saveSize] | <code>boolean</code> | <code>false</code> | using this param you can save iframe's size (if applicable) |
+**Example**
+```js
+SRC.hideCheckout();
+```
+<a name="SRC+showCheckout" id="SRC+showCheckout" href="#SRC+showCheckout">&nbsp;</a>
+### srC.showCheckout()
+Using this method you can show checkout after using hideCheckout method
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+**Example**
+```js
+SRC.showCheckout()
+```
+<a name="SRC+reload" id="SRC+reload" href="#SRC+reload">&nbsp;</a>
+### srC.reload()
+Using this method you can reload the whole checkout
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+**Example**
+```js
+SRC.reload()
+```
+<a name="SRC+useAutoResize" id="SRC+useAutoResize" href="#SRC+useAutoResize">&nbsp;</a>
+### srC.useAutoResize()
+Use this method for resize checkout iFrame according to content height, if applicable
+**Kind**: instance method of [<code>SRC</code>](#SRC)
+**Example**
+```js
+SRC.useAutoResize();
+```
+<a name="EVENT" id="EVENT" href="#EVENT">&nbsp;</a>
+## EVENT : <code>enum</code>
+List of available event's name in the SRC checkout lifecycle
+**Kind**: global enum
+| Param | Type | Default |
+| --- | --- | --- |
+| CHECKOUT_BUTTON_LOADED | <code>string</code> | <code>&quot;checkoutButtonLoaded&quot;</code> |
+| CHECKOUT_BUTTON_CLICKED | <code>string</code> | <code>&quot;checkoutButtonClicked&quot;</code> |
+| IFRAME_LOADED | <code>string</code> | <code>&quot;iframeLoaded&quot;</code> |
+| CHECKOUT_READY | <code>string</code> | <code>&quot;checkoutReady&quot;</code> |
+| CHECKOUT_COMPLETED | <code>string</code> | <code>&quot;checkoutCompleted&quot;</code> |
+| CHECKOUT_ERROR | <code>string</code> | <code>&quot;checkoutError&quot;</code> |

package/docs/vault-display-example.md ADDED Viewed

@@ -0,0 +1,132 @@
+## Vault Display Widget
+You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#vault-display-widget)
+The vault display form allows viewing card number and CVV. The form can be customised according to your needs.
+You can set styles as well as subscribe to widget events that help monitor user’s actions in real time.
+## Vault Display Widget 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 widget = new paydock.VaultDisplayWidget('#widget', 'token');
+widget.load();
+```
+```javascript
+// ES2015 | TypeScript
+import { VaultDisplayWidget } from '@paydock/client-sdk';
+var widget = new VaultDisplayWidget('#widget', 'token');
+widget.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: 100%;height: 300px;}</style>
+</head>
+<body>
+    <div id="widget"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var widget = new paydock.VaultDisplayWidget('#widget', 'token');
+        widget.load();
+    </script>
+</body>
+</html>
+```
+## Widget advanced example
+### Customization
+```javascript
+widget.setEnv('sandbox');
+widget.on('after_load', function (data) {
+  console.log(data);
+});
+widget.on('cvv_secure_code_requested', function (data) {
+  console.log(data);
+});
+widget.on('card_number_secure_code_requested', function (data) {
+  console.log(data);
+});
+widget.setStyles({
+    background_color: 'rgb(0, 0, 0)',
+    border_color: 'yellow',
+    text_color: '#FFFFAA',
+    button_color: 'rgba(255, 255, 255, 0.9)',
+    font_size: '20px'
+});
+```
+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="widget"></div>
+    <script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+    <script>
+        var widget = new paydock.VaultDisplayWidget('#widget', 'token');
+        widget.setEnv('sandbox');
+        widget.on('after_load', function (data) {
+          console.log(data);
+        });
+        widget.on('cvv_secure_code_requested', function (data) {
+          console.log(data);
+        });
+        widget.on('card_number_secure_code_requested', function (data) {
+          console.log(data);
+        });
+        widget.setStyles({
+            background_color: 'rgb(0, 0, 0)',
+            border_color: 'yellow',
+            text_color: '#FFFFAA',
+            button_color: 'rgba(255, 255, 255, 0.9)',
+            font_size: '20px'
+        });
+        widget.load();
+    </script>
+</body>
+</html>
+```