Widget Structure & Implementation

Widget Structure

Summary of structure and contents:

• $X.XX = calculation is based the promotional information hosted by ChargeAfter.
• Excepteur sint occaecat cupidatat non proident = Text is determined by the lender and will generate dynamically from ChargeAfter. The text is not customizable by a merchant.
• Brand/logo = Rendered dynamically from assets hosted at ChargeAfter.
• Link 1, Link 2 = Links can be set up to launch the promotional modal or apply flow. The promotional modal displays additional details about the promotion in the widget. Text can be customized by merchant using CSS.
• Just click [brand] at checkout = Optional block that can be hidden. If visible, the text is customizable by merchant using CSS.
• Font size is 12-14px
• NOTE: The text size, weight and color is subject to lender approval. Merchants can change using CSS if approved by the lender.

You can find examples of commonly used widgets on the widget samples page.

🚧

Overriding or changing the widget content is not advised and will create a compliance risk with your financing provider.

Implementation

To implement the default widget, please use data-widget-type = "default-template" or keep this attribute empty.

The widget will display the promotions with the lowest monthly payment. Depending on link configured, user can launch a modal to start the prequalification application process or review promotional details based on:

1. Item price
2. Promotional codes configured for the merchant

This widget uses the following attributes:

• data-widget-type: “default-template”
• data-widget-item-sku: “[your-product-name]”
• data-widget-item-price: “[your-product-price]”
• data-widget-financing-page-url: “[your-financing-page-absolute-url]”
• data-widget-profile-id: ChargeAfter id references to a specific widget configuration, required for multi-lender.
• data-widget-item-tag: Optional attribute used for promotion targeting, see below.

<div class="ca-promotional-widget" 
     data-widget-type="default-template"
     data-widget-item-sku="PRDCT2"
     data-widget-item-price="250"
     data-widget-item-tag="TAG123"
     data-widget-financing-page-url="www.merchant.com/financing-info-page">
</div>

👍

Apply From the Widget!

There's an option to enable customers to apply for financing ahead of checkout, directly from the widget. This is a highly effective way to increase sales and AOV.

Targeted Promotions

In addition to price, the widget can also display promotion based on a product category.

To apply promotions to a single product or group of products the data-widget-item-tag can be used to pass a value used. A promo code for promotions configured for the lender/provider in the merchant's waterfall will be provided. Contact our support team for assistance.

Multi Lender Widget

The multi-lender widget will enable retailers to market promotions for multiple payment providers.

This widget uses the same attributes noted in the implementation section above.

Horizontal view:

Vertical view:

Widget application callback

Once application flow is completed from widget, a callback is triggered where the SDK passes relevant data to the hosting merchant.

See relevant page for more info.