## Checkout

[Checkout](/payments/checkout.md) is a low-code payment integration
that creates a customizable payment form so you can quickly collect
payments on desktop and mobile devices.

## Initialize embedded Checkout

This method initializes embedded Checkout.

This method returns a `Promise` which resolves with an embedded Checkout instance.

**Syntax:** `stripe.initEmbeddedCheckout(...)`

- `options` (object) **required**
  Embedded Checkout initialization options.

  - `fetchClientSecret` (function) **required**
    A callback function `fetchClientSecret() => Promise<string>` that resolves with the [client secret](/api/checkout/sessions/object.md#checkout_session_object-client_secret) for the [Checkout Session](docs/api/checkout/sessions/object).

  - `clientSecret (deprecated)` (string) **required**
    _This param has been deprecated in favor of the `fetchClientSecret` param, which offers a faster loading experience._

The [client secret](/api/checkout/sessions/object.md#checkout_session_object-client_secret) for the [Checkout Session](docs/api/checkout/sessions/object).

  - `onComplete` (function)
    An optional callback function `onComplete() => void` that is called on completion for Checkout Sessions with `redirect_on_completion: if_required`.

### Initialize embedded Checkout

```es_next
const fetchClientSecret = async () => {
  const clientSecret = await createCheckoutSession();
  return clientSecret;
};

const checkout = await stripe.initEmbeddedCheckout({
  fetchClientSecret,
});
```

## Mount embedded Checkout

The `checkout.mount` method attaches Checkout to the DOM.
`checkout.mount` accepts either a CSS Selector (e.g., `'#checkout'`) or a DOM element.

You need to create a container DOM element to mount Checkout.

**Syntax:** `checkout.mount(...)`

- `domElement` (string | DOM element) **required**
  The CSS selector or DOM element where Checkout will be mounted.

### Mount embedded Checkout

```html
<div id="checkout">
  <!-- Checkout will be inserted here. -->
</div>

<script>
  checkout.mount('#checkout');
</script>
```

## Unmount embedded Checkout

Unmounts Checkout from the DOM. Call `checkout.mount` to reattach it to the DOM.

**Syntax:** `checkout.unmount(...)`

### Unmount embedded Checkout

```es_next
checkout.unmount();
```

## Destroy embedded Checkout

Removes Checkout from the DOM and destroys it. Once destroyed, an embedded
Checkout instance cannot be reattached to the DOM.

Call `checkout.initEmbeddedCheckout` to create a new embedded Checkout instance
after unmounting the previous instance from the DOM.

**Syntax:** `checkout.destroy(...)`

### Destroy embedded Checkout

```es_next
checkout.destroy();
```