Installing Divido Widget Version 3

The Divido widget has two functions one is for it to display on product pages to help give indicative finance costs. The other is to allow customers to select finance during the checkout process.

How you install it is nearly the same for both with the only difference is the type of html for checkout.

Include the following script on your page:

<script type="text/javascript" src="http://cdn.divido.com/widget/dist/divido.calculator.js"></script>

For a powered by divido client like duologi its as simple as changing to:

https://cdn.divido.com/widget/dist/duologi.calculator.js

For powered by divido contact your account manager to find out the correct endpoint to use.

The next thing is to include the api key for the merchant: Using a sample divido sanbox api key. sandbox_0fa84548.9bc12e569d3e2d0c3131bfb5eeb647d0

For this to work the api key is only needed up to the first fullstop. sandbox_0fa84548

As an example this is the function we use in our Magento 2 plugin to grab the right part:

    public function getDividoKey()
    {
        $apiKey = $this->getApiKey();
        
        if (empty($apiKey)) {
            return '';
        }
    
            $keyParts = explode('.', $apiKey);
            $relevantPart = array_shift($keyParts);
    
            $jsKey = strtolower($relevantPart);
            
            return $jsKey;
    }

Include the widget configuration:

<script type='text/javascript'>
       window.__widgetConfig = {
           apiKey: 'sandbox_0fa84548',
       };
</script>

Next you need to include the html on the page:

<div id='financeWidget' data-calculator-widget data-mode="lightbox" data-amount='10000'></div>

For merchants upgrading from our prevous version please note that this amount now needs to be passed in pence/cents.

For some sites html may be rendered at a different stage - if you are finding your site does this you can reinitialise the widget after the page has loaded (or product values change) with the following:

__widgetInstance.init()

Checkout

On the checkout page you would want to change the mode from lightbox to calculator.

As long as the widget is inside a <form> tag it will add two hidden fields for divido_plan and divido_deposit

Another change for merchants updating from the previous version: The deposit value that is sent through has changed to work out the correct value to send in the application request you need to divide the amount passed from the basket grandTotal.

$deposit = round(($depositPercentage) / $grandTotal, 2);

You may need to divide this by 100 to get the actual percentage later on. ->withDepositPercentage($deposit / 100)

Customizatons

You can specify specific plans to be displayed.

<div id='financeWidget' data-calculator-widget data-mode="calculator" data-amount='10000' data-plans='69b68f20-735f-41ce-94da-8a740493955d,3869c774-a7bc-4723-974f-1b1a885bd3ab'></div>

You can add a personalised footnote.

<div id='financeWidget' data-calculator-widget data-mode="calculator" data-amount='10000' data-footnote='Select Finance for Big Ticket Items'></div>

We removed from this version the button prefix/suffix options and replaced them with the button text template for more flexibility:

<script type='text/javascript'>
       window.__widgetConfig = {
           apiKey: 'sandbox_0fa84548',
           buttonTextTemplate: 'prefix $p suffix'
       };
</script>

Full Example

A full example below.

<html>
  <head>

      <!-- set widget config -->
      <script>

        __widgetConfig = {
          apiKey: 'sandbox_0fa84548',
        }

      </script>
  </head>
  <body>

    <!-- calculator code -->
    <div
      data-calculator-widget
      data-amount="100000"
      data-mode="calculator"
      data-footnote="Proin lacinia volutpat neque, id tempus nibh tristique a. Mauris at tellus congue, fermentum purus in, cursus nisi."
    ></div>
      <!-- load calculator script -->
      <script src="https://cdn.divido.com/widget/dist/divido.calculator.js"></script>
  </body>
</html>

JonnyCarter/Divido Widget V3.md

Installing Divido Widget Version 3

Checkout

Customizatons

Full Example