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

componentType
required
stringOnly promo is available.
options
required
objectSee Options object.

Options properties

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

- product (default)
- TBD
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 color 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.