Show Finance Offers

What You'll Need | Initialise Deko Wallet | Show Finance Offers | Start Checkout | Complete Checkout | Confirm Payment

5. Show Finance Offers

Once the Deko Wallet is initialised and you are displaying the finance tile (subject to Financial Promotion requirements) 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)
👍

Embedded Finance for the win!

Highlighting the existence of finance within your platform experience is proven to increase customer sales and can often increase purchase value too. This is where the Deko Wallet makes implementing effective embedded finance a breeze!

Whether or not you choose to show the tile, you can promote tailored finance offers on individual product pages, invoices and baskets, by obtaining text to highlight the lowest monthly finance offer for a given value. This is known as the Deko Wallet tagline.

From the tagline you are able to open the Deko Wallet and see the available Finance Offers tailored to the value of the corresponding product, invoice or basket. Remember that you can only use this feature subject to Financial Promotion requirements.

Note: you will need the init token (see step 4, Initialise Deko Wallet) to access these features.

Tailored Finance Offers

The Deko Wallet Javascript library allows you to access a finance calculator which can generate item, basket and invoice specific finance calculations and provide details of the available Finance Offers along with supporting promotional copy and branding.

Retrieving Tailored Offers

Invoke the wallet function financeInfo() on the window.dekoWallet object (after having included and initialised the Deko Wallet script).

window.dekoWallet.financeInfo(Product, Options, Version);

Arguments:

  • Product requests the applicable embedded finance service from Deko and in most cases should be set to multi_lender to access our single checkout pre-configured with agreed lenders from our network

  • Options has the following properties:

PropertyValueDescription
valueNumberthe value of the product or basket that you wish to calculate in pence
initTokenJWTthe Init token returned from the Step 4. Initialise response
  • Version a workaround for backwards compatibility. Should be a string with the value: 'v2.0'
📘

Lender Specific Products

As the embedded finance market leader, Deko also powers complete finance propositions for a number of leading banks and lenders. From time to time we may advise you to use an alternate Product value if you wish to access and offer these specific products, but most platform partners rely on our one-stop multi_lender service.

Displaying Best Offer

dekoWallet.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 (subject to Financial Promotion requirements).

PropertyValueDescription
monthlyInstalmentnumber (100)monetary value in pence
totalnumber (1000)monetary value in pence
taglinetext ("Pay £99.99 in 4 instalments. Interest free.")suggested promotional text
ctastring ("Learn more")suggested call to action text to invoke wallet promotionalInfo(see below)
financeProductLogostringoptional asset link to a logo for the finance product

Example

await window.dekoWallet.financeInfo('instalment', {value: 2094, initToken: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL2FwaS5zdGFnaW5nLms4cy5kZWtvcGF5Lm9yZy8iLCJhdWQiOiJodHRwczovL2FwaS5zdGFnaW5nLms4cy5kZWtvcGF5Lm9yZyIsImp0aSI6ImM1ZmFmZGRjLTk5MDItNDI4NS1iN2VhLTVhODlmNjQzNDZiYSIsInN1YiI6ImIwMTUxOTgzLTFkZGItNGQ4OS04Y2M4LTE3ZjcwOGRhNTYwNiIsImlhdCI6MTY0ODQ2MDYxOCwiZXhwIjoxNjQ4NDYyNDE4LCJuYW1lIjoiU2tpbGxzIFBlb3BsZSIsImh0dHBzOi8vYXBpLmRla29wYXkuY29tL3Byb2R1Y3QiOnsicmV2b2x2aW5nX2NyZWRpdCI6eyJvZmZlcnMiOlt7ImlkIjoiYzM5YzZiYTUtZTc0ZC00NGQ4LThmNmEtZTdkZGEwMDI4YWRmIiwiZGVzY3JpcHRpb24iOiIxOCBtb250aHMgYXQgMjEuOSUgc3RhbmRhcmQgcmF0ZSIsInRlcm0iOjE4LCJhcHIiOjIxLjksInByb21vdGlvbmFsIjpmYWxzZSwic3BlY2lhbCI6ZmFsc2V9LHsiaWQiOiJhYTg5OTc5Ni1kOTJiLTQxZmQtOGY2YS00MzYzNWRhZTNkNjMiLCJkZXNjcmlwdGlvbiI6IjI0IG1vbnRocyBhdCAyMS45JSBzdGFuZGFyZCByYXRlIiwidGVybSI6MjQsImFwciI6MjEuOSwicHJvbW90aW9uYWwiOmZhbHNlLCJzcGVjaWFsIjpmYWxzZX0seyJpZCI6IjNmNTg1ODIxLWI4NDUtNDc5NC1iOWFhLTI2ODU5YjZmZGQzZCIsImRlc2NyaXB0aW9uIjoiNiBtb250aHMgYXQgNC45JSBBUFIiLCJ0ZXJtIjo2LCJhcHIiOjQuOSwicHJvbW90aW9uYWwiOmZhbHNlLCJzcGVjaWFsIjpmYWxzZX0seyJpZCI6IjhhNjQ1ZTg3LTc3MDQtNGFhNC04ZTBmLTJhYjFjMGQ5ZGU4MSIsImRlc2NyaXB0aW9uIjoiMTIgbW9udGhzIGF0IDAlIEFQUiIsInRlcm0iOjEyLCJhcHIiOjAsInByb21vdGlvbmFsIjpmYWxzZSwic3BlY2lhbCI6ZmFsc2V9XSwiX2xpbmtzIjp7InNlbGYiOnsiaHJlZiI6Imh0dHBzOi8vYXNzZXRzLmRla29wYXkuY29tL3dhbGxldC9pbmRleC5qcyJ9LCJwcm9kdWN0OmFwcGx5Ijp7ImhyZWYiOiJodHRwczovL2Rla29wYXkuZGV2ZWxvcC5rOHMuZGVrb3BheS5vcmcifX19fX0._12MTCFr3KGVrcI3osnGU2SUUfngAwPs9OFSEmVmGdY}, 'v2.0');
/*
 returns {
   total: 2094,
   monthlyInstalment: 87,
   financeProductLogo: 'https://assets.dekopay.com/Logo/Lender/newpay.png',
   tagline: 'Get 0% interest from £0.87 per month',
   cta: 'Learn more',
 }
*/

The purpose of this feature is to provide customers with more information about purchase options prior to checkout, thus increasing conversion and potentially spend.

Displaying Best Offer

We suggest building a front end component which displays the best available offer tailored to a product or basket, that when clicked, invokes the wallet.promotionalInfo() function, which will open the Deko Wallet and allow browsing of available finance offers:

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

You can bind the wallet.promotionalInfo() function to a click handler used anywhere on your product, basket or invoice screens, so that a customer can quickly find out more about specific finance opportunities 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 wallet = window.dekoWallet.init(initToken);
  const financialInfo = await window.dekoWallet.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',  () => {
  	wallet.promotionalInfo(financialInfo.total);
  })
</script>

Footer