Update promotional messaging attributes

Overview

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.

Instructions

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

Recommended: Sandbox

Perform this upgrade in your development environment connected to our sandbox. To connect your development environment to our sandbox, do the following:

Retrieve your sandbox API keys at https://sandbox.affirm.com/dashboard/#/apikeys to use in the Affirm.js embed code
Use the script URL https://cdn1-sandbox.affirm.com in the Affirm.js embed code

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-promo-id="XXXXXXXXXXXXXX"...>

<p class="affirm-site-modal" data-promo-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

Required attributes

Classes

These classes determine the Affirm promotional messaging component to display.


affirm-as-low-as	required string	Displays monthly payment messaging with educational product modal
affirm-site-modal	required string	Displays educational site modal
affirm-product-modal	required string	Displays educational product modal
data-amount	optional integer	The loan amount passed to display price specific messaging. Value in USD cents (e.g. $100 = 10000)
data-page-type	required string	Identifies your promotional messaging so Affirm can apply the necessary customizations based on which page they are displayed. Possible values are: homepage landing search category product cart payment banner
data-affirm-type	optional string	Sets the Affirm logo type. Default displays Affirm logo image. Possible values: text symbol
data-affirm-color	optional string	Sets the Affirm logo color. Default displays blue Affirm logo. Possible value: black white
data-category	optional string	Identifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
data-brand	optional string	Identifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
data-sku	optional string	Identifies the SKU associated with the messaging for analytics tracking (e.g., ABC123, SMSNG-50-TV).
data-promo-id	optional string	Customizes the messaging with different styling, copy, or loan terms. Overrides customizations provided by data-page-type.
data-learnmore-show	optional string	Shows or suppresses the link to the modal. Possible values: false true

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:

category
product
cart
payment

Since site modals (affirm-site-modal) do not display price-specific information, they are typically used with the following data-page-types:

homepage
banner
landing
search

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