HTML reference

TypeData typeValueDescription
Class
required
stringThese classes determine the Affirm promotional messaging component to display.
affirm-as-low-asDisplays monthly payment messaging with educational product modal.
affirm-site-modalDisplays educational site modal.
affirm-product-modalDisplays educational product modal.
data-amount
required
integerThe product price amount passed to display loan price specific messaging. Value in USD cents (e.g. $100 = 10000).
data-promo-id optionalstringCalls a specific promotional messaging template and/or financing program.
data-page-type
required
stringIdentifies your promotional messaging so Affirm can apply the necessary customizations based on which page they are displayed.
homepageYour site's homepage.
landingA landing page that describes Affirm.
searchYour site's search results page.
categoryYour site's category page.
productA product description page.
cartYour site's cart page.
paymentThe payment selection page.
bannerA banner image (use for any promotional messaging triggered by your banner or image regardless of page location).
marketplaceThe marketplace landing page.
data-affirm-type
optional
stringSets the Affirm logo type. Default displays Affirm logo image.
textDisplays Affirm logo in plain text.
symbolDisplays Affirm logo as a symbol.
data-affirm-color
optional
stringSets the Affirm logo color. Default displays the primary (indigo) Affirm logo.
blackDisplays black color Affirm logo.
whiteDisplays white color Affirm logo.
data-category
optional
stringIdentifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
data-brand
optional
stringIdentifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
data-sku
optional
stringIdentifies the SKU associated for promotional financing on select products only and analytics tracking(e.g., ABC123, SMSNG-50-TV).
data-learnmore-show
optional
stringShows or suppresses the link to the modal.
falseSuppresses the link and hyperlinks the entire promo.
trueShows the link.