## CheckoutElementsProvider

The `CheckoutElementsProvider` component allows you to use Element components and access data from your [Checkout Session](https://docs.stripe.com/api/checkout/sessions/object) in any nested component. Wrap the portion of your React tree that renders individual Element components to make the Checkout instance available via React context. To use `CheckoutElementsProvider`, 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 `CheckoutElementsProvider` 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 `CheckoutElementsProvider`.

  - `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.

  - `elementsOptions`
    A set of options to configure Elements created with [Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.md).

    - `appearance`
      Match the design of your site with the [appearance option](https://docs.stripe.com/elements/appearance-api.md). The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and more.

    - `loader`
      Display skeleton loader UI while waiting for Elements to fully load after they're mounted. Default is `'auto'` (Stripe determines whether or not to show a loader UI).

    - `fonts`
      An array of custom fonts that elements created from the `Elements` object can use. You can specify fonts as [CssFontSource](#css_font_source_object) or [CustomFontSource](#custom_font_source_object) objects.

    - `savedPaymentMethod`
      Options to configure what Elements displays when used to [Save payment details during payment](https://docs.stripe.com/payments/checkout/save-during-payment.md).

      - `enableRedisplay`
        Toggle if Elements redisplays Customer saved Payment Methods. Default is `'auto'`. Prior to Clover, this defaulted to `'never'`.

      - `enableSave`
        Toggle if the Payment Element collects consent to save a Customer's Payment Methods. Default is `'auto'`. Prior to Clover, this defaulted to `'never'`.