Show Finance Offers

What You'll Need | Initialise FlexPay Widget | Show Finance Offers | Eligibility Check | Start Checkout | Complete Checkout | Confirm Payment

5. Show Finance Offers

Once the FlexPay Widget is initialised on your website, consumers will be able to browse the finance options available to them on any webpage where you are displaying the FlexPay Tile or highlighting tailored finance offers. There are two ways to do this:

• Directly from the floating FlexPay Tile, on any pages where this is being displayed
• Inline alongside a specific product/basket, tailoring offers to the price (see below)

👍

Spread the word

Highlighting the existence of FlexPay on your website can help to increase sales and basket sizes!

FlexPay Tagline

You can promote tailored finance offers on individual product pages, alongside product results in category pages or search results, in the basket page, or at checkout. This uses the FlexPay Tagline, which provides text to highlight the lowest monthly finance offer for a given value alongside a call to action.

From this call to action a customer can open the FlexPay Widget and see the available finance offers tailored to the value of the corresponding product, basket or planned checkout. This will also allow the customer to quickly check their eligibility to use FlexPay for the purchase, before they make it.

Important Note: you will need your init token (see step 4, Initialise FlexPay Widget) to access these features as it is required in calls to the relevant Javascript function below.

Tailored Finance Offers

The FlexPay Tagline can introduce customers to tailored finance offers any time you display a specific product or basket and associated value. It does this by dynamically presenting a compelling finance offer from your ratecard (see 'Best Offer' below) and allowing click through to other tailored offers.

In order to display the tagline, the FlexPay Widget Javascript object allows you to call a finance calculator function that will generate item or basket specific finance calculations and provide details of the best available finance offer, along with supporting Black Horse promotional copy and branding.

Use the widget function financeInfo() on the window.flexpayWidget object (after having included and initialised the FlexPay Widget script).

window.flexpayWidget.financeInfo(product, options, version);

The following parameters should be supplied:

• product which for FlexPay is blackhorse-flexpay
• options should have the following properties:

• Version should be set as a string with v2.0 unless otherwise specified to you

Displaying Best Offer

flexpayWidget.financeInfo returns a Promise that resolves to a JavaScript object containing everything which your platform needs to publish a FlexPay Tagline containing the best (lowest) monthly finance offer, natively in your webpages alongside corresponding products or baskets.

*Important Note: if your ratecard contains no offers for a given product or basket value, then no fixed monthlyInstalment value will be returned and the customer will only be able to finance their purchase using flexible credit - paying at least a minimum amount each month. The tagline text will reflect this.

Example

await window.flexpayWidget.financeInfo('blackhorse-flexpay', {value: 2094, initToken: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FwaS5zdGFnaW5nLms4cy5kZWtvcGF5Lm9yZy8iLCJhdWQiOiJodHRwczovL2FwaS5zdGFnaW5nLms4cy5kZWtvcGF5Lm9yZyIsImp0aSI6ImM1ZmFmZGRjLTk5MDItNDI4NS1iN2VhLTVhODlmNjQzNDZiYSIsInN1YiI6ImIwMTUxOTgzLTFkZGItNGQ4OS04Y2M4LTE3ZjcwOGRhNTYwNiIsImlhdCI6MTY0ODQ2MDYxOCwiZXhwIjoxNjQ4NDYyNDE4LCJuYW1lIjoiU2tpbGxzIFBlb3BsZSIsImh0dHBzOi8vYXBpLmRla29wYXkuY29tL3Byb2R1Y3QiOnsicmV2b2x2aW5nX2NyZWRpdCI6eyJvZmZlcnMiOlt7ImlkIjoiYzM5YzZiYTUtZTc0ZC00NGQ4LThmNmEtZTdkZGEwMDI4YWRmIiwiZGVzY3JpcHRpb24iOiIxOCBtb250aHMgYXQgMjEuOSUgc3RhbmRhcmQgcmF0ZSIsInRlcm0iOjE4LCJhcHIiOjIxLjksInByb21vdGlvbmFsIjpmYWxzZSwic3BlY2lhbCI6ZmFsc2V9LHsiaWQiOiJhYTg5OTc5Ni1kOTJiLTQxZmQtOGY2YS00MzYzNWRhZTNkNjMiLCJkZXNjcmlwdGlvbiI6IjI0IG1vbnRocyBhdCAyMS45JSBzdGFuZGFyZCByYXRlIiwidGVybSI6MjQsImFwciI6MjEuOSwicHJvbW90aW9uYWwiOmZhbHNlLCJzcGVjaWFsIjpmYWxzZX0seyJpZCI6IjNmNTg1ODIxLWI4NDUtNDc5NC1iOWFhLTI2ODU5YjZmZGQzZCIsImRlc2NyaXB0aW9uIjoiNiBtb250aHMgYXQgNC45JSBBUFIiLCJ0ZXJtIjo2LCJhcHIiOjQuOSwicHJvbW90aW9uYWwiOmZhbHNlLCJzcGVjaWFsIjpmYWxzZX0seyJpZCI6IjhhNjQ1ZTg3LTc3MDQtNGFhNC04ZTBmLTJhYjFjMGQ5ZGU4MSIsImRlc2NyaXB0aW9uIjoiMTIgbW9udGhzIGF0IDAlIEFQUiIsInRlcm0iOjEyLCJhcHIiOjAsInByb21vdGlvbmFsIjpmYWxzZSwic3BlY2lhbCI6ZmFsc2V9XSwiX2xpbmtzIjp7InNlbGYiOnsiaHJlZiI6Imh0dHBzOi8vYXNzZXRzLmRla29wYXkuY29tL3dhbGxldC9pbmRleC5qcyJ9LCJwcm9kdWN0OmFwcGx5Ijp7ImhyZWYiOiJodHRwczovL2Rla29wYXkuZGV2ZWxvcC5rOHMuZGVrb3BheS5vcmcifX19fX0._12MTCFr3KGVrcI3osnGU2SUUfngAwPs9OFSEmVmGdY}, 'v2.0');
/*
 returns {
   total: 2094,
   monthlyInstalment: 87,
   financeProductLogo: 'https://finance.blackhorseflexpay.co.uk/Logo/Lender/blackhorse.png',
   tagline: 'Get 0% interest from £0.87 per month',
   cta: 'Learn more',
 }
*/

