npm - @paydock/client-sdk - Versions diffs - 1.132.0-beta → 1.133.1-beta - Mend

@paydock/client-sdk 1.132.0-beta → 1.133.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 (134) hide show

package/README.md CHANGED Viewed

@@ -6834,5 +6834,171 @@ Callback for onError method.
 | data | [<code>IOnErrorEventData</code>](#IOnErrorEventData) \| <code>null</code> |
+## AfterpayOnSiteMessaging
+Afterpay On-Site Messaging informs customers that Afterpay had an available payment method on the website. Allows to have this features when implemented:
+- An interactive icon ⓘ that shows a modal with some available information.
+- Shows if an instalment is available and its amount.
+- Displays the best payment option available on that particular product.
+The general flow to use it is:
+1. Initialize the Afterpay On Site Messaging class, providing a HTML selector id, and configuration parameters that requires AfterPay. The general format is:
+```js
+var afterpayOnSiteMessaging = new paydock.AfterpayOnSiteMessaging(
+    "#selector",
+    configParams,
+);
+```
+2. Once all in place, just call load function to start the injection, like following:
+```js
+afterpayOnSiteMessaging.load();
+```
+### AfterpayOnSiteMessaging example
+A full description of the config parameters for [AfterpayOnSiteMessaging](#AfterpayOnSiteMessaging) meta parameters can be found [here](#IAfterpayOnSiteMessagingConfig). 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>Using PayDock AfterpayOnSiteMessaging!</h2>
+    <div id="afterpayOnSiteMessagingDiv"></div>
+</body>
+<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
+<script>
+    const afterpayOnSiteMessaging = new paydock.AfterpayOnSiteMessaging(
+        '#afterpayOnSiteMessagingDiv',
+        {
+            mpid: "uuid-uuid-uuid-uuid-uuid",
+            placement_id: "uuid-uuid-uuid-uuid-uuid",
+            page_type: "product",
+            amount: "100",
+            currency: "AUD",
+            consumer_locale: "AU",
+            item_skus: "Test",
+            item_categories: "Test",
+            is_eligible: true
+        }
+    );
+    afterpayOnSiteMessaging.onError(function(error) {
+        console.log("On Error Callback", error);
+    });
+    afterpayOnSiteMessaging.load();
+</script>
+</html>
+```
+## Classes
+<dl>
+<dt><a href="#AfterpayOnSiteMessaging">AfterpayOnSiteMessaging</a></dt>
+<dd><p>Afterpay On Site Messaging constructor</p>
+</dd>
+</dl>
+## Typedefs
+<dl>
+<dt><a href="#OnErrorCallback">OnErrorCallback</a> : <code>function</code></dt>
+<dd><p>Callback for onError method.</p>
+</dd>
+</dl>
+## Interfaces
+<dl>
+<dt><a href="#IAfterpayOnSiteMessagingConfig">IAfterpayOnSiteMessagingConfig</a> : <code>object</code></dt>
+<dd><p>Interface of data used for Afterpay On Site Messaging configuration.
+For further information refer to <a href="https://developers.afterpay.com/docs/api/afterpay-messaging/getting-started-with-afterpay-on-site-messaging">the documentation</a>.</p>
+</dd>
+</dl>
+<a name="IAfterpayOnSiteMessagingConfig" id="IAfterpayOnSiteMessagingConfig" href="#IAfterpayOnSiteMessagingConfig">&nbsp;</a>
+## IAfterpayOnSiteMessagingConfig : <code>object</code>
+Interface of data used for Afterpay On Site Messaging configuration.
+For further information refer to [the documentation](https://developers.afterpay.com/docs/api/afterpay-messaging/getting-started-with-afterpay-on-site-messaging).
+**Kind**: global interface
+| Param | Type | Description |
+| --- | --- | --- |
+| [mpid] | <code>string</code> | Used for indicating the MPID. |
+| [placement_id] | <code>string</code> | Used for indicating the product Placement ID. |
+| [page_type] | <code>&#x27;cart&#x27;</code> \| <code>&#x27;product&#x27;</code> | Used for indicating the page type. Allowed values are: cart, product. |
+| [amount] | <code>string</code> | Used for indicating the amount. |
+| [currency] | <code>string</code> | Used for indicating the currency. |
+| [consumer_locale] | <code>string</code> | Used for indicating the consumer locale. |
+| [item_skus] | <code>string</code> | Used for indicating the SKU. |
+| [item_categories] | <code>string</code> | Used for indicating the category. |
+| [is_eligible] | <code>boolean</code> | Used for indicating if the user is eligible. |
+<a name="AfterpayOnSiteMessaging" id="AfterpayOnSiteMessaging" href="#AfterpayOnSiteMessaging">&nbsp;</a>
+## AfterpayOnSiteMessaging
+Afterpay On Site Messaging constructor
+**Kind**: global class
+* [AfterpayOnSiteMessaging](#AfterpayOnSiteMessaging)
+    * [new exports.AfterpayOnSiteMessaging(selector, config)](#new_AfterpayOnSiteMessaging_new)
+    * [.load()](#AfterpayOnSiteMessaging+load)
+    * [.onError([callback])](#AfterpayOnSiteMessaging+onError)
+<a name="new_AfterpayOnSiteMessaging_new" id="new_AfterpayOnSiteMessaging_new" href="#new_AfterpayOnSiteMessaging_new">&nbsp;</a>
+### new exports.AfterpayOnSiteMessaging(selector, config)
+| Param | Type | Description |
+| --- | --- | --- |
+| selector | <code>string</code> | Selector of html element. Container for Afterpay On Site Messaging. |
+| config | [<code>IAfterpayOnSiteMessagingConfig</code>](#IAfterpayOnSiteMessagingConfig) | Required configuration for the Afterpay On Site Messaging. |
+**Example**
+```js
+var afterpayOnSiteMessaging = new AfterpayOnSiteMessaging('#afterpayButton', config);
+```
+<a name="AfterpayOnSiteMessaging+load" id="AfterpayOnSiteMessaging+load" href="#AfterpayOnSiteMessaging+load">&nbsp;</a>
+### afterpayOnSiteMessaging.load()
+The final method after configuring the AfterpayOnSiteMessaging to
+start the load process.
+**Kind**: instance method of [<code>AfterpayOnSiteMessaging</code>](#AfterpayOnSiteMessaging)
+<a name="AfterpayOnSiteMessaging+onError" id="AfterpayOnSiteMessaging+onError" href="#AfterpayOnSiteMessaging+onError">&nbsp;</a>
+### afterpayOnSiteMessaging.onError([callback])
+If the process fails, the function passed as parameter will be called.
+Important: Do not perform thread blocking operations in callback such as window.alert() calls.
+**Kind**: instance method of [<code>AfterpayOnSiteMessaging</code>](#AfterpayOnSiteMessaging)
+| Param | Type | Description |
+| --- | --- | --- |
+| [callback] | [<code>OnErrorCallback</code>](#OnErrorCallback) | Function to be called when there is an error in the flow. |
+**Example**
+```js
+AfterpayOnSiteMessaging.onError((eventData) => console.log('Some error occur'));
+```
+<a name="OnErrorCallback" id="OnErrorCallback" href="#OnErrorCallback">&nbsp;</a>
+## OnErrorCallback : <code>function</code>
+Callback for onError method.
+**Kind**: global typedef
+| Param | Type |
+| --- | --- |
+| data | <code>unknown</code> \| <code>null</code> |
 ## License
 Copyright (c) 2025 paydock