Status

The Status card displays the user's current Flex status and launches the checkout flow when clicked.

Initialization

Display the Status card, which launches the Embedded Checkout modal, by calling flex.status(options) with configuration options.

JavaScript

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

---

Options

Options object for configuring the Status card.

Parameter	Type	Description
id	String	The dom id of the element where the Status card should be inserted. Defaults to flex-status-id.
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.
visible	Boolean	Determines whether the Status card is hidden or visible when it loads.

info

When the Status card is displayed with flex.status(options), clicking that Status card button will automatically open the Embedded Checkout modal. Be sure to include a dom element that matches the Status card id.

HTML

<div id="flex-status-id"></div>
<script>
  flex.ready(() => {
    flex.status({ id: 'flex-status-id' })
  })
</script>

---

Cleanup on Destroy

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

warning

Always destroy a Status card 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-status-id"></div>
</div>

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

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

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

    // Later, when tab-a is re-added to the DOM:
    flex.status({ id: 'flex-status-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.status({ id: 'flex-status-id' })
  })

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

---

Multiple Status Cards

If you wish to load more than one Status Card, simply use a different id for each Status Card.

HTML

<div id="flex-status-id-1"></div>
<div id="flex-status-id-2"></div>
<script>
  flex.ready(() => {
    flex.status({ id: 'flex-status-id-1' })
    flex.status({ id: 'flex-status-id-2' })
  })
</script>

tip

flex.status() can be called without any configuration option, so long as there is a div on the page with the default flex-status-id id.

HTML

<div id="flex-status-id"></div>
<script>
  flex.ready(() => {
    flex.status()
  })
</script>

*If you wish to use more than one Status card, you must use a distinct id for each status card.

---

Methods

Exported methods for controlling and interacting with the Status card.

warning

Avoid chaining methods directly on flex.status({ id }). This calls flex.status 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.status({ id: 'flex-status-id' }).destroy()

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

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

status.show()

Show the Status card by passing the id of the status card you want to show.

JavaScript

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

status.hide()

Hide the Status card by passing the id of the status card you want to hide.

JavaScript

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

status.destroy()

Destroy the Status card by passing the id of the status card you want to destroy. This is useful if the parent container has been destroyed and recreated.

JavaScript

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