Skip to main content

Split Rent Button

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

Initialization​

Display the Split Rent Button by adding FlexSplitRentButtonView to your layout and binding it with a configuration.

XML Layout​

Add FlexSplitRentButtonView to your layout file where you want the button to appear.

XML
<com.flex.checkout.components.FlexSplitRentButtonView
    android:id="@+id/splitRentButton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Binding​

Call bind() on the view reference to connect the button to the Flex SDK.

import com.flex.checkout.configuration.SplitRentButtonConfig

binding.splitRentButton.bind(SplitRentButtonConfig())
info

When the Split Rent Button is tapped, it will automatically call openCheckout(). Make sure you have registered a token provider with loadToken and configured checkout callbacks with sdk.checkout() before binding the button.

val sdk = Flex.initialize(this, FlexConfig(
    clientId = "your-flex-client-id"
))

sdk.loadToken {
    val response = yourApi.getFlexToken()
    response.token
}

sdk.checkout(CheckoutConfig(
    onEvent = { event -> },
))

binding.splitRentButton.bind(SplitRentButtonConfig())

Options​

SplitRentButtonConfig​

ParameterTypeDescription
stylesButtonStyles?Optional styling for the button.
variantSplitRentButtonVariant?Visual style of the button. SplitRentButtonVariant.DEFAULT (default) renders the standard split rent button. SplitRentButtonVariant.LIST_ITEM renders a white card-style split rent button with a chevron. SplitRentButtonVariant.LOGO renders a circular icon button with the Flex logo and a label below.
radiusSplitRentButtonRadius?Corner radius of the button. SplitRentButtonRadius.ROUNDED (default), SplitRentButtonRadius.SQUARE, or SplitRentButtonRadius.PILL. Ignored when variant is SplitRentButtonVariant.LIST_ITEM. Defaults to SplitRentButtonRadius.PILL when variant is SplitRentButtonVariant.LOGO.
colorSplitRentButtonColor?Color of the button. SplitRentButtonColor.PURPLE (default) or SplitRentButtonColor.WHITE. Ignored when variant is SplitRentButtonVariant.LIST_ITEM.

Variant​

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

DEFAULT​

The standard split rent button.

// variant defaults to SplitRentButtonVariant.DEFAULT if not specified
binding.splitRentButton.bind(SplitRentButtonConfig())

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.

binding.splitRentButton.bind(SplitRentButtonConfig(
    variant = SplitRentButtonVariant.LIST_ITEM,
))

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

binding.splitRentButton.bind(SplitRentButtonConfig(
    variant = SplitRentButtonVariant.LOGO,
))

Radius​

The radius option controls the button border radius. If radius is not specified, the button renders as SplitRentButtonRadius.ROUNDED.

SQUARE​

A flat-cornered split rent button.

binding.splitRentButton.bind(SplitRentButtonConfig(
    radius = SplitRentButtonRadius.SQUARE,
))

ROUNDED​

A rounded-corner split rent button (default).

// radius defaults to SplitRentButtonRadius.ROUNDED if not specified
binding.splitRentButton.bind(SplitRentButtonConfig())

PILL​

A pill-shaped split rent button.

binding.splitRentButton.bind(SplitRentButtonConfig(
    radius = SplitRentButtonRadius.PILL,
))

Color​

The color option controls the button color. If color is not specified, the button renders as SplitRentButtonColor.PURPLE.

PURPLE​

The default purple split rent button.

// color defaults to SplitRentButtonColor.PURPLE if not specified
binding.splitRentButton.bind(SplitRentButtonConfig())

WHITE​

A white split rent button with a purple border.

binding.splitRentButton.bind(SplitRentButtonConfig(
    color = SplitRentButtonColor.WHITE,
))
info

The color option is ignored when variant is SplitRentButtonVariant.LIST_ITEM.

ButtonStyles​

ParameterTypeDescription
heightFloat?Height of the button in density-independent pixels (dp). Defaults to 40dp.
import com.flex.checkout.configuration.SplitRentButtonConfig
import com.flex.checkout.types.ButtonStyles

binding.splitRentButton.bind(SplitRentButtonConfig(
    styles = ButtonStyles(height = 48f)
))

Multiple Buttons​

If you need multiple Split Rent Buttons, add multiple views to your layout and bind each independently:

XML
<com.flex.checkout.components.FlexSplitRentButtonView
    android:id="@+id/splitRentButton1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<com.flex.checkout.components.FlexSplitRentButtonView
    android:id="@+id/splitRentButton2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
binding.splitRentButton1.bind(SplitRentButtonConfig())
binding.splitRentButton2.bind(SplitRentButtonConfig())
tip

Calling bind multiple times on the same view instance is a no-op after the first call.

Next Steps​

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