## Other Element Components

Additional Element wrappers from `@stripe/react-stripe-js` provide specialized payment methods and
input fields. Use these components inside an [Elements Provider](/js/react_stripe_js/elements/elements_provider.md) alongside the standard Element set when
you need to support specific payment experiences.

## AuBankAccountElement

Use the `AuBankAccountElement` from `@stripe/react-stripe-js` to collect Australian bank account information (BSB and account number) for use with BECS Direct Debit payments.

### 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 an `auBankAccount` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `iconStyle` (string)
    Appearance of the icon in the Element.
Either `solid` or `default`.

  - `hideIcon` (boolean)
    Hides the icon in the Element.
Default is `false`.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change.md?type=auBankAccountElement) 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.

### Render AuBankAccountElement

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

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

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

## CardElement

Use the `CardElement` from `@stripe/react-stripe-js` to collect card details with automatic validation.

### 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 a `card` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `value` (object)
    A pre-filled set of values to include in the input.
Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.

    - `postalCode` (string)

  - `hidePostalCode` (boolean)
    Hide the postal code field.
Default is `false`.
If you are already collecting a full billing address or postal code elsewhere, set this to `true`.

  - `iconStyle` (string)
    Appearance of the icon in the Element.
Either `solid` or `default`.

  - `hideIcon` (boolean)
    Hides the icon in the Element.
Default is `false`.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

  - `disableLink` (boolean)
    Disables and hides the Link button in the Element.
