Create a Component

The affirm.ui.components.create import 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.

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

Method Arguments

Attribute	Type	Description
componentType required	string	Only `promo` is available.
options required	object	See Options object.

Options Properties

Attrbute	Type	Description
amount	integer	The loan amount passed to display price specific messaging. The amount must be in cents.
pageType required	string	The page type of the page the promo/messaging is on: - `product` (default) - TBD
affirmLogoType	string	Sets 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	string	Set the colour on the Affirm logo: - `black` - `blue` (default) - `white`
category	string	Identifies the product category associated with the messaging for analytics tracking (e.g., electronics, furniture).
brand	string	Identifies the brand category associated with the messaging for analytics tracking (e.g., Samsung, Goodyear).
sku	string	Identifies the SKU associated with the messaging for analytics tracking.
promoId	string	Allows the merchant to select a specific promo id that they want to display. This will override the `pageType` supplied.
learnMoreShow	boolean	Whether to show or suppress the modal link: - `true` (default): Shows the modal link. - `false`: Suppresses CTA link and hyperlinks entire promo.