Widget Types & Implementation

Depending on the financial product available, you can display the following widgets on your website by using the attribute data-widget-type.

Two predefined types exist today:

  1. Default widget - use by default for all merchants.
  2. Line of Credit widget - specifically created for the "Line of Credit" product type.

The ability to show multiple lender/provider promotions is also supported using the multi-lender widget. See the example of multi-lender widget at the bottom of this page.

Default Widget

Here's an example of how the widget may display:

Summary of widget contents:

  • $X.XX = calculated based on the promotional information configured in 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.
  • 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 the merchant.
  • Just click [brand] at checkout = Optional text block.
  • Font size is 12-14px
  • NOTE: The text size and weight is not customizable by a merchant.

🚧

Overriding or changing the widget content is not advised and will put the merchant at risk of complying with the lender/provider.

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

This widget will display the offer with the lowest monthly payment that a consumer can get. Clicking “Prequalify now” launches a pop-up window with the application process and other disclaimers, 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.
<div class="ca-promotional-widget" 
     data-widget-type="default-template"
     data-widget-item-sku="PRDCT2"
     data-widget-item-price="250"
     data-widget-financing-page-url="www.merchant.com/financing-info-page">
</div>

"Line of Credit" Widget

In order to implement the default widget, please use data-widget-type = "product-widget-line-of-credit" or keep this attribute empty (also use if attribute undefined).

This widget will display the offer with the lowest interest rate that a consumer can get. Clicking “Learn How” launches a pop-up window with a detailed description of the financing plan and other disclaimers, based on:

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

This widget uses the following attributes:

  • data-widget-type: “product-widget-line-of-credit”
  • data-widget-item-sku: “[your-product-name]”
  • data-widget-item-price: “[your-product-price]”
  • data-widget-financing-page-url: “[your-financing-page-absolute-url]”
<div class="ca-promotional-widget" 
     data-widget-type="product-widget-line-of-credit"
     data-widget-mode="price-focus"
     data-widget-item-sku="PRDCT2"
     data-widget-item-price="250"
     data-widget-financing-page-url="www.merchant.com/financing-info-page">
</div>

🚧

Must include a data-widget-financing-page-url in order for the widget to work

👍

Apply From The Widget!

There's an option to enable customers to apply for financing ahead of checkout, directly from the line of credit widget. This is a highly effective way to increase sales and AOV. Contact our support team via email to set it up

Multi Lender Widget

The multi-lender widget will enable retailers to market promotions from more than one lender/provider.

This widget uses the same attributes noted in the Default Widget section above.

Horizontal view:

Vertical view: