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

string

Only promo is available.

options
required

object

See Options object.

Options properties


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 color 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.

Did this page help you?