## PaymentElement

Use the `PaymentElement` from `@stripe/react-stripe-js` to collect payment details for more
 than [40 payment methods](/docs/payments/payment-methods/integration-options.md) from around the globe.

The component must be rendered inside an [Elements Provider](/js/react_stripe_js/elements/elements_provider.md).

### Props

- `id` (string)
  Sets the DOM `id` attribute on the rendered Element container. Use this to
target the Element for styling or testing.

- `className` (string)
  Applies custom CSS classes to the Element container.

- `options` (object)
  Options for creating the Payment Element.

  - `layout` ('accordion' | 'tabs' | object)
    Specify the layout for the Payment Element. If you only pass a layout type (`'accordion'` or `‘tabs’`) without any additional parameters, the Payment Element renders using that layout and the default values associated with it.

An object can also be passed to specify the layout with additional configuration.

    - `type` ('accordion' | 'tabs') **required**
      Defines the layout to render the Payment Element.

    - `defaultCollapsed` (boolean)
      Controls if the Payment Element renders in a collapsed state (where no payment method is selected by default). When you leave this `undefined`, Stripe renders the experience that it determines will have the best conversion.

    - `radios` ('always' | 'never' | 'if_multiple' | 'auto')
      Controls when to render each Payment Method with a radio input next to its logo. The radios visually indicate the current selection of the Payment Element. Defaults to `'auto'`.

- `'always'` — Always show radio inputs.
- `'never'` — Never show radio inputs.
- `'if_multiple'` — Show radio inputs only when there are multiple payment methods available. When there is only one payment method, no radio input is displayed.
- `'auto'` — Stripe determines the best experience to optimize conversion.

_This property is only applicable to the `accordion` layout._

    - `spacedAccordionItems` (boolean)
      When `true`, the Payment Methods render as standalone buttons with space in between them.

_This property is only applicable to the `accordion` layout._

    - `visibleAccordionItemsCount` (number)
      Sets the max number of Payment Methods visible before using the "More" button to hide additional Payment Methods. Set this value to `0` to disable the "More" button and render all available Payment Methods. Default is `5`.

_This property is only applicable to the `accordion` layout._

    - `paymentMethodLogoPosition` ('start' | 'end')
      Sets the position of the payment method logo in each accordion item. Default is `start`.

_This property is only applicable to the `accordion` layout._

  - `defaultValues` (object)
    Provide initial customer information that will be displayed in the Payment Element.
The form will render with empty fields if not provided.

    - `billingDetails` (object)
      Specify customer's billing details, which lets you pre-fill a customer’s name, email,
phone number and address if required by payment method. Pre-filling as much information
as possible streamlines the checkout process.

      - `name` (string)

      - `email` (string)

      - `phone` (string)

      - `address` (object)

        - `line1` (string)

        - `line2` (string)

        - `city` (string)
          The name of a city, town, village, etc.

        - `state` (string)
          The most coarse subdivision of a country.
Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines.

        - `country` (string)
          Two-letter country code, capitalized. Valid two-letter country codes are specified by ISO3166 alpha-2.

        - `postal_code` (string)
          The postal code or ZIP code, also known as PIN code in India.

    - `paymentMethods` (object)
      Specify customer's default information for different payment methods. Pre-filling as much information
