Split Rent Button

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

Initialization

Import and render FlexSplitRentButton in your component.

JSX

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

function PaymentScreen() {
  return (
    <View>
      <FlexSplitRentButton />
    </View>
  )
}

info

When tapped, the Split Rent Button automatically opens checkout. Make sure you have registered a token provider with loadToken and configured checkout callbacks with useFlexCheckout before rendering the button.

JSX

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

function PaymentScreen() {
  useFlexCheckout({
    onEvent: (event) => {},
  })

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

---

Options

Parameter	Type	Description
styles	ButtonStyles	Optional height override for the button.
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'. Ignored when variant is 'list_item'. Defaults to 'pill' when variant is 'logo'.
color	String	Button color. 'purple' (default) or 'white'. Ignored when variant is 'list_item'.
style	StyleProp<ViewStyle>	Standard React Native view style.

Variant

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

default

The standard split rent button.

JSX

// variant defaults to 'default' if not specified
<FlexSplitRentButton />

list_item

A white card-style split rent button with a chevron. Intended for placement inside a list or menu where the host UI already supplies the surrounding chrome.

JSX

<FlexSplitRentButton variant="list_item" />

logo

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

JSX

<FlexSplitRentButton 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.

JSX

<FlexSplitRentButton radius="square" />

rounded

A rounded-corner split rent button (default).

JSX

// radius defaults to 'rounded' if not specified
<FlexSplitRentButton />

pill

A pill-shaped split rent button.

JSX

<FlexSplitRentButton 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.

JSX

// color defaults to 'purple' if not specified
<FlexSplitRentButton />

white

A white split rent button with a purple border.

JSX

<FlexSplitRentButton color="white" />

info

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

---

ButtonStyles

Parameter	Type	Description
height	Number	Height of the button in pixels. Defaults to 40.

JSX

<FlexSplitRentButton styles={{ height: 48 }} style={{ marginVertical: 16 }} />

---

Next Steps

• Configure Checkout callbacks to handle events and errors
• Review the Installation guide for lifecycle management