Quick Start

This quickstart guide demonstrates how to quickly install Flex Checkout-JS with your client id and initialize the Flex Checkout experience.

After following this guide, you will have the basic Flex Checkout experience set up and ready to use.

HTML
<head>
  <script src="https://checkout.int.getflex.com/v2/rent/flex.js"></script>
</head>

info

The following is a live demo with editable code. Please consult the rest of the Flex JS documentation for additional components and configuration options.

Live Editor

function Demo() {
  useEffect(() => {
    // Initialize the Flex JS client library.
    const flex = Flex({ clientId: '1234abc-5678-9def-0hij-9876lmnopqrs' })

    // Called when the Flex client is loaded and ready.
    flex.ready(() => {
      flex.checkout({
        onEvent(response) {
          // Called on successful onboard or payment.
        },
      })
      // Pass a checkout token from your API.
      flex.token.load(async () => 'your-flex-token')
      // Adds the Split Rent button that opens the Checkout modal.
      flex.splitRentButton()
      // Adds the Learn More button that opens the Learn More modal.
      flex.learnMore()
    })
  }, [])

  return (
    <div style={{ display: 'flex' }}>
      <div id="flex-split-rent-button-id"></div>
      <div id="flex-learn-more-id"></div>
    </div>
  )
}

Result