as possible streamlines the checkout process.

      - `ideal` (object)

        - `bank` (string)
          A pre-filled iDEAL bank value for the Payment Element. Can only be one of the banks listed in the [iDEAL guide](/payments/ideal/accept-a-payment?ui=element.md#bank-reference) (e.g., `abn_amro`).

      - `payto` (object)

        - `usePayId` (boolean)
          When `true`, the PayTo payment method will default to showing the PayID input instead of BSB/account number fields. Customers can still switch between PayID and BSB/account number using the toggle link.

    - `card` (object)
      Specify default settings for card payments.

      - `network` (array)
        Specifies a network preference for [Card Brand Choice](/card-brand-choice.md). The first network in the array that matches a network on the entered co-branded card will be selected by default in the Card Brand Choice dropdown. See the [supported networks](/api/payment_methods/create.md#create_payment_method-card-networks-preferred) for valid values.

  - `business` (object)
    Provide information about your business that will be displayed in the Payment Element.
This information will be retrieved from your Stripe account if not provided.

    - `name` (string)
      The name of your business. Your business name will be used to render mandate text for some payment methods.

  - `paymentMethodOrder` (array)
    By default, the Payment Element will use a dynamic ordering that optimizes payment method display for each user.

You can override the default order in which payment methods are displayed in the Payment Element with a list of payment method types.

If the associated PaymentIntent has payment method types not specified in `paymentMethodOrder`, they will be displayed
after the payment methods you specify. If you specify payment method types not on the associated PaymentIntent, they will be ignored.

  - `fields` (object)
    By default, the Payment Element will collect all necessary details to complete a payment.

For some payment methods, this means that the Payment Element will collect details like name or email
that you may have already collected from the user. If this is the case, you can prevent the Payment Element
from collecting these data by using the `fields` option.

If you disable the collection of a certain field
with the `fields` option, you must pass that same data to [stripe.confirmPayment](/js/payment_intents/confirm_payment.md)
or the payment will be rejected.

Learn more about how to [customize which billing details to collect](/payments/payment-element/control-billing-details-collection.md) and
see [below](/js/elements_object/create_payment_element.md#payment_element_create-customized_fields) for details.

    - `billingDetails` ('never' | 'auto' | object)
      Specify `never` to avoid collecting all [billing details](/api/payment_methods/object.md#payment_method_object-billing_details)
in the Payment Element. If you would like to disable only certain billing details,
pass an object specifying which fields you would like to disable collection for.
The default setting for each field or object is `auto`.

      - `name` ('never' | 'auto')

      - `email` ('never' | 'auto')

      - `phone` ('never' | 'auto')

      - `address` ('never' | 'if_required' | 'auto' | object)
        Specify `if_required` to only collect the minimum billing address fields required to complete the payment.
You can omit and hide optional address fields in the card form, such as country and postal code.
Unlike the `never` option, you don't need to include fields omitted in the Payment Element when confirming the payment.
This can reduce the amount of information required to complete the form.

Disabling address collection can negatively impact authorization rates and network fees for users on a network cost plus pricing plan.

        - `line1` ('never' | 'auto')

        - `line2` ('never' | 'auto')

        - `city` ('never' | 'auto')
          The name of a city, town, village, etc.

        - `state` ('never' | 'auto')
          The most coarse subdivision of a country.
Depending on the country, this might correspond to a state, a province, an oblast, a prefecture, or something else along these lines.

        - `country` ('never' | 'auto')
          Two-letter country code, capitalized. Valid two-letter country codes are specified by ISO3166 alpha-2.

        - `postalCode` ('never' | 'auto')
          The postal code or ZIP code, also known as PIN code in India.

  - `readOnly` (boolean)
    Applies a read-only state to the Payment Element so that payment details can’t be changed. Default is false.

Enabling the `readOnly` option doesn't change the Payment Element's visual appearance. If you want to adjust the way the Payment Element looks, use the [Appearance API](/elements/appearance-api.md).

  - `terms` (object)
    Control how mandates or other legal agreements are displayed in the Payment Element.
Use `never` to never display legal agreements. The default setting is `auto`, which causes
legal agreements to only be shown when necessary.

Consult your legal and compliance advisors before making any changes to the text of mandates or legal agreements. You can't use the `terms` option to violate obligations under your Stripe agreement, Stripe policies, applicable laws or scheme rules.

    - `applePay` ('auto' | 'always' | 'never')

    - `auBecsDebit` ('auto' | 'always' | 'never')

    - `bancontact` ('auto' | 'always' | 'never')

    - `card` ('auto' | 'always' | 'never')

    - `cashapp` ('auto' | 'always' | 'never')

    - `googlePay` ('auto' | 'always' | 'never')

    - `ideal` ('auto' | 'always' | 'never')

    - `paypal` ('auto' | 'always' | 'never')

    - `sepaDebit` ('auto' | 'always' | 'never')

    - `sofort` ('auto' | 'always' | 'never')

    - `usBankAccount` ('auto' | 'always' | 'never')

  - `wallets` (object)
    By default, the Payment Element will display all the payment
methods that the underlying Payment Intent was created with.

However, wallets like Apple Pay and Google Pay are not payment
methods per the Payment Intent API. They will show when the
Payment Intent has the `card` payment method and the customer is
using a supported platform and have an active card in their
account.  This is the `auto` behavior, and it is the default for
choice for all wallets.

If you do not want to show a given wallet as a payment option, you
can set its property in `wallets` to `never`.

    - `applePay` ('auto' | 'never')

    - `googlePay` ('auto' | 'never')

    - `link` ('auto' | 'never')

  - `applePay` (object)
    Specify Apple Pay specific options. These are passed through to the Apple Pay API.

    - `recurringPaymentRequest` (object)
      Specify a request to set up a recurring payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayrecurringpaymentrequest) for more details.

      - `paymentDescription` (string) **required**

      - `managementURL` (string) **required**

      - `regularBilling` (object) **required**

        - `amount` (number) **required**

        - `label` (string) **required**

        - `recurringPaymentStartDate` (Date)

        - `recurringPaymentEndDate` (Date)

        - `recurringPaymentIntervalUnit` ('year' | 'month' | 'day' | 'hour' | 'minute')

        - `recurringPaymentIntervalCount` (number)

      - `trialBilling` (object)

        - `amount` (number) **required**

        - `label` (string) **required**

        - `recurringPaymentStartDate` (Date)

        - `recurringPaymentEndDate` (Date)

        - `recurringPaymentIntervalUnit` ('year' | 'month' | 'day' | 'hour' | 'minute')

        - `recurringPaymentIntervalCount` (number)

      - `billingAgreement` (string)

    - `deferredPaymentRequest` (object)
      Specify a request to set up a deferred payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaydeferredpaymentrequest) for more details.

      - `paymentDescription` (string) **required**

      - `managementURL` (string) **required**

      - `deferredBilling` (object) **required**

        - `amount` (number) **required**

        - `label` (string) **required**

        - `deferredPaymentDate` (Date) **required**

      - `billingAgreement` (string)

      - `freeCancellationDate` (Date)
        If set, you must also supply a freeCancellationDateTimeZone.,

      - `freeCancellationDateTimeZone` (string)
        "If set, you must also supply a freeCancellationDate.,

    - `automaticReloadPaymentRequest` (object)
      Specify a request to set up an automatic reload payment. See the [Apple Pay documentation](https://developer.apple.com/documentation/apple_pay_on_the_web/applepayautomaticreloadpaymentrequest) for more details.

      - `paymentDescription` (string) **required**

      - `managementURL` (string) **required**

      - `automaticReloadBilling` (object) **required**

        - `amount` (number) **required**

        - `label` (string) **required**

        - `automaticReloadPaymentThresholdAmount` (Date) **required**

      - `billingAgreement` (string)

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change?type=paymentElement.md#element_on_change-handler) changes.

- `onReady` (function)
  Callback called once the Element is fully rendered.
Recieves the [ready event payload](/js/element/events/on_ready.md#element_on_ready-handler).

- `onBlur` (function)
  Callback called when the Element loses focus.

- `onFocus` (function)
  Callback called when the Element receives focus.

- `onEscape` (function)
  Callback called when the escape key is pressed within the Element.

- `onLoaderStart` (function)
  Callback called right before Stripe displays the Element skeleton loader.
Receives the Element instance as its only argument.

- `onLoadError` (function)
  Callback called when the Element fails to load.

### Render PaymentElement

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

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

export const App = ({clientSecret}) => (
  <ElementsProvider
    stripe={stripePromise}
    options={{clientSecret}}
  >
    <form>
      <PaymentElement />
      <button type="submit">Pay now</button>
    </form>
  </ElementsProvider>
);
```