## Other Elements

Stripe also offers a [set of Elements for individual payment methods](/payments/elements.md) that you can use in your payment flows.

## Create an Element

This method creates an instance of an individual `Element`.

It takes the `type` of `Element` to create as well as an `options` object.

**Syntax:** `elements.create(...)`

#### card

- `type` ('card') **required**
  The type of element you are creating. In this case, `card`.

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

### Create a card Element

```js
var cardElement = elements.create('card');
```

```es_next
const cardElement = elements.create('card');
```

#### cardNumber

- `type` ('cardNumber') **required**
  The type of element you are creating.
In this case, `cardNumber`.

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

### Create a cardNumber Element

```js
var cardNumberElement = elements.create('cardNumber');
```

```es_next
const cardNumberElement = elements.create('cardNumber');
```

#### cardExpiry

- `type` ('cardExpiry') **required**
  The type of element you are creating.
In this case, `cardExpiry`.

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

### Create a cardExpiry Element

```js
var cardExpiryElement = elements.create('cardExpiry');
```

```es_next
const cardExpiryElement = elements.create('cardExpiry');
```

#### cardCvc

- `type` ('cardCvc') **required**
  The type of element you are creating.
In this case, `cardCvc`.

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

### Create a cardCvc Element

```js
var cardCvcElement = elements.create('cardCvc');
```

```es_next
const cardCvcElement = elements.create('cardCvc');
```

#### iban

- `type` ('iban') **required**
  The type of element you are creating.
In this case, `iban`.

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

### Create an iban Element

```js
var ibanElement = elements.create('iban');
```

```es_next
const ibanElement = elements.create('iban');
```

#### paymentRequestButton

- `type` ('paymentRequestButton') **required**
  The type of element you are creating.
In this case, `paymentRequestButton`.

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

### Create a paymentRequestButton Element

```js
var paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {label: 'Demo total', amount: 1099},
  requestPayerName: true,
  requestPayerEmail: true,
});

var paymentRequestButtonElement = elements.create(
  'paymentRequestButton',
  {
    paymentRequest: paymentRequest,
    style: {
      paymentRequestButton: {
        theme: 'light',
      },
    },
  },
);
```

```es_next
const paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {label: 'Demo total', amount: 1099},
  requestPayerName: true,
  requestPayerEmail: true,
});

const paymentRequestButtonElement = elements.create(
  'paymentRequestButton',
  {
    paymentRequest,
    style: {
      paymentRequestButton: {
        theme: 'light',
      },
    },
  },
);
```

#### auBankAccount

- `type` ('auBankAccount') **required**
  The type of element you are creating. In this case, `auBankAccount`.

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

### Create an auBankAccount Element

```js
var auBankAccountElement = elements.create('auBankAccount');
```

```es_next
const auBankAccountElement = elements.create('auBankAccount');
```

#### paymentMethodMessaging

- `type` ('paymentMethodMessaging') **required**
  The type of element you are creating. In this case, `paymentMethodMessaging`.

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

### Create a paymentMethodMessaging Element

```js
const options = {
  amount: 9900, // $99.00 USD
  currency: 'USD',
  // the country that the end-buyer is in
  countryCode: 'US'
};
const paymentMethodMessagingElement =
  elements.create('paymentMethodMessaging', options);
```

```es_next
const options = {
  amount: 9900, // $99.00 USD
  currency: 'USD',
  // the country that the end-buyer is in
  countryCode: 'US'
};
const paymentMethodMessagingElement =
  elements.create('paymentMethodMessaging', options);
```

## Get an Element

This method looks up a previously created [Element](/js/element.md) by its type.

`elements.getElement` returns one of the following:

* An instance of an `Element` with a matching type.
* `null`, when no `Element` with a matching type has been created.

**Syntax:** `elements.getElement(...)`

- `type` (string) **required**
  The type of [Element](/js/elements_object/create_element.md) to lookup.

### Get an Element

```js
var cardElement = elements.getElement('card');
```

```es_next
const cardElement = elements.getElement('card');
```

## Update an Element

Updates the options the [Element](/js/element.md)
was initialized with. Updates are merged into the existing configuration.

If you collect certain information in a different part of your interface
(e.g., ZIP or postal code), use `element.update` with the appropriate information.

The styles of an `Element` can be dynamically changed using `element.update`.
This method can be used to simulate CSS media queries that automatically adjust
the size of elements when viewed on different devices.

**Syntax:** `element.update(...)`

#### card

