Show Finance Info

Getting Started | Initialise Deko Wallet | Show Finance Info | Start Checkout | Complete Checkout | Confirm Order | Test Data

5. Show Finance Products and Promotions

You can integrate this feature anywhere on your website to show customers a Finance Information widget prior to checkout, where they can explore and identify suitable finance products and promotions, either for a single product page or resulting from a specific customer basket.

This will also allow you to promote finance offers on individual product pages, by obtaining text to highlight the lowest monthly finance offer for a given product. This feature is known as the Deko finance tagline.

You will also need the init token (see step 4, Initialise Deko Wallet) to access this feature.

Deko Wallet - Promotional Information

Including the Deko Wallet Script enables you to:

  1. initialise the Deko wallet
  2. access a finance calculator that retrieves:
    • baskets
    • item specific calculations
    • promotional information

Retrieving promotional info

Invoke the wallet function financeInfo() on the window.dekoWallet object (after including the Deko Wallet script).

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

Arguments:

  • Product relates to a financial 'product' offering provided by Deko - for Pay Monthly the product is
    • instalment
  • 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':

dekoWallet.financeInfo returns a Promise that resolves to a JavaScript object.

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)
financeProductLogostringAsset link for the logo of 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',
 }
*/

When to use this information

You should use this information on the product display page to inform the customer of available options before making a credit application of any kind. The purpose of this feature is to provide customers with more information about purchase options prior to checkout, thus increasing conversion.

You can use the Wallet's promotional information screens after initialising the wallet (invoking Window.dekoWallet.init()). This feature gives the customer more information on a specific product or basket on the merchant website and therefore more flexibility when deciding on a basket size.

12381238

We suggest building a front end component that when clicked invokes the wallet.promotionalInfo() function. Invoking wallet.promotionalInfo() opens the wallet and displays finance product specific information.

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

Deko recommends binding this function to a click handler on a product details page so that the customer can quickly find out more about a specific item's financing opportunities whilst browsing the website.

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>

The promotional info pages are available anonymously and you do not need to provide a checkout invocation to view them. In order to start a checkout, use wallet.checkout() to trigger the transaction process.