Monthly payment messaging

Educational modals

Educational modals are pop-up windows that offer more information about Affirm. They also provide prequalification, which allows your customers to discover how much they qualify to spend with Affirm on your site early in their shopping process. After completing the application and finishing shopping, the prequalified amount is automatically applied at checkout when they select Affirm as their payment option. There are two types of educational modals:

Site modals offer general information about Affirm and do not include pricing information. Any HTML element can trigger a site modal, though these are typically links on Affirm-related landing pages, site banners, or your home page.

1. Determine Affirm promotional messaging placement

If you’re integrating Affirm for the first time, you’ll need to go through a design process to determine where you want to include Affirm promotional messaging on your site and what the messaging should look like and say.

Please reach out to your Client Success Manager if you need help designing your messaging placement. Also, remember that Affirm must approve your messaging to ensure that it complies with regulatory guidelines. After your team finalizes the design, you can add the messaging to your site quickly.

2. Add Affirm.js

Add the Affirm.js embed code to the head of your global page template if you haven't already done so.

In each HTML element, be sure to include the data-page-type attribute corresponding to the page where that promotional messaging component is placed. The data-page-type attribute allows you to customize messaging in the future without development work. By default, promotional messaging on product pages have prequalification enabled, but you can work with your Client Success Manager to change this and configure additional customizations.See the links below for additional sample code.

Customize educational modals

You can customize your modals by adding a hero image and a logo with the following dimensions:

Hero image @2x: 960px width x 1462px height

Hero image @1x: 480px width x 731px height

Logo image @2x: 400px width x 112px height

Logo image @1x: 200px width x 56px height

4. Add code to handle price changes

The price displayed on your product or cart pages may change due to product variants, quantity changes, etc. If your Affirm promotional messaging displays before the price update, the messaging will be inaccurate. To keep messaging updated, implement this refresh function into your price change callback function:

affirm.ui.refresh();

Page reload

If the product’s price or the Affirm promotional messaging display after the page loads, or if you included the above refresh function statically on the page, wrap it in the affirm.ui.ready() callback function. Doing so ensures that the page does not call the refresh function before Affirm.js initializes.

affirm.ui.ready(function(){
affirm.ui.refresh();
});

Price update

When the price updates on your page, call the refresh function in the same callback function that handles your price change event.