Product page widget

The product page widget will show on the product description page (PDP) if the product is leasable. It shows the lowest monthly lease price and has a learn more modal.

Step 1 - Initialise the Widget

To initialise the Raylo Pay product widget an integration script needs to be added to the product description page HTML.

<script src="https://widgets.staging.raylopay.com/integration.js"></script>

It asynchronously loads the contents into the page. This script needs to ideally be embedded at the bottom of the HTML page.

Replace https://widgets.staging.raylopay.com to https://widgets.raylopay.com when you move from your testing environment to Production

Step 2 - Embedding widgets into HTML Pages

Embedding the Product widgets into the pages of the e-commerce site requires adding a div tag to the relevant HTML document or template.

<div id="rayloPayProductWidget"></div>

Step 3 - Widget Configuration

Send the JWT which contains information on the merchant price so the lease price can be calculated.

<script>
RayloPayProductWidget({
    merchantId: '<constant, provided by Raylo>',
    JWTToken: token,
    onPriceLoaded: (price) => {
        // do something with price.recurringAmount and price.initialAmount
        // which are strings in the format "£0 or £0.00
    },
    onCheckoutUnavailable: () => {
        // handle the fact that Raylo Pay is not available for this product
    }
}).render('#rayloPayProductWidget')
</script>

For a full list of the supported properties, see the Widget properties page.