Skip to main content

Split Rent Button

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

Initialization​

Display the Split Rent Button by adding a FlexSplitRentButton SwiftUI view with a configuration.

Swift
import FlexCheckout

FlexSplitRentButton(config: 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 displaying the button.

Swift
let sdk = Flex.initialize(config: FlexConfig(
    clientId: "your-flex-client-id"
))

sdk.loadToken {
    let response = try await yourApi.getFlexToken()
    return response.token
}

sdk.checkout(CheckoutConfig(
    onEvent: { event in }
))

Options​

SplitRentButtonConfig​

ParameterTypeDescription
stylesButtonStyles?Optional styling for the button.
variantSplitRentButtonVariant?Visual style of the button. .default (default) renders the standard split rent button. .listItem 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.
radiusSplitRentButtonRadius?Corner radius of the button. .rounded (default), .square, or .pill. Ignored when variant is .listItem. Defaults to .pill when variant is .logo.
colorSplitRentButtonColor?Color of the button. .purple (default) or .white. Ignored when variant is .listItem.

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.

Swift
// variant defaults to .default if not specified
FlexSplitRentButton(config: SplitRentButtonConfig())

listItem​

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.

Swift
FlexSplitRentButton(config: SplitRentButtonConfig(variant: .listItem))

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

Swift
FlexSplitRentButton(config: SplitRentButtonConfig(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.

Swift
FlexSplitRentButton(config: SplitRentButtonConfig(radius: .square))

rounded​

A rounded-corner split rent button (default).

Swift
// radius defaults to .rounded if not specified
FlexSplitRentButton(config: SplitRentButtonConfig())

pill​

A pill-shaped split rent button.

Swift
FlexSplitRentButton(config: SplitRentButtonConfig(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.

Swift
// color defaults to .purple if not specified
FlexSplitRentButton(config: SplitRentButtonConfig())

white​

A white split rent button with a purple border.

Swift
FlexSplitRentButton(config: SplitRentButtonConfig(color: .white))
info

The color option is ignored when variant is .listItem.

ButtonStyles​

ParameterTypeDescription
heightCGFloat?Height of the button in points. Defaults to system size.
Swift
FlexSplitRentButton(config: SplitRentButtonConfig(
    styles: ButtonStyles(height: 48)
))

Multiple Buttons​

You can add multiple Split Rent Buttons to the same view:

Swift
VStack {
    FlexSplitRentButton(config: SplitRentButtonConfig())
    FlexSplitRentButton(config: SplitRentButtonConfig())
}

Next Steps​

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