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:

• 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.

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.

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.