## Checkout

[Checkout](https://docs.stripe.com/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.

## Create an embedded Checkout instance

`stripe.createEmbeddedCheckoutPage(options: object)`

This method creates an embedded Checkout instance.

- `options`
  - `fetchClientSecret` A callback function `fetchClientSecret() => Promise` that resolves with the [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) for the [Checkout Session](docs/api/checkout/sessions/object).
  - `clientSecret (deprecated)` _This param has been deprecated in favor of the `fetchClientSecret` param, which offers a faster loading experience._ The [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) for the [Checkout Session](docs/api/checkout/sessions/object).
  - `onComplete` An optional callback function `onComplete() => void` that is called on completion for Checkout Sessions with `redirect_on_completion: if_required`.

### Example

```javascript title="Create embedded Checkout instance"
const stripe = await stripe_js.loadStripe('pk_test_...');
const checkout = await stripe.createEmbeddedCheckoutPage({
  fetchClientSecret: async () => {
    const response = await fetch('/create-checkout-session', {
      method: 'POST',
    });
    const {client_secret} = await response.json();
    return client_secret;
  },
});
```

## Mount embedded Checkout

`checkout.mount(domElement: string | DOM element)`

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.

- `domElement` The CSS selector or DOM element where Checkout will be mounted.

### Example

```javascript title="Mount embedded Checkout"
checkout.mount('#checkout');
```

## Unmount embedded Checkout

`checkout.unmount()`

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

### Example

```javascript title="Unmount embedded Checkout"
checkout.unmount();
```

## Destroy embedded Checkout

`checkout.destroy()`

Removes Checkout from the DOM and destroys it. Once destroyed, an embedded Checkout instance cannot be reattached to the DOM. Call `checkout.createEmbeddedCheckoutPage` to create a new embedded Checkout instance after unmounting the previous instance from the DOM.

### Example

```javascript title="Destroy embedded Checkout"
checkout.destroy();
```