Split Rent Button

Display a pre-built button that automatically opens the Flex Checkout modal when clicked.

Initialization

Display the Split Rent Button by calling flex.splitRentButton(options) with configuration options.

JavaScript

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

---

Options

Parameter	Type	Description
id	String	The dom id of the element where the Split Rent Button should be inserted. Defaults to flex-split-rent-button-id.
styles	Object	A limited set of attributes that can style the Split Rent Button. Presently { height: string } is available. Examples would include { height: '40px' } and { height: '3em' }.
variant	String	Button display style. 'default' (default) renders the standard split rent button. 'list_item' renders a white card-style split rent button with a chevron. 'logo' renders a circular icon button with the Flex logo and a label below.
radius	String	Button border radius style. 'rounded' (default), 'square', or 'pill'. Defaults to 'pill' when variant is 'logo'.
color	String	Button color. 'purple' (default) or 'white'. Ignored when variant is 'list_item'.
visible	Boolean	Determines whether the Split Rent Button is hidden or visible when it loads.

info

When the Split Rent Button is displayed with flex.splitRentButton(options), clicking that button will automatically open the Flex Checkout modal. Be sure to include a dom element that matches the Split Rent Button id.

HTML

<div id="flex-split-rent-button-id"></div>
<script>
  flex.ready(() => {
    flex.splitRentButton({ id: 'flex-split-rent-button-id' })
  })
</script>

---

Variant

The variant option controls the button display style. If variant is not specified, the button renders as 'default'.

default

The standard split rent button.

JavaScript

// variant defaults to 'default' if not specified
flex.splitRentButton()
flex.splitRentButton({ variant: 'default' })

list_item

A white card-style split rent button with a chevron.

JavaScript

flex.splitRentButton({ variant: 'list_item' })

logo

A circular icon button with the Flex logo centered inside and a label below. Defaults to 54px diameter.

JavaScript

flex.splitRentButton({ variant: 'logo' })

---

Radius

The radius option controls the button border radius. If radius is not specified, the button renders as 'rounded'.

square

A flat-cornered split rent button.

JavaScript

flex.splitRentButton({ radius: 'square' })

rounded

A rounded-corner split rent button (default).

JavaScript

// radius defaults to 'rounded' if not specified
flex.splitRentButton()
flex.splitRentButton({ radius: 'rounded' })

pill

A pill-shaped split rent button.

JavaScript

flex.splitRentButton({ radius: 'pill' })

---

Color

The color option controls the button color. If color is not specified, the button renders as 'purple'.

purple

The default purple split rent button.

JavaScript

// color defaults to 'purple' if not specified
flex.splitRentButton()
flex.splitRentButton({ color: 'purple' })

white

A white split rent button.

JavaScript

flex.splitRentButton({ color: 'white' })

info

The color option is ignored when variant is 'list_item'.

---

Cleanup on Destroy

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

warning

Always destroy a Split Rent Button 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-split-rent-button-id"></div>
</div>

<script>
  flex.ready(() => {
    flex.splitRentButton({ id: 'flex-split-rent-button-id' })
  })

  function switchTab() {
    // ✅ Destroy the button before removing its container from the DOM
    flex.splitRentButton.destroy('flex-split-rent-button-id')

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

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

  return () => {
    flex.splitRentButton.destroy('flex-split-rent-button-id')
  }
}, [])

---

Dynamic Loading

Any component, like a Split Rent Button, can be loaded dynamically. In this case, flex.splitRentButton does not need to be wrapped in flex.ready. However, flex.ready needs to have already been called.

info

After Flex() is called, flex.ready will typically be called less than a second later.

HTML

<div id="flex-split-rent-button-id-1"></div>
<script>
  // flex.ready(() => {}) does not need to be formally called by the developer
  // It is called internally in the Flex sdk

  function loadButtonDynamically() {
    flex.splitRentButton({ id: 'flex-split-rent-button-id-1' })
  }

  // flex.ready will not have been called yet
  ❌ loadButtonDynamically()

  document.getElementById('some-element').addEventListener('click', () => {
    // flex.ready will probably have been called already
    ✅ loadButtonDynamically()
  })
</script>

---

Multiple Buttons

If you wish to load more than one Split Rent Button, simply use a different id for each button.

HTML

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

tip

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

HTML

<div id="flex-split-rent-button-id"></div>
<script>
  flex.ready(() => {
    flex.splitRentButton()
  })
</script>

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

---

Methods

Exported methods for controlling and interacting with the Split Rent Button.

warning

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

JavaScript

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

// ✅ Use the static method instead
flex.splitRentButton.destroy('flex-split-rent-button-id')

// ✅ Or store the instance reference when the button is created
const button = flex.splitRentButton({ id: 'flex-split-rent-button-id' })
button.destroy()

splitRentButton.show()

Show a Split Rent Button by passing the id of the Split Rent Button you want to show.

JavaScript

flex.splitRentButton.show('flex-split-rent-button-id')

splitRentButton.hide()

Hide a Split Rent Button by passing the id of the Split Rent Button you want to hide.

JavaScript

flex.splitRentButton.hide('flex-split-rent-button-id')

splitRentButton.destroy()

Destroy a Split Rent Button by passing the id of the Split Rent Button you want to destroy. This is useful if the parent container has been destroyed and recreated.

JavaScript

flex.splitRentButton.destroy('flex-split-rent-button-id')