Quick Start

Get up and running with the Flex Checkout Flutter 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

Add the Flex Checkout Flutter SDK from pub.dev in your pubspec.yaml:

YAML

dependencies:
  flex_checkout_flutter: ^1.3.0

Add the JitPack Maven repo (used for the native Android SDK) to your project's android/settings.gradle.kts:

Kotlin

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}

Then install and link native dependencies:

Bash

flutter pub get
cd ios && pod install

For the full setup (Android FlutterFragmentActivity + Material theme), see the Installation page.

---

2. Wire up the SDK at app startup

Await Flex.initialize once, register a token loader, and configure checkout callbacks. Pass the returned FlexSDK reference into your widget tree, or access it later via Flex.instance.

DART

import 'package:flex_checkout_flutter/flex_checkout_flutter.dart';
import 'package:flutter/material.dart' hide Flex;

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 1. Initialize the SDK.
  final sdk = await Flex.initialize(
    const FlexConfig(
      clientId: 'your-flex-client-id',
      environment: FlexEnvironment.int, // use FlexEnvironment.prod for production
    ),
  );

  // 2. Register a token loader.
  sdk.loadToken(() async {
    final response = await http.get(Uri.parse('https://your-api.com/flex-token'));
    final body = jsonDecode(response.body) as Map<String, dynamic>;
    return body['token'] as String;
  });

  // 3. Configure checkout callbacks.
  sdk.checkout(CheckoutConfig(
    onOpen: () => debugPrint('Checkout opened'),
    onClose: () => debugPrint('Checkout closed'),
    onError: (error) => debugPrint('Error: $error'),
    onEvent: (event) {
      switch (event.type) {
        case ModalEventType.onboardingCompleted:
          // User completed onboarding.
          // event.data.autopayEnabled indicates if autopay was set up.
          break;
        case ModalEventType.paymentCompleted:
          // User completed payment.
          break;
      }
    },
  ));

  runApp(const MyApp());
}

info

Flutter's widget library also exports a class named Flex. Add hide Flex to your flutter/material.dart import to avoid the ambiguity.

---

3. Add the Split Rent Button

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

DART

import 'package:flex_checkout_flutter/flex_checkout_flutter.dart';
import 'package:flutter/material.dart' hide Flex;

class PaymentScreen extends StatelessWidget {
  const PaymentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: FlexSplitRentButton(),
    );
  }
}

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