Affirm promotional messaging components—monthly payment messaging and educational modals—show customers how they can use Affirm to finance their purchases. You may have implemented promotional messaging with an incorrect or invalid data-promo-id value. This displays incorrect terms in Affirm modal and messaging. This guide will review Affirm promotional messaging and provide instructions on how to update the data-attributes.
Monthly payment messaging
Monthly payment messaging consists of concise copy that offers price-specific information and contains a link that triggers an educational product modal. Examples of monthly payment messaging include:
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:
- Product modals provide price-specific information. Clicking the monthly payment message triggers the product modal.
- 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.
Upgrade steps are:
- Make sure all Promotional Messaging is now updated to use data-page-type
- Reach out to Affirm staff to add any existing customizations to the messaging
- Test and set live
Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:
Update Affirm promotional messaging attributes
There may be HTML elements on your page for our 'as low as' promotional messaging that resembles this:
<p class="affirm-as-low-as" data-promo-id="XXXXXXXXXXXXXX"...>
You may also have banners that are similar to this:
<p class="affirm-product-modal" data-promod-id="XXXXXXXXXXXXXX"...>
<p class="affirm-site-modal" data-promod-id="XXXXXXXXXXXXXX"...>
You will need to remove the data-promo-id attribute from the above HTML elements on your site and replace it with data-page-type attributes.
In each HTML element, include the new 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.
This determines the Affirm promotional messaging component to display.
|affirm-as-low-as||Monthly payment messaging links to a product modal that offers additional price-specific information and prequalification.|
|affirm-site-modal||A site modal provides general information about Affirm and does not include pricing information. Any HTML element can trigger a site modal.|
This is the loan amount passed to the monthly payment messaging component and is required if you want to display price specific messaging. Value in USD cents (e.g., $100 = 10000).
This identifies your promotional messaging so Affirm can apply the necessary customizations based on the page they’re displayed.
|category||A product category page|
|product||A product description page|
|cart||The customer cart page|
|payment||The payment selection page|
|homepage||Your site's home page|
|landing||A landing page that describes Affirm|
|search||Your site's search results page|
|banner||A banner image (use for any promotional messaging triggered by your banner or image regardless of page location)|
Monthly payment messaging (affirm-as-low-as) usually display price-specific information (requires data-amount) and are typically used with the following data-page-types:
Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:
If you don’t pass data-page-type, the component will use a default setting.
Before setting these changes live, you’ll need to work with your Client Success Manager to ensure all the existing customizations are moved over to use data-page-type attributes.
Test and set live
Confirm that all of your Affirm promotional messaging components display as expected.
After testing everything, update the script parameter in the Affirm.js embed code to point to our live environment at https://cdn1.affirm.com and replace the public_api_key parameter with your live public API key found at https://affirm.com/dashboard/#/apikeys.
After you’ve connected to our live environment, you’re ready to deploy to your production environment.