Load The Widget SDK

❗️
This article is deprecated.

Initialization

The code below shows how to add the ChargeAfter Widget SDK to a website. The URL is a production URL. Please use the "Sandbox" tab to access the sandbox (test environment) URL.

<html>
    <body>
        <script type="text/javascript">
            // 1.
            var caConfig = {
                apiKey: 'public-api-key'
            };

            // 2.
            !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
            e.ChargeAfter || (e.ChargeAfter = {}),
            t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
            r.src="https://cdn.chargeafter.com/promotional-widget/v2/widget.min.js?t="+1*new Date,
            r.async=!0,o.parentNode.insertBefore(r,o))}
            (window,document,"script","chargeafter-promotional-widget",caConfig);
        </script>
    </body>
</html>

<html>
    <body>
        <script type="text/javascript">
            // 1.
            var caConfig = {
                apiKey: 'public-api-key',
                // Optional:
                storeId: 'your-store-id'
            };

            // 2.
            !function(e,t,c,a,n){var r,o=t.getElementsByTagName(c)[0];
            e.ChargeAfter || (e.ChargeAfter = {}),
            t.getElementById(a)||(e.ChargeAfter.cfg = n,(r=t.createElement(c)).id=a,
            r.src="https://cdn-sandbox.ca-dev.co/promotional-widget/v2/widget.min.js?t="+1*new Date,
            r.async=!0,o.parentNode.insertBefore(r,o))}
            (window,document,"script","chargeafter-promotional-widget",caConfig);
       </script>       
    </body>
</html>

Defining the configuration variable:

Initialize an object that holds the configuration for the Promotional Widget module
Set public-api-key to be the API key provided by ChargeAfter and is used to identify the merchant. The API key is public, as opposed to the private API key that is stored on the merchant’s servers only

Loading the Promotional Widget module:

Promotional Widget is hosted on CDNs with a geographic redundancy. The geographic location of the CDN is automatically selected by our servers to minimize latency
The above function will:
- Asynchronously fetch and load the Checkout module
- Initialize the Checkout module so it is available in the current page

Adding Promotional Widgets to a Page

<div>
    <!-- Some place in your webpage that fits a horizontal banner -->
    <div class="ca-promotional-widget" data-widget-type="banner-horizontal"></div>
</div>

<div id="your-products-list">
    <div id="your-example-product-1">
        
        <!-- Product details as usual -->
        
        <!-- Promotional Widget of default type -->
        <div class="ca-promotional-widget"></div>
    </div>
    
    <!-- Another product in products list -->
    <div id="your-example-product-2">
        <!-- Promotional Widget of default type with SKU and price set explicitly -->
        <div class="ca-promotional-widget" data-widget-item-sku="PRDCT1" data-widget-item-price="7999.99"></div>
    </div>
</div>

Place a div element with class set as ca-promotional-widget wherever you want to add a Promotional Widget element
As described above, when adding the Promotional Widget to a page, the page content remains untouched
Some Promotional Widgets can change their contents according to provided HTML attributes. We currently support the following attributes:

data-widget-item-sku (optional) - a string that uniquely identifies a related product
data-widget-item-price (optional) - a numerical positive string that represents the specific product price.

Please note: If there are additional add-ons to the cart price, such as: shipping, tax, discounts, gift cards or any other price adjustments - All of these add-ons must be calculated to a single total price that will be passed in the "data-widget-item-price".

For example:

item price: $100
Tax: $10
Shipping: $15
Promo discount: -$20

Total cart price: $105

data-widget-item-price = $105

data-widget-financing-page-url (required for some widget types) - a string of the url to the merchant’s financing page

The attributes data-widget-item-sku and data-widget-item-price will be used to calculate the monthly payment for a specific product. They can also be set dynamically via the ChargeAfter.promotionalWidget.update() function (see Updating Widget Data below).