## Elements

`Elements` mounts the Stripe Elements context for `@stripe/react-stripe-js`. Wrap the portion
of your React tree that renders individual Element components to make the Stripe object, Elements
instance, and related helpers available via React context.

For the [Payment Element created without an Intent](/payments/accept-a-payment-deferred.md),
see the [ElementsProvider without an intent](/js/react_stripe_js/elements/elements_provider_without_intent.md) reference instead.

### Props

- `stripe` (`Stripe` | Promise<Stripe>) **required**
  A [Stripe object](/js/initializing.md) or a `Promise` that resolves to one. The value returned from
`loadStripe` is the recommended way to initialize this prop.

- `options` (object)
  A set of options to create this `Elements` instance with.

  - `fonts` (array)
    An array of custom fonts, which elements created from the `Elements` object can use. Fonts can be specified as [CssFontSource](#css_font_source_object) or [CustomFontSource](#custom_font_source_object) objects.

  - `locale` (string)
    A [locale](#supported_locales) to display placeholders and error strings in.
Default is `auto` (Stripe detects the locale of the browser).

Setting the locale does not affect the behavior of postal code validation—a valid postal code for the billing country of the card is still required.

To indicate the direction of text for *right to left* languages such as Arabic and Hebrew, mount Elements underneath an HTML element that includes the `dir="rtl"` attribute.

  - `clientSecret` (string) **required**
    Required to use with the [Payment Element](/payments/payment-element.md) and the [Link Authentication Element](/payments/link.md).

The [client secret](/api/payment_intents/object.md#payment_intent_object-client_secret) for a PaymentIntent or SetupIntent.

  - `appearance` (object)
    Supported for the [Payment Element](/payments/payment-element.md), the [Link Authentication Element](/payments/link.md), and the [Address Element](/elements/address-element/.md).

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')
    Supported for the [Payment Element](/payments/payment-element.md), the [Link Authentication Element](/payments/link.md), and the [Address Element](/elements/address-element/.md).

Display skeleton loader UI while waiting for Elements to be fully loaded, after they are mounted.
Default is `'auto'` (Stripe determines if a loader UI should be shown).

  - `currency` (string)
    Used with the [Payment Element](/payments/payment-element.md).

Influences available payment methods when creating SetupIntents with [automatic_payment_methods](/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods).
Payment Element renders the payment methods enabled in the [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods) that support the provided currency.

Three-letter [ISO currency code](https://www.iso.org/iso-4217-currency-codes.html), in lowercase. Must be a [supported currency](/currencies.md).

  - `customerSessionClientSecret` (string)
    Used with the [Payment Element](/payments/payment-element.md) and [Address Element](/elements/address-element.md).

The client_secret returned from create a [CustomerSession](/api/customer_sessions.md) associated with the [Customer ID](/api/customers/object.md#customer_object-id) for that session.

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

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

The checkbox allows the customer the option to sync billing and shipping addresses when multiple Address Elements are used, one of each mode, in a single Elements instance.

Default is `'billing'`. `'none'` opts out of showing the checkbox in either Address Element.

  - `paymentMethodCreation` ('manual')
    Used with the [Payment Element](/payments/payment-element.md) and [Express Checkout Element](/elements/express-checkout-element.md).

Allows PaymentMethods to be created from the Elements instance using [stripe.createPaymentMethod](/js/payment_methods/create_payment_method_elements.md).

**NOTE:** The Express Checkout Element doesn't support [stripe.createPaymentMethod](/js/payment_methods/create_payment_method_elements.md) with [Amazon Pay](/payments/amazon-pay.md) or [Klarna](/payments/klarna.md). Use [stripe.createConfirmationToken](/js/confirmation_tokens/create_confirmation_token.md) instead. Card installments are also unsupported and either blocks showing the plan selection UI, or raises an error for manual enablement using `paymentMethodOptions`.

  - `customPaymentMethods` (array)
    Supported for the [Payment Element](/payments/payment-element.md).

An array of [custom payment methods](/payments/payment-element/custom-payment-methods.md) to display in the [Payment Element](/payments/payment-element.md).
The custom payment methods must be registered in the [Stripe Dashboard](https://dashboard.stripe.com/settings/custom_payment_methods).

    - `id` (string) **required**
      The ID of the [custom payment method type](https://dashboard.stripe.com/settings/custom_payment_methods), prefixed with `cpmt_`.

    - `options` (object)
      A set of options to configure the custom payment method with.

      - `type` ('static') **required**
        The form type of the custom payment method.

      - `subtitle` (string)
        A subtitle contains additional information about the custom payment method.

  - `externalPaymentMethodTypes (deprecated)` (string)
    _This param has been deprecated in favor of [custom payment methods](/js/elements_object/create.md#stripe_elements-options-customPaymentMethods), which offers more flexibility._

The [external payment methods](/payments/external-payment-methods.md) to be displayed in the [Payment Element](/payments/payment-element.md) that you are already integrated with.
Must be an [available external payment methods](/payments/external-payment-methods.md#available-external-payment-methods).

- `children` (ReactNode) **required**
  `Elements` renders its children once the Stripe object and Elements instance are ready.

### Mount Elements

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

const stripePromise = loadStripe('{TEST_PUBLISHABLE_KEY}');

export const App = ({clientSecret, children}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    {children}
  </Elements>
);
```