Native app SDKs

SeatLayer has four first-party native app SDKs. They share inventory, selection, hold, recovery, and checkout concepts. Flutter is 0.8.0; React Native, iOS and Android are independently verified at 0.3.4 in the SDK catalog.

The native event picker accepts one published Event per picker. Performance Groups and Fixed Renewable Seasons are browser/API/server products and are not native SDK configurations.

Use this page to choose the platform package and the amount of buyer UI your application owns. Every platform supports the same four-level product ladder: drop in the complete picker, customise it, compose your own layout from public parts, or use only the raw map.

SDK capability matrix

Choose an integration path

What “native picker” means

The SDKs divide responsibility at a deliberate seam:

The native picker is therefore not a screenshot or generic hosted checkout. Its buyer chrome is made from Flutter widgets, React Native components, SwiftUI or UIKit, or Compose/Android Views. SeatLayer keeps venue geometry, inventory, and map behavior consistent behind the public native APIs. The map itself uses the shared WebView renderer; native UI refers to the controls and layout around it.

The customization ladder

All four SDKs follow the same product model:

1. Drop in the complete flow. Supply an event configuration and a checkout callback.
2. Keep the flow, change its expression. Apply theme, strings, options, style slots, or replace one complete part through a builder.
3. Own the hierarchy. Place the SDK scope/state holder, map, controller, and public components in a layout your app controls.
4. Use only the raw map. Own every piece of buyer UI and hold orchestration yourself.

Moving down the ladder does not move booking into the app. Every path ends at an opaque holdId that goes to your trusted backend.

Install the SDKs

dependencies:
  seatlayer: 0.8.0

import 'package:seatlayer/seatlayer.dart';

SeatLayerPicker(
  configuration: SeatLayerConfiguration(
    event: 'ev_your_event_key',
    publicKey: 'pk_test_your_public_key',
  ),
  themeMode: SeatLayerThemeMode.auto,
  onCheckout: (handoff) async {
    await checkoutBackend.begin(holdId: handoff.holdId);
  },
);

npm install @seatlayer/react-native@0.3.4 react-native-webview

import React, { useMemo } from 'react';
import {
  SeatLayerPicker,
  type SeatLayerConfiguration,
} from '@seatlayer/react-native';

export function TicketPickerScreen() {
  const configuration = useMemo<SeatLayerConfiguration>(
    () => ({
      event: 'ev_your_event_key',
      publicKey: 'pk_test_your_public_key',
      currency: 'USD',
    }),
    [],
  );

  return (
    <SeatLayerPicker
      configuration={configuration}
      themeMode="auto"
      onCheckout={(handoff) =>
        checkoutBackend.begin({ holdId: handoff.holdId })
      }
    />
  );
}

dependencies: [
    .package(
        url: "https://github.com/seatlayer/seatlayer-ios.git",
        exact: "0.3.4"
    )
]

import SeatLayer
import SwiftUI

struct TicketPicker: View {
    var body: some View {
        SeatLayerPicker(
            configuration: SeatLayerConfiguration(
                event: "ev_your_event_key",
                publicKey: "pk_test_your_public_key",
                currency: "USD"
            ),
            onCheckout: { handoff in
                try await checkoutBackend.begin(holdId: handoff.holdId)
            }
        )
    }
}

dependencies {
    implementation("io.seatlayer:seatlayer-android:0.3.4")
    implementation("io.seatlayer:seatlayer-android-compose:0.3.4")
}

class CheckoutActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            SeatLayerPicker(
                configuration = SeatLayerConfiguration(
                    event = "ev_your_event_key",
                    publicKey = "pk_test_your_public_key",
                    currency = "USD",
                ),
                modifier = Modifier.fillMaxSize(),
                onCheckout = { handoff ->
                    checkoutBackend.begin(holdId = handoff.holdId)
                },
                onError = ::reportPickerError,
                onClose = ::finish,
            )
        }
    }
}

The examples use a publishable key for Public inventory. For login-gated, presale, partner, channel, or other private inventory, omit publicKey and use the platform’s renewable buyerAccessTokenProvider. Implement that provider with POST /v1/events/:key/buyer-access-sessions on your authenticated backend. Mint a native buyer-access session for the Event, return only the short-lived token to the provider, and treat the SDK’s access context as opaque. Keep the token in memory and never expose a SeatLayer secret to the application.

Shared security boundary

The mobile app may select inventory and create or resume a temporary hold. It must not decide the amount to charge or book inventory with a secret key.

1. Send the opaque holdId and your own order context to your backend.
2. Inspect the hold and calculate the price from trusted server data.
3. Charge through your payment provider.
4. Reuse the same bookingRef so retries remain idempotent.
5. Treat expiry and inventory conflicts as recoverable selection states.

Read holds and checkout before connecting a production order flow.

Troubleshooting

Start with the typed SDK error or event; do not infer failure from an empty screen or a paused countdown.

Platform guides add the exact error types, event names, lifecycle hooks, and tagged source references for their package.

Product scope

The documented mobile SDK contracts select inventory for one published Event. The browser SDK separately provides PerformanceGroupPicker and SeasonPicker. Do not assume those browser products can be passed to a native SDK’s event configuration until a platform release documents a versioned native contract for them.

Production checklist

• Pin the exact package version or release tag you validated.
• Give the map a definite size; do not place it inside another pan/zoom surface.
• Keep buyer tokens in memory and secrets on the server.
• Preserve an open holdId only when your checkout promises restoration.
• Test background/foreground reconciliation, rotation, safe areas, back navigation, expiry, release, conflict, and retry behavior.
• Verify test/live mode disclosure and any required SeatLayer attribution.
• Smoke-test supported physical iOS and Android devices before rollout.
• Confirm the backend derives price from the inspected hold, not app input.

Platform guides

• Flutter SDK
• React Native SDK
• iOS SDK
• Android SDK