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.
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:
- Retrieve your sandbox API keys at https://sandbox.affirm.com/dashboard/#/apikeys to use in the
- Use the script URL https://cdn1-sandbox.affirm.com in the
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
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:|
|data-affirm-type||optional string||Sets the Affirm logo type. Default displays Affirm logo image. Possible values:|
|data-affirm-color||optional string||Sets the Affirm logo color. Default displays blue Affirm logo. Possible value:|
|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:|
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.
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
Updated over 1 year ago