## Update a Payment Element

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

**NOTE**: Don't use `element.update()` to fetch updates from a [PaymentIntent](/api/payment_intents.md) or [SetupIntent](/api/setup_intents.md).
Use [elements.fetchUpdates()](/js/elements_object/fetch_updates.md) instead.

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

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

  - `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')

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

These are [tz](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) timezones such as `America/Los_Angeles`, `Europe/Dublin`, and `Asia/Singapore`.

    - `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` (number) **required**

      - `billingAgreement` (string)

### Update a Payment Element

```js
// Create a Payment Element with customized fields
var paymentElement = elements.create('payment', {
  business: { name: 'Stripe Shop' },
  defaultValues: {
    billingDetails: {
      name: 'Jenny Rosen',
    }
  }
});

// Update with modified defaultValues
paymentElement.update({
  defaultValues: {
    billingDetails: {
      email: 'john.smith@example.com',
      phone: '5554242424',
    }
  }
});

// In the resulting options, business remains the same,
// while defaultValues is overwritten with the updated value
//
// {
//  business: { name: 'Stripe Shop' },
//  defaultValues: {
//   billingDetails: {
//     email: 'john.smith@example.com',
//     phone: '5554242424',
//   }
// }
```

```es_next
// Create a Payment Element with customized fields
const paymentElement = elements.getElement('payment', {
  business: { name: 'Stripe Shop' },
  defaultValues: {
    billingDetails: {
      name: 'Jenny Rosen',
    }
  }
});

// Update with modified defaultValues
paymentElement.update({
  defaultValues: {
    billingDetails: {
      email: 'john.smith@example.com',
      phone: '5554242424',
    }
  }
});

// In the resulting options, business remains the same,
// while defaultValues is overwritten with the updated value
//
// {
//  business: { name: 'Stripe Shop' },
//  defaultValues: {
//   billingDetails: {
//     email: 'john.smith@example.com',
//     phone: '5554242424',
//   }
// }
```