## 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>
```
