## CheckoutProvider

The `CheckoutProvider` component allows you to use Element components and access data from your [Checkout Session](/api/checkout/sessions/object.md) 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 `CheckoutProvider`, 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 `CheckoutProvider` along with the [client secret](/api/checkout/sessions/object.md#checkout_session_object-client_secret) of your Checkout Session.

### Props

- `stripe` (`Stripe` or `Promise<Stripe>`) **required**
  A [Stripe object](/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` (object) **required**
  Options for `CheckoutProvider`.

  - `clientSecret` (Promise<string> | string) **required**
    The Checkout Session [client secret](/api/checkout/sessions/object.md#checkout_session_object-client_secret) or a promise that resolves to the client secret.

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

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

    - `loader` ('auto' | 'always' | 'never')
      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` (array)
      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` (object)
      Options to configure what Elements displays when used to [Save payment details during payment](/payments/checkout/save-during-payment.md).

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

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

    - `syncAddressCheckbox` ('billing' | 'shipping' | 'none')
      Used with the [Address Element](/elements/address-element.md).

The `syncAddressCheckbox` parameter configures which Address Element to show the checkbox.

The checkbox allows the customer the option to sync billing and shipping addresses when both Billing and Shipping Address Elements are used in a single Elements instance.

  - `adaptivePricing` (object)
    Options for [Adaptive Pricing](/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components).

    - `allowed` (boolean)
      Whether Adaptive Pricing can be used with this integration. Default is `false`.
[Additional setup](/payments/currencies/localize-prices/adaptive-pricing.md?payment-ui=embedded-components) is required before you can use Adaptive Pricing with embedded components.

### Mount CheckoutProvider

```jsx
import React from 'react';
import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
import {loadStripe} from '@stripe/stripe-js';
import {useMemo} from 'react';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('{TEST_PUBLISHABLE_KEY}');

const App = () => {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  return (
    <CheckoutProvider stripe={stripePromise} options={{clientSecret: promise}}>
      <CheckoutForm />
    </CheckoutProvider>
  );
}

export default App;
```