HTML Reference

Type	Data type	Value	Description
Class required	string		These classes determine the Affirm promotional messaging component to display.
		`affirm-as-low-as`	Displays monthly payment messaging with educational product modal.
		`affirm-site-modal`	Displays educational site modal.
		`affirm-product-modal`	Displays educational product modal.
data-amount required	integer		The product price amount passed to display loan price specific messaging. Value in USD cents (e.g. $100 = 10000).
data-promo-id optional	string		Calls a specific promotional messaging template and/or financing program.
data-page-type required	string		Identifies your promotional messaging so Affirm can apply the necessary customizations based on which page they are displayed.
		`homepage`	Your site's homepage.
		`landing`	A landing page that describes Affirm.
		`search`	Your site's search results page.
		`category`	Your site's category page.
		`product`	A product description page.
		`cart`	Your site's cart page.
		`payment`	The payment selection page.
		`banner`	A banner image (use for any promotional messaging triggered by your banner or image regardless of page location).
		`marketplace`	The marketplace landing page.
data-affirm-type optional	string		Sets the Affirm logo type. Default displays Affirm logo image.
		`text`	Displays Affirm logo in plain text.
		`symbol`	Displays Affirm logo as a symbol.
data-affirm-color optional	string		Sets the Affirm logo color. Default displays the primary (indigo) Affirm logo.
		`black`	Displays black color Affirm logo.
		`white`	Displays white color Affirm logo.
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 for promotional financing on select products only and analytics tracking(e.g., ABC123, SMSNG-50-TV).
data-learnmore-show optional	string		Shows or suppresses the link to the modal.
		`false`	Suppresses the link and hyperlinks the entire promo.
		`true`	Shows the link.