> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CrossmintEmbeddedCheckout

> Flutter Class

**Class**

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

```dart theme={null}
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.

```dart theme={null}
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

### CrossmintEmbeddedCheckout

```dart theme={null}
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

```dart theme={null}
final String apiKey
```

Crossmint API key.

### config

```dart theme={null}
final CrossmintCheckoutConfig config
```

Checkout configuration (order, payment, appearance).

### payer

```dart theme={null}
final CrossmintCheckoutPayer? payer
```

Optional crypto payer override for signing transactions within checkout.

### checkoutController

```dart theme={null}
final CrossmintCheckoutController? checkoutController
```

Optional reactive controller for checkout order state.

### onOrderUpdated

```dart theme={null}
final void Function(Map<String, Object?> order)? onOrderUpdated
```

Called when the order state changes.

### onOrderCreationFailed

```dart theme={null}
final void Function(String errorMessage)? onOrderCreationFailed
```

Called when order creation fails.

### onDiagnostic

```dart theme={null}
final void Function(CrossmintCheckoutDiagnostic diagnostic)? onDiagnostic
```

Called when the hosted checkout emits a runtime diagnostic.

### loadingBuilder

```dart theme={null}
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

```dart theme={null}
final double defaultHeight
```

Initial height before the hosted page reports its actual height.

## Methods

### createState

```dart theme={null}
State<CrossmintEmbeddedCheckout> createState()
```