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 and you are displaying the finance tile, consumers will be able to browse the finance options available to them on any webpage. There are two ways to do this:

• Directly from the tile on any pages, using a fixed purchase amount as an example
• 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, in the basket, or at checkout, by obtaining text to highlight the lowest monthly finance offer for a given value alongside the Black Horse brand. This is known as the FlexPay tagline.

From the tagline you are able to 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.

Note: you will need your init token (see step 4, Initialise FlexPay Widget) to access these features.

Tailored Finance Offers

To display a tagline, the FlexPay Widget Javascript object allows you to access a finance calculator that will generate item or basket specific finance calculations and provide details of the best available finance offers, along with any 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);

Parameters:

• Product which for FlexPay is blackhorse-flexpay
• Options has 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 the lowest monthly finance offer natively within your user experiences.

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 the 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 already successfully checked their eligibility through the FlexPay tile, then the tagline will contain the FlexPay 'eligibility beacon' to signpost that they have been successful and remind them that they are pre-approved to use the finance offer for their purchase.

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

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

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

You can bind the flexpayWidget.promotionalInfo() function to a click handler used anywhere on your product, basket or checkout screens, so that a customer can quickly find out more about specific finance opportunities for their purchase natively within your platform's user experience.

Example

<p id='tagline'></p>
<p id='monthlyInstalment'></p>
<p id='total'></p>
<button id="my-product-promotional-info-button"></button>
<script>
  const widget = window.flexpayWidget.init(initToken);
  const financialInfo = await window.flexpayWidget.financeInfo('instalment', {value: 9999});
  document.getElementById('tagline').innerHTML(financialInfo.tagLine);
  document.getElementById('monthlyInstalment').innerHTML(financialInfo.monthlyInstalment);
  document.getElementById('total').innerHTML(financialInfo.total);
  const myButton = document.getElementById('my-product-promotional-info-button');
  myButton.innerHTML(financialInfo.cta);
  myButton.addEventListener('click',  () => {
  	widget.promotionalInfo(financialInfo.total);
  })
</script>