Checkout page widget

The checkout page widget will show on the checkout page when Raylo Pay is enabled and selected as a checkout option, and the shopping basket is eligible for Raylo Pay. It shows the lowest monthly lease price and has a "Learn more" modal.

Step 1 - Initialise the Widget

To initialise the Raylo Pay checkout widget, an integration script needs to be added to the checkout 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 Checkout widget into the checkout page of the e-commerce site requires adding a div tag to the relevant HTML document or template.

<div id="rayloPayCheckoutWidget"></div>

Step 3 - Widget Configuration

Send the JWT which contains information on the merchant price and other checkout details, so the lease price can be calculated.

<script>
RayloPayCheckoutWidget({
    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('#rayloPayCheckoutWidget')
</script>

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

Step 4 - Checkout label

Relying on the onPriceLoaded callback enables you to customise the checkout option and show a specific price.

For example, the checkout option might load by default like this:

And after the price is loaded, it can change to this:

Sample code for that example:

<div id="rayloPayCheckoutOption">
    <input id="rayloPayPaymentMethod" type="radio" class="input-radio" name="payment_method" value="raylopay" checked="checked">
    <div style="vertical-align: baseline; position: relative; display: inline-block; height: 34px; ">
	<span id="rayloPayCheckoutLabel">Lease for less</span>
	<img src="https://widgets.raylopay.com/raylopay-logo.svg" alt="Raylo Pay logo" style="margin-left: 0.5em;">
</div>
    </input>
    <div id="rayloPayCheckoutWidget"></div>
</div>

<!-- elsewhere on the page... -->
<script src="https://widgets.staging.raylopay.com/integration.js"></script>
<script>
RayloPayCheckoutWidget({
    merchantId: '<constant, provided by Raylo>',
    JWTToken: '<checkout JWT value fetched from your backend>',
    onPriceLoaded: ({ recurringAmount }) => {
        document.getElementById('rayloPayCheckoutLabel').innerText =
            `Lease from ${recurringAmount}/mo`;
    },
    onCheckoutUnavailable: () => {
        document.getElementById('rayloPayCheckoutLabel').innerText =
            'Leasing with Raylo Pay is not yet available for this checkout';
        // also disable the Raylo Pay checkout option
        // and select a different one if Raylo Pay is the currently selected one
    }
}).render('#rayloPayCheckoutWidget')
</script>