Skip to main content
The Flutter SDK provides a WebView-based checkout widget that renders the Crossmint embedded checkout experience. Import it from crossmint_flutter_ui.dart.

​
CrossmintEmbeddedCheckout

WebView-based checkout widget that renders the Crossmint embedded checkout experience inline. Communicates bidirectionally with the hosted checkout page for dynamic sizing, order updates, and crypto transaction signing.

​
Props

​
apiKey
String
required
Crossmint API key.
​
config
CrossmintCheckoutConfig
required
Checkout configuration (order, payment, appearance).
​
payer
CrossmintCheckoutPayer?
Optional crypto payer override for signing transactions within checkout.
​
checkoutController
CrossmintCheckoutController?
Optional reactive controller for checkout order state.
​
onOrderUpdated
void Function(Map<String, Object?> order)?
Called when the order state changes.
​
onOrderCreationFailed
void Function(String errorMessage)?
Called when order creation fails.
​
onDiagnostic
void Function(CrossmintCheckoutDiagnostic diagnostic)?
Called when the hosted checkout emits a runtime diagnostic.
​
loadingBuilder
CrossmintCheckoutLoadingBuilder?
Optional builder for the loading overlay rendered on top of the hosted checkout WebView while the page is loading. When null, the widget falls back to a Material CircularProgressIndicator inside a themed background container (the React Native Crossmint SDK parity default).
​
defaultHeight
double
Initial height before the hosted page reports its actual height.

​
Usage

final checkoutController = CrossmintCheckoutController();

CrossmintEmbeddedCheckout(
  apiKey: 'YOUR_CLIENT_API_KEY',
  config: CrossmintCheckoutConfig(
    order: CrossmintCheckoutNewOrder.typed(
      lineItems: [
        CrossmintCheckoutLineItem.collection(
          collectionLocator: 'crossmint:collection-id',
          callData: {'quantity': 1},
        ),
      ],
    ),
    payment: CrossmintCheckoutPayment(
      fiat: CrossmintCheckoutFiatPayment(enabled: true),
      crypto: CrossmintCheckoutCryptoPayment(enabled: false),
    ),
  ),
  checkoutController: checkoutController,
  onOrderUpdated: (order) => print('Order: ${order['status']}'),
  onOrderCreationFailed: (error) => print('Error: $error'),
)

​
CrossmintCheckoutController

Reactive controller for checkout order state, matching the official Crossmint RN SDK’s useCrossmintCheckout() hook. Pass this to CrossmintEmbeddedCheckout to receive order updates as observable state.

​
Properties

​
order
Map<String, Object?>?
The current order object from the checkout, or null if no order yet.
​
orderClientSecret
String?
The server-assigned client secret for the current order.

​
Methods

​
updateOrder(data)
void
Updates the order state from a checkout order:updated event.
​
clear()
void
Clears the order state.

​
Usage

final controller = CrossmintCheckoutController();

// Pass to the widget:
CrossmintEmbeddedCheckout(
  apiKey: 'YOUR_CLIENT_API_KEY',
  config: yourCheckoutConfig,
  checkoutController: controller,
)

// Listen reactively:
ListenableBuilder(
  listenable: controller,
  builder: (context, _) {
    final order = controller.order;
    if (order == null) return const Text('No order yet');
    return Text('Status: ${order['status']}');
  },
)