Skip to main content

 

Affirm Merchant Help

Update Promotional Messsaging Attributes

Overview

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.

Promotional Messaging

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:

Screen Shot 2018-12-04 at 2.02.56 PM.png

Screen Shot 2018-12-04 at 2.03.34 PM.png

Screen Shot 2018-12-04 at 2.01.57 PM.png

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:

  • 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.

modal-image.png

 

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 development

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.

Required attributes

class

string
This determines the Affirm promotional messaging component to display.

Value Description
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.

data-amount

integer
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).

data-page-type

string
This identifies your promotional messaging so Affirm can apply the necessary customizations based on the page they’re displayed.

Value Description
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:

  • 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.