Create a Component

affirm.ui.components.create creates an Affirm component in the background to be rendered on-demand on your website, drastically reducing the impact of loading time.


This component feature was designed to reduce latency and offer more flexibility to merchants.

var promoComponent = affirm.ui.components.create(‘promo’, options)

Method arguments

stringOnly promo is available.
objectSee Options object.

Options properties

amount integer The loan amount passed to display price specific messaging. The amount must be in cents.
stringThe page type of the page the promo/messaging is on:

- product (default)
affirmLogoType stringSets the Affirm logo type. Default displays Affirm logo image:

- logo (default): The standard Affirm logo.
- symbol: Displays the Affirm logo as a symbol.
- text: Displays Affirm Logo in plain text.
affirmLogoColor stringSet the colour on the Affirm logo:

- black
- blue (default)
- white
category stringIdentifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
brand stringIdentifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
sku stringIdentifies the SKU associated with the messaging for analytics tracking.
promoId stringAllows the merchant to select a specific promo id that they want to display. This will override the pageType supplied.
learnMoreShow booleanWhether to show or suppress the modal link:

- true (default): Shows the modal link.
- false: Suppresses CTA link and hyperlinks entire promo.