## CheckoutFormProvider

> This feature is in private preview. See [Embedded form](https://docs.stripe.com/payments/checkout/how-checkout-works.md?payment-ui=checkout-form) for more information.

The `CheckoutFormProvider` component wraps your React tree for the [embedded form integration](https://docs.stripe.com/elements/embeddable-payment-form.md).
It initializes the Embedded form SDK and provides it in a context so nested components can render the `CheckoutForm` component and access session data.

To use `CheckoutFormProvider`, call `loadStripe` from `@stripe/stripe-js` with your publishable key. The `loadStripe` function asynchronously loads the Stripe.js script and initializes a Stripe object. Pass the returned `Promise` to `CheckoutFormProvider` along with the [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) of your Checkout Session.

### Props

- `stripe`
  A [Stripe object](https://docs.stripe.com/js/initializing.md) or a `Promise` resolving to a Stripe object. The easiest way to initialize a Stripe object is with the [Stripe.js wrapper module](https://github.com/stripe/stripe-js/blob/master/README.md#readme). After this prop has been set, it can not be changed.

- `options`
  Options for `CheckoutFormProvider`.
    - `clientSecret`
      The Checkout Session [client secret](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) or a promise that resolves to the client secret.
    - `appearance`
      Match the design of your site with the [appearance option](https://docs.stripe.com/elements/appearance-api.md).
The layout stays consistent, but you can modify colors, fonts, borders, padding, and more.
Note: the embedded form doesn't support `rules`.
    - `loader`
      Display skeleton loader UI while waiting for the embedded form to fully load after it's mounted.
Default is `'auto'` (Stripe determines whether or not to show a loader UI).
    - `fonts`
      An array of custom fonts that the embedded form can use. You can specify fonts as [CssFontSource](#css_font_source_object) or [CustomFontSource](#custom_font_source_object) objects.
    - `savedPaymentMethod`
      Options to configure what the embedded form displays when used to [save payment details during payment](https://docs.stripe.com/payments/checkout/save-during-payment.md).
      - `enableRedisplay`
        Toggle if the embedded form redisplays Customer saved Payment Methods. Default is `'auto'`.
      - `enableSave`
        Toggle if the embedded form collects consent to save a customer's payment methods. Default is `'auto'`.

### Example

```title
Mount CheckoutFormProvider
```