Awareness Blocks

Awareness blocks inform users about Flex payment options and drive engagement with the checkout flow.

Initialization

Display 7 variations of Flex Awareness Blocks. The "See your options" button, when clicked, will launch the Embedded Checkout flow modal.

JavaScript

flex.ready(() => {
  flex.awareness()
})

---

Options

Parameter	Type	Description
id	String	The dom id of the element where the Awareness Block should be inserted. Defaults to flex-awareness-id.
learnMore	Boolean	Whether the "See your options" button should open the Learn More or Checkout modal. Defaults to false.
productType	String	'rent' or 'payment'. Only needed when running both flows on one instance (see Multiple Products in the Installation guide). Defaults to the instance's flow.
type	String	Selects the display style of an Awareness Block: tileTall, tileMedium, tileShort, bannerTall, bannerMedium, bannerWide, textWrap.
visible	Boolean	Determines whether the Awareness Block is hidden or visible when it loads.

Awareness Types

There are 7 variations of Awareness Blocks types:

• tileTall
• tileMedium
• tileShort
• bannerTall
• bannerMedium
• bannerWide
• textWrap

Tile Tall

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'tileTall' })
})

Tile Medium

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'tileMedium' })
})

Tile Short

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'tileShort' })
})

Banner Tall

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'bannerTall' })
})

Banner Medium

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'bannerMedium' })
})

Banner Wide

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'bannerWide' })
})

Text Wrap

JavaScript

flex.ready(() => {
  flex.awareness({ type: 'textWrap' })
})

---

Cleanup on Destroy

If the container element for an Awareness Block is removed from the DOM — for example, when a user switches between tabs and the tab content is destroyed — you must call flex.awareness.destroy() before the container is removed. Failing to do so will cause errors when the container is recreated and flex.awareness is called again with the same id.

warning

Always destroy an Awareness Block before its container is removed from the DOM. If the container is destroyed and recreated without calling destroy(), the SDK will still hold a reference to the old (detached) element.

HTML

<div id="tab-a">
  <div id="flex-awareness-id"></div>
</div>

<script>
  flex.ready(() => {
    flex.awareness({ id: 'flex-awareness-id' })
  })

  function switchTab() {
    // ✅ Destroy the awareness block before removing its container from the DOM
    flex.awareness.destroy('flex-awareness-id')

    document.getElementById('tab-a').remove()

    // Later, when tab-a is re-added to the DOM:
    flex.awareness({ id: 'flex-awareness-id' })
  }
</script>

In React, return the destroy call from your useEffect cleanup function so it runs automatically when the component unmounts.

JSX

useEffect(() => {
  flex.ready(() => {
    flex.awareness({ id: 'flex-awareness-id' })
  })

  return () => {
    flex.awareness.destroy('flex-awareness-id')
  }
}, [])

---

Methods

Exported methods for controlling and interacting with an Awareness Block.

warning

Avoid chaining methods directly on flex.awareness({ id }). This calls flex.awareness as a constructor, which attempts to register a new component and requires the DOM element to be present.

JavaScript

// ❌ Anti-pattern — attempts to register a new component before calling the method
flex.awareness({ id: 'flex-awareness-id' }).destroy()

// ✅ Use the static method instead
flex.awareness.destroy('flex-awareness-id')

// ✅ Or store the instance reference when the component is created
const awareness = flex.awareness({ id: 'flex-awareness-id' })
awareness.destroy()

awareness.show()

Show an Awareness Block by passing the id of the Awareness Block you want to show.

JavaScript

flex.awareness.show('flex-awareness-id')

awareness.hide()

Hide an Awareness Block by passing the id of the Awareness Block you want to hide.

JavaScript

flex.awareness.hide('flex-awareness-id')

awareness.destroy()

Destroy an Awareness Block by passing the id of the Awareness Block you want to destroy. This is useful if the parent container has been destroyed and recreated.

JavaScript

flex.awareness.destroy('flex-awareness-id')