- `options` (object)
  Options for updating 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`.

### Update a card element

```js
// Update an element with details collected elsewhere on your page
var myPostalCodeField = document.querySelector('input[name="my-postal-code"]');
myPostalCodeField.addEventListener('change', function(event) {
  cardElement.update({value: {postalCode: event.target.value}});
});

// Dynamically change the styles of an element
window.addEventListener('resize', function(event) {
  if (window.innerWidth <= 320) {
    cardElement.update({style: {base: {fontSize: '13px'}}});
  } else {
    cardElement.update({style: {base: {fontSize: '16px'}}});
  }
});
```

```es_next
// Update an element with details collected elsewhere on your page
const myPostalCodeField = document.querySelector(
  'input[name="my-postal-code"]',
);
myPostalCodeField.addEventListener('change', ({target}) => {
  cardElement.update({value: {postalCode: target.value}});
});

// Dynamically change the styles of an element
window.addEventListener('resize', (event) => {
  if (window.innerWidth <= 320) {
    cardElement.update({style: {base: {fontSize: '13px'}}});
  } else {
    cardElement.update({style: {base: {fontSize: '16px'}}});
  }
});
```

#### cardNumber

- `options` (object)
  Options for updating 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`.

### Update a cardNumber Element

```js
cardNumberElement.update(options);
```

```es_next
cardNumberElement.update(options);
```

#### cardExpiry

- `options` (object)
  Options for updating 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`.

### Update a cardExpiry Element

```js
cardExpiryElement.update(options);
```

```es_next
cardExpiryElement.update(options);
```

#### cardCvc

- `options` (object)
  Options for updating 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`.

### Update a cardCvc Element

```js
cardCvcElement.update(options);
```

```es_next
cardCvcElement.update(options);
```

#### iban

- `options` (object)
  Options for updating 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`.

### Update an iban Element

```js
ibanElement.update(options);
```

```es_next
ibanElement.update(options);
```

#### paymentRequestButton

- `options` (object) **required**
  Options for updating 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.

### Update a paymentRequestButton Element

```js
paymentRequestButtonElement.update(options);
```

```es_next
paymentRequestButtonElement.update(options);
```

#### auBankAccount

- `options` (object)
  Options for updating 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`.

### Update an auBankAccount Element

```js
auBankAccountElement.update({disabled: true});
```

```es_next
auBankAccountElement.update({disabled: true});
```

## Style the Element container

Style the container you mount an [Element](/js/element.md) to as if it were an `<input>` on your page.
For example, to control `padding` and `border` on an `Element`, set these properties on the container.
This is usually done by re-using the classes that you have applied to your DOM `<input>` elements.
After the `Element` is mounted, the `.StripeElement` class is added to the container.
Additionally, the following classes are automatically added to the container when the `Element` is complete, empty, focused, invalid, or autofilled by the browser:

* `.StripeElement--complete`
* `.StripeElement--empty`
* `.StripeElement--focus`
* `.StripeElement--invalid`
* `.StripeElement--webkit-autofill` (Chrome and Safari only)

These class names can be customized using the `classes` [option](/js/elements_object/create_element.md#elements_create-options-classes) when you [create an Element](#elements_create).

### The Element container

```html
<style>
  .my-input {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>

<form>
  <div>
    <label>Name</label>
    <input class="my-input">
  </div>
  <div>
    <label>Card</label>
    <!-- Using the same "my-input" class on the -->
    <!-- regular input above and on this container. -->
    <div class="my-input" id="card-element"></div>
  </div>
</form>
```

## Input validation

Stripe elements validate customer input as it is typed.
To help your customers catch mistakes, listen to `change` events on an `Element` and display any errors.

### Display validation errors from an Element

```js
cardElement.on('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});
```

```es_next
cardElement.on('change', ({error}) => {
  const displayError = document.getElementById('payment-errors');
  if (error) {
    displayError.textContent = error.message;
  }
});
```

## Postal code formatting

The `card` element automatically determines your customer’s billing address country based on their card number.
Using this information, the postal code field validation reflects whether that country uses numeric or alphanumeric-formatted postal codes, or if the country uses postal codes at all.
For instance, if a U.S. card is entered, the postal code field only accepts a five-digit numeric value.
If it’s a UK card, an alphanumeric value can be provided instead.

Many of our test cards have a U.S. billing address country.
When using these to test your payment form, you must also use a five-digit U.S. ZIP code (e.g., 12345).
To test elements with other postal code formats, use our [international test card numbers](/testing.md#international-cards).