## 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});
```