Quick Start

Get up and running with the Flex Checkout React Native SDK in minutes. This guide walks you through installation, initialization, and opening your first checkout.

For detailed configuration options, see the Installation page.

1. Install the Package

Bash

yarn add @flexapp/flex-checkout-react-native@1.5.1
cd ios && pod install

---

2. Initialize and Load Token

Set up the SDK once at app startup (e.g. in App.tsx):

JSX

import { initialize, loadToken, FlexEnvironment } from '@flexapp/flex-checkout-react-native'

initialize({
  clientId: 'your-flex-client-id',
  environment: FlexEnvironment.INT, // use FlexEnvironment.PROD for production
})

loadToken(async () => {
  const response = await fetch('https://your-api.com/flex-token')
  const { token } = await response.json()
  return token
})

---

3. Add the Split Rent Button

Place FlexSplitRentButton in your component. Tapping it opens the Flex Checkout modal automatically.

JSX

import { FlexSplitRentButton, useFlexCheckout, ModalEventType } from '@flexapp/flex-checkout-react-native'

function PaymentScreen() {
  useFlexCheckout({
    onOpen: () => console.log('Checkout opened'),
    onClose: () => console.log('Checkout closed'),
    onError: (error) => console.error('Error:', error),
    onEvent: (event) => {
      if (event.type === ModalEventType.ONBOARDING_COMPLETED) {
        // User completed onboarding.
        // event.data.autopayEnabled indicates if autopay was set up.
      } else if (event.type === ModalEventType.PAYMENT_COMPLETED) {
        // User completed payment.
      }
    },
  })

  return (
    <View>
      <FlexSplitRentButton />
    </View>
  )
}

info

Replace https://your-api.com/flex-token with your actual backend endpoint that returns a Flex token. See the Installation page for details.

That's it! When the user taps the Split Rent Button, the checkout modal opens automatically.

---

Next Steps

• Customize the Checkout modal with interstitial settings and event handling
• Style and configure the Split Rent Button
• Review the full Installation guide for lifecycle management details