Load The Widget SDK

Initialization

This is

<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/v1/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>
  1. 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
  1. 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>
  1. Place a div element with class set as ca-promotional-widget wherever you want to add a Promotional Widget element
  2. As described above, when adding the Promotional Widget to a page, the page content remains untouched
  3. 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

  1. 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).

There are currently two types of widgets for merchants using Synchrony as the prime lender in the waterfall - one for each program offered by Synchrony.


Did this page help you?