npm - @paydock/client-sdk - Versions diffs - 1.104.3-beta → 1.104.7-beta - Mend

@paydock/client-sdk 1.104.3-beta → 1.104.7-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 (128) hide show

package/docs/license.md CHANGED Viewed

@@ -1,2 +1,2 @@
 ## License
-Copyright (c) 2023 paydock
+Copyright (c) 2024 paydock

package/docs/secure-remote-commerce-examples.md CHANGED Viewed

@@ -1,26 +1,30 @@
-## Secure Remote Commerce
-You can find description of all methods and parameters [here](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
+# Secure Remote Commerce
-This widget provides you with the ability to easily integrate with SRC providers. Currently Visa SRC is supported.
+## Overview
+Integrate with Mastercard SRC using Paydock's Mastercard SRC widget.
+For a full description of the methods and parameters, reference the [README file](https://www.npmjs.com/package/@paydock/client-sdk#SRC).
 ## SRC simple example
-### Container
+The following section provides an example use case and integration for the widget.
+### Create a Container
+To integrate the SRC checkout iFrame, create a container in your HTML code. This container serves as the placeholder for the iFrame.
 ```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.
+### Initialize the Widget
+Use the following code to initialize your widget:
-### Initialization
 ```javascript
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {}, // meta
 );
@@ -29,23 +33,22 @@ src.load();
 ```javascript
 // ES2015 | TypeScript
-import { SRC } from '@paydock/client-sdk';
-var src = new SRC(
-    "#checkoutButton",
+import { MastercardSRCClickToPay } from '@paydock/client-sdk';
+var src = new MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "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.
+*NOTE:* Paydock recommends that you use a Paydock Access Token instead of a public key for security reasons in production environments. When creating your access token, you must enable the `Secure Remote Commerce` and add a whitelist for the domain of your checkout screen.
 ### Full example
+A full example of the container and the initialized widget is as follows:
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -55,14 +58,12 @@ src.load();
     <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",
+        var src = new paydock.MastercardSRCClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
@@ -72,50 +73,30 @@ src.load();
 </html>
 ```
+## Customize your SRC Checkout
-## SRC advanced example
+The following is an advanced example that includes customization. You can use these methods to enhance your checkout experience.
 ### Settings
 ```javascript
-src.setEnv('sandbox'); // set enviroment
-src.hideButton(); // hide button
-src.showButton(); // show button
+src.setEnv('sandbox'); // set environment
 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
@@ -127,64 +108,73 @@ Here you can see how you can use this methods to customize your checkout experie
     <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",
+        var src = new paydock.MastercardSRCClickToPay(
             "#checkoutIframe",
-            "scheme_service_id",
+            "service_id",
             "paydock_public_key_or_access_token",
             {},
         );
+        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);
+        });
         src.load();
     </script>
 </body>
 </html>
 ```
-## Customization options for address fields
-### Shipping address:
+## Customize your billing address fields
-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.
+To customize your billing address experience, Paydock uses a flag that manages whether a customer's billing address is mandatory.
+The options for this customization are NONE (default option), and POSTAL_COUNTRY or FULL.
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key_or_access_token",
     {
         "dpa_transaction_options": {
-            "dpa_shipping_preference": "ALL"
+            "dpa_billing_preference": "FULL"
         }
     },
 );
 ```
-With this the Visa popup requires the shipping address from consumer, and these information will be stored in the Paydock charge.
+The SRC checkout in the example requires the billing address from the customer, which is then returned as a part of the checkout data. The data is then stored and leveraged in the Paydock charge.
+You can also provide the billing address at the time of creating the charge. For example, if you have a different method for collecting the billing address, such as outside of the SRC checkout, you can provide it alongside other information at the charge creation step:
-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:
+1. Disable the billing address in Paydock's SRC widget.
+2. Get your One Time Token from the SRC widget alongside other details that may have been collected outside the SRC checkout as the shipping address.
+3. Send the billing address when creating the charge.
 ```
 POST v1/charges
 {
     "amount": "10.00",
     "currency": "AUD",
-    "token": "token",
+    "token": "one_time_token",
     "customer": {
         "payment_source": {
-            "gateway_id": "gateway_id"
+            "gateway_id": "gateway_id",
+            "address_line1": "address_line1",
+            "address_line2": "address_line2",
+            "address_city": "address_city",
+            "address_postcode": "address_postcode",
+            "address_state": "address_state",
+            "address_country": "address_country"
         }
     },
     "shipping": {
@@ -199,60 +189,44 @@ POST v1/charges
 }
 ```
-- Billing address:
+## How to customize accepted cards
-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:
+You can send a flag `unaccepted_card_type` to block the usage of a specific card type. The available options are 'DEBIT' and 'CREDIT'.
+### Example code
+The following example demonstrates how to block the card:
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
-    "paydock_public_key_or_access_token",
+    "service_id",
+    "paydock_public_key",
     {
-        "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"
-            }
-        }
+        unaccepted_card_type: 'DEBIT'
     },
 );
 ```
-## Personalization Styling
+## Personalize the Style
-To improve the experience in the use of the widget, it is allowed to send props that customize the UI.
+Customize the look and feel of your UI. The following example demonstrates changes in the styling of the buttons.
 ### Example code
 ```
-var src = new paydock.SRC(
-    "#checkoutButton",
+var src = new paydock.MastercardSRCClickToPay(
     "#checkoutIframe",
-    "scheme_service_id",
+    "service_id",
     "paydock_public_key",
+    {},
 );
-button.setStyles({"primary_color":"#a83232","button_text_color":"#171e9c","font_family":"sans-serif"})
+src.setStyles({
+    enable_src_popup: true,
+    primary_button_color: 'red',
+    secondary_button_color: 'red',
+    primary_button_text_color: 'red',
+    secondary_button_text_color: 'red',
+    font_family: 'Arial',
+});
 ```
-## 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