The purpose of this tagline is to provide customers with more information about purchase options prior to checkout, therefore increasing conversion and potentially spend. By displaying this inline with the necessary product or basket context, customers understand how effective FlexPay can be.

If a customer has gone on to successfully check their eligibility for FlexPay, then the tagline can also contain the FlexPay 'eligibility beacon' to signpost that they have been successful and remind them wherever it is displayed that they are already pre-approved to use the offer for their purchase.

In this instance flexpayWidget.financeInfo will return additional fields to allow you to display a more tailored call to action for pre-approved customers:

Implementation

To implement the tagline, we suggest building a front end component which displays the best available offer tailored to a product or basket and supplied value, retrieved from the flexpayWidget.financeInfo() function.

This component in turn should render the supplied Black Horse logo, the suggested tagline text (inclusive of best available offer, if applicable) and proposed call to action - targeted at driving interest in using finance.

When the call to action is clicked on, it should invoke flexpayWidget.promotionalInfo(), opening the FlexPay Widget to allow browsing of all available Black Horse finance offers tailored to the product or basket.

To ensure applicable offers are returned to the customer, a single parameter containing only the product or basket price in pence should be included when calling the flexpayWidget.promotionalInfo() function:

const widget = window.flexpayWidget.init(initToken);
flexpayWidget.promotionalInfo(15000); // a single argument of product or basket price in pence is always required.

You can also bind the flexpayWidget.promotionalInfo() function to a click handler used anywhere on your product, basket or checkout screens, so that there are other ways that a customer can quickly find out more about specific finance opportunities for their purchase.

Complete Example:

<p id='tagline'></p>
<p id='monthlyInstalment'></p>
<p id='total'></p>
<button id="my-product-promotional-info-button"></button>
<script>
    populateTagline();

    async function populateTagline() {
        financialInfo = await window.flexpayWidget.financeInfo('blackhorse-flexpay', {
            value: 2094,
            // optional product or basket amount in pence
            initToken: initToken
        }, 'v2.0');
        document.getElementById('tagline').innerHTML = financialInfo.tagline;
        if (financialInfo.monthlyInstalment != undefined) {
            document.getElementById('monthlyInstalment').innerHTML = financialInfo.monthlyInstalment;
        }
        document.getElementById('total').innerHTML = "Product Cost: " + financialInfo.total;
        const myButton = document.getElementById('my-product-promotional-info-button');
        myButton.innerHTML = '<img src="' + financialInfo.financeProductLogo + '"/>' + financialInfo.cta;
        myButton.addEventListener('click', () => {
            widget.promotionalInfo(financialInfo.total);
        })
    }
</script>