CrossmintEmbeddedCheckout

Class Embedded checkout widget matching the official Crossmint RN SDK CrossmintEmbeddedCheckoutV3.

class CrossmintEmbeddedCheckout extends StatefulWidget

Loads the Crossmint hosted checkout page in a WebView and communicates bidirectionally via postMessage for dynamic sizing, order updates, and crypto transaction signing.

CrossmintEmbeddedCheckout(
  apiKey: 'YOUR_API_KEY',
  config: CrossmintCheckoutConfig(
    order: CrossmintCheckoutNewOrder(
      lineItems: [{'collectionLocator': 'YOUR_COLLECTION_LOCATOR'}],
    ),
    payment: CrossmintCheckoutPayment(
      fiat: CrossmintCheckoutFiatPayment(enabled: true),
      crypto: CrossmintCheckoutCryptoPayment(enabled: false),
    ),
  ),
  onOrderUpdated: (order) => print('Order: $order'),
)

Host lifecycle notes:

changing apiKey or config reloads the hosted checkout
if the host app reuses a checkoutController across different checkout scenarios, clear it or replace it before rebuilding to avoid stale order state
use onDiagnostic to observe blocked navigation, malformed hosted messages, and WebView resource errors in staging or production

Constructors

const CrossmintEmbeddedCheckout({
  super.key,
  required this.apiKey,
  required this.config,
  this.payer,
  this.checkoutController,
  this.onOrderUpdated,
  this.onOrderCreationFailed,
  this.onDiagnostic,
  this.loadingBuilder,
  this.defaultHeight = 400,
})

Properties

apiKey

final String apiKey

Crossmint API key.

config

final CrossmintCheckoutConfig config

Checkout configuration (order, payment, appearance).

payer

final CrossmintCheckoutPayer? payer

Optional crypto payer override for signing transactions within checkout.

checkoutController

final CrossmintCheckoutController? checkoutController

Optional reactive controller for checkout order state.

onOrderUpdated

final void Function(Map<String, Object?> order)? onOrderUpdated

Called when the order state changes.

onOrderCreationFailed

final void Function(String errorMessage)? onOrderCreationFailed

Called when order creation fails.

onDiagnostic

final void Function(CrossmintCheckoutDiagnostic diagnostic)? onDiagnostic

Called when the hosted checkout emits a runtime diagnostic.

loadingBuilder

final CrossmintCheckoutLoadingBuilder? loadingBuilder

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

final double defaultHeight

Initial height before the hosted page reports its actual height.

Methods

createState

State<CrossmintEmbeddedCheckout> createState()

Introduction

Hosted (pop-up)

Embedded

Headless (API)

Advanced Guides

API Reference

CrossmintEmbeddedCheckout

Constructors