Default is `false`.
You can also disable Link across all instances of `card` and `cardNumber` elements in your [payment method settings](https://dashboard.stripe.com/settings/payment_methods).

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

If you specify a value for `preferredNetwork` at create time, [hideIcon](#elements_create-options-hideIcon) must not be true
(so that the Card Brand Choice dropdown can appear) and you cannot specify
[payment_method_options.card.network](/js/payment_intents/confirm_card_payment.md#stripe_confirm_card_payment-data-payment_method_options-card-network)
at confirm time.

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

- `onNetworksChange` (function)
  Callback called when the available card networks change.

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

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

### Render CardElement

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

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

export const CardForm = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <CardElement />
  </Elements>
);
```

## CardCvcElement

Use the `CardCvcElement` from `@stripe/react-stripe-js` to collect the card's expiration date
independently from other card fields.

### 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 a `cardCvc` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `placeholder` (string)
    Customize the placeholder text.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change.md?type=cardCvcElement) 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.

### Render CardCvcElement

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

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

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

## CardExpiryElement

Use the `CardExpiryElement` from `@stripe/react-stripe-js` to collect the card's expiration date
independently from other card fields.

### 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 a `cardExpiry` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `placeholder` (string)
    Customize the placeholder text.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change.md?type=cardExpiryElement) 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.

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

### Render CardExpiryElement

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

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

export const CardExpiryField = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <CardExpiryElement />
  </Elements>
);
```

## CardNumberElement

Use the `CardNumberElement` from `@stripe/react-stripe-js` to collect the PAN (primary account number) independently
while rendering Card CVC and expiration in separate Elements.

### 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 a `cardNumber` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `placeholder` (string)
    Customize the placeholder text.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

  - `showIcon` (boolean)
    Show a card brand icon in the Element.
Default is `false`.

  - `iconStyle` (string)
    Appearance of the icon in the Element.
Either `solid` or `default`.

  - `disableLink` (boolean)
    Disables and hides the Link button in the Element.
Default is `false`.
You can also disable Link across all instances of `card` and `cardNumber` elements in your [payment method settings](https://dashboard.stripe.com/settings/payment_methods).

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

If you specify a value for `preferredNetwork` at create time, [showIcon](#elements_create-options-showIcon) must be true
(so that the Card Brand Choice dropdown can appear) and you cannot specify
[payment_method_options.card.network](/js/payment_intents/confirm_card_payment.md#stripe_confirm_card_payment-data-payment_method_options-card-network)
at confirm time.

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

- `onNetworksChange` (function)
  Callback called when the available card networks change.

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

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

### Render CardNumberElement

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

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

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

## IbanElement

Use the `IbanElement` from `@stripe/react-stripe-js` to collect International Bank Account Numbers
(IBANs) for SEPA Direct Debit and similar payment methods.

### 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 an `iban` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    Customize the appearance of this element using CSS properties passed in a [Style](/js/appendix/style.md) object.

  - `supportedCountries` (array)
    Specify the list of countries or country-groups whose IBANs you want to allow.
Must be `['SEPA']`.

  - `placeholderCountry` (string)
    Customize the country and format of the placeholder IBAN.
Default is `DE`.

  - `iconStyle` (string)
    Appearance of the icon in the Element.
Either `solid` or `default`.

  - `hideIcon` (boolean)
    Hides the icon in the Element.
Default is `false`.

  - `disabled` (boolean)
    Applies a disabled state to the Element such that user input is not accepted.
Default is `false`.

- `onChange` (function)
  Callback called when any value in the [change event payload](/js/element/events/on_change.md?type=ibanElement) 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.

### Render IbanElement

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

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

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

## PaymentRequestButtonElement

Use the `PaymentRequestButtonElement` from `@stripe/react-stripe-js` to display Apple Pay, Google Pay,
Link, and browser-based payment request buttons powered by the Payment Request API.

### 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) **required**
  Options for creating a `paymentRequestButton` element.

  - `classes` (object)
    Set custom class names on the container DOM element when the Stripe element is in a particular state.

    - `base` (string)
      The base class applied to the container.
Defaults to `StripeElement`.

    - `complete` (string)
      The class name to apply when the `Element` is complete.
Defaults to `StripeElement--complete`.

    - `empty` (string)
      The class name to apply when the `Element` is empty.
Defaults to `StripeElement--empty`.

    - `focus` (string)
      The class name to apply when the `Element` is focused.
Defaults to `StripeElement--focus`.

    - `invalid` (string)
      The class name to apply when the `Element` is invalid.
Defaults to `StripeElement--invalid`.

    - `webkitAutofill` (string)
      The class name to apply when the `Element` has its value autofilled by the browser (only on Chrome and Safari).
Defaults to `StripeElement--webkit-autofill`.

  - `style` (object)
    An object used to customize the appearance of the Payment Request Button.
The object must have a single `paymentRequestButton` field, containing any of the following sub-fields:

    - `type` (string)
      Preferred button type to display. Available types, by wallet:


Browser card: `default`, `book`, `buy`, or `donate`.

Google Pay: `default`, `buy`, or `donate`.

Apple Pay: `default`, `book`, `buy`, `donate`, `check-out`, `subscribe`, `reload`, `add-money`, `top-up`, `order`, `rent`, `support`, `contribute`, `tip`


When a wallet does not support the provided value, `default` is used as a fallback.

    - `theme` (string)
      One of `dark`, `light`, or `light-outline`.
The default is `dark`.

    - `height` (string)
      The height of the Payment Request Button. Accepts `px` unit values.

  - `paymentRequest` (PaymentRequest) **required**
    A [PaymentRequest](/js/payment_request.md) object used to configure the element.

- `onClick` (function)
  Callback called when the customer clicks the Element.
Receives the [click event payload](/js/element/events/on_click?type=expressCheckoutElement.md#element_on_click-handler).

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

### Render PaymentRequestButtonElement

```JSX
import React, {useMemo} from 'react';
import {Elements, PaymentRequestButtonElement, useStripe} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

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

const PaymentRequestButton = () => {
  const stripe = useStripe();
  const paymentRequest = useMemo(() => {
    if (!stripe) {
      return null;
    }

    return stripe.paymentRequest({
      country: 'US',
      currency: 'usd',
      total: {
        label: 'Total',
        amount: 1099,
      },
    });
  }, [stripe]);

  if (!paymentRequest) {
    return null;
  }

  return (
    <PaymentRequestButtonElement
      options={{paymentRequest}}
      onClick={(event) => {
        // Inspect event.paymentRequest for custom analytics or validation.
      }}
    />
  );
};

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

## PaymentMethodMessagingElement

Use the `PaymentMethodMessagingElement` from `@stripe/react-stripe-js` to inform a customer about available buy-now-pay-later plans.

### 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) **required**
  Options for displaying a `paymentMethodMessaging` element. [See visual examples in the docs.](/payments/payment-method-messaging.md)

  - `amount` (number) **required**
    The total amount in the [smallest currency unit](/currencies.md#zero-decimal).

  - `currency` (string) **required**
    The currency. One of `AUD`, `CAD`, `CHF`, `CZK`, `DKK`, `EUR`, `GBP`, `NOK`, `NZD`, `PLN`, `RON`, `SEK`, `USD`.

  - `countryCode` (string)
    The end-buyer country. One of `AT`, `AU`, `BE`, `CA`, `CH`, `CZ`, `DE`, `DK`, `ES`, `FI`,
`FR`, `GB`, `GR`, `IE`, `IT`, `NL`, `NO`, `NZ`, `PL`, `PT`, `RO`, `SE`, `US`.

If not set, the buyer's country will be inferred from the request.

  - `paymentMethodTypes` (array)
    A list of payment method types to render. You can omit this attribute to manage your payment methods from the [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods). Any combination of `affirm`, `afterpay_clearpay`, `klarna`.

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

You can override the default order in which payment methods display in the Payment Method Messaging Element with a list of payment method types.

If there are payment methods that will show that aren't specified in `paymentMethodOrder`, they display after the payment methods you specify. If you specify payment methods that won't show, they are ignored.

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

### Render PaymentMethodMessagingElement

```JSX
import React, {useMemo} from 'react';
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

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

export const App = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <PaymentMethodMessagingElement options={{
      amount: 9900,
      currency: 'USD',
      // the country that the end-buyer is in
      countryCode: 'US'
    }} />
  </Elements>
);
```