Skip to main content

Sunbit Estimate SDK

Overview#

Sunbit Estimate lets your customers know about Sunbit while they shop. By integrating with the As Low As SDK, your customers will know that buy now, pay-over-time options are available before they check out.

Product page with ALA,Prequal

By integrating with the As Low As API, you can get a quick view into monthly payment options at a particular purchase price.

As Low As SDK#

This guide will help you integrate the As Low As SDK.

Initialize the SDK#

The Sunbit SDK for JavaScript doesn't require any standalone files to be downloaded or installed. Instead you simply need to include a short piece of regular JavaScript in your HTML that will asynchronously load the SDK into your pages. The async load means that it does not block loading other elements of your page. The following snippet of code will give the basic version of the SDK where the options are set to their most common defaults. You should insert it on each page you want to load it, directly after the opening tag.

<script>    window.sunbitAsyncInit = function() {        SUNBIT.init({        sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit        location       : '<YOUR LOCATION NAME>',        representative : '<REPRESENTATIVE>', //optional        ro: '<RO>' //optional        });    };</script><script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>
AttributeRequiredTypeDescription
sunbitKeyyestextProvided to you by Sunbit.
locationyestextThe unique identifier of the merchant you provided during the merchant onboarding process.
representativenotextMerchant representative name.
ronotextAn external transaction identifier sent by the integrator.

As Low As text element#

  1. Add containers for Sunbit's element and disclaimer (it is mandatory to also show Sunbit's disclaimer when the As-Low-As component is being presented) and add IDs for these elements.
  2. Call the SUNBIT.UI.asLowAs method to add it to the document. This call accepts the following elements: MISSING
  3. Add the total amount to the elements for calculating an estimation. After the initial estimation calculation you can update the amount to render a new estimation, as detailed below.
Important

To update the estimation when the cart total or amount changes, either:

  1. Call SUNBIT.UI.asLowAs, with the same container elements and a new SUM, or;
  2. Use updateAmount method returned from calling SUNBIT.UI.asLowAs, which accepts a new amount - Number.
<body>...<div id="sunbit-ala"></div><div id="sunbit-ala-disclaimer"></div></body>
<script>    window.sunbitAsyncInit = function() {        SUNBIT.init({            sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit            location       : '<YOUR LOCATION NAME>', //mandatory for check financing link            representative : '<REPRESENTATIVE>', //optional            ro: '<RO>' //optional        });        window.sunbitAla = SUNBIT.UI.asLowAs("sunbit-ala", "sunbit-ala-disclaimer", {            totalAmount: <your initial total amount value>        });      };    ...    // your cart update code might look like this:    function recalculateCart(){        // calculate cart        window.sunbitAla.updateAmount(newTotal);    }</script><script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>

As Low As text element including link to check financing options#

This option works similarly to the As Low As element described above, but it also adds a link to the Sunbit Pre-Qualification website ("check financing options").

Example

<body>...<div id="sunbit-ala"></div><div id="sunbit-ala-disclaimer"></div></body>
<script>    window.sunbitAsyncInit = function() {        SUNBIT.init({            sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit            location       : '<YOUR LOCATION NAME>', //mandatory for check financing link element            representative : '<REPRESENTATIVE>', //optional            ro: '<RO>' //optional        });        window.sunbitAla = SUNBIT.UI.asLowAsWithLink("sunbit-ala", "sunbit-ala-disclaimer", {            totalAmount: <your initial total amount value>,            theme: 'default'        });      };    ...    // your cart update code might look like this:    function recalculateCart(){        // calculate cart        window.sunbitAla.updateAmount(newTotal);    }</script><script async defer src="https://static.sunbit.com/sdk/sunbit-sdk.js"></script>

Switch to Production Mode#

Change mode in SUNBIT.init function to "prod"

<script>        window.sunbitAsyncInit = function() {          SUNBIT.init({            sunbitKey      : '<YOUR SUNBIT_KEY>', //mandatory, provided by Sunbit            mode           : 'prod',            location       : '<YOUR LOCATION NAME>', //optional            representative : '<REPRESENTATIVE>', //optional            ro: '<RO>' //optional          });        };</script>