## The Payment Element

The [Payment Element](/payments/payment-element.md) is
an embeddable component for securely collecting payment details.
The Payment Element supports dozens of payment methods with a single integration.

## Create the Payment Element

This method creates an instance of the Payment Element.

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

- `type` ('payment') **required**
  The type of Element being created, which is `payment` in this case.

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

### Use case: with customized fields

### Option parameter

- `fields` (object)
  Pass an object to specify payment `fields` you don't want to collect with the Payment Element.

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

### Create a Payment Element with customized fields

```js
// Customize which fields are collected by the Payment Element
var paymentElement = elements.create('payment', {
  fields: {
    billingDetails: {
      name: 'never',
      email: 'never',
    }
  }
});

// If you disable collecting fields in the Payment Element, you
// must pass equivalent data when calling `stripe.confirmPayment`.
form.addEventListener('submit', async (event) => {
  stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://example.com',
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
          email: 'jenny.rosen@example.com',
        }
      },
    },
  })
  .then(function(result) {
    if (result.error) {
      // Inform the customer that there was an error.
    }
  });
});
```

```es_next
// Customize which fields are collected by the Payment Element
const paymentElement = elements.create('payment', {
  fields: {
    billingDetails: {
      name: 'never',
      email: 'never',
    }
  }
});

// If you disable collecting fields in the Payment Element, you
// must pass equivalent data when calling `stripe.confirmPayment`.
const handleSubmit = async () => {
  const {error} = await stripe.confirmPayment({
    elements,
    confirmParams: {
      return_url: 'https://example.com/return',
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
          email: 'jenny.rosen@example.com',
        }
      },
    },
  });
     // Other actions ...
};
```

### Create a Payment Element

```js
var paymentElement = elements.create('payment');
```

```es_next
const paymentElement = elements.create('payment');
```

## Get a Payment Element

This method retrieves a previously created Payment Element.

`elements.getElement('payment')` returns one of the following:

* An instance of a Payment Element.
* `null`, when no Payment Element has been created.

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

- `type` ('payment') **required**
  The type of Element being retrieved, which is `payment` in this case.

### Get a Payment Element

```js
var paymentElement = elements.getElement('payment');
```

```es_next
const paymentElement = elements.getElement('payment');
```

## 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',
//   }
// }
```

## Fetch Server Updates

Used with the [Payment Element](/payments/payment-element.md).

This method fetches updates from the associated [PaymentIntent](/api/payment_intents.md) or [SetupIntent](/api/setup_intents.md) on an existing instance of `Elements`, and reflects these updates in the Payment Element.

This method returns a `Promise` which resolves with a result object.
If this method succeeds, the result object will be empty.
If this method fails, the result object will contain a localized error message in the `error.message` field. If the associated [PaymentIntent](/api/payment_intents) or [SetupIntent](/api/setup_intents) is in an unexpected status, the result object will also contain the intent's status in the `error.status` field.

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

### Fetch Server Updates

```js
elements.fetchUpdates()
  .then(function(result) {
    // Handle result.error
  });
```

```es_next
const {error} = await elements.fetchUpdates();
```

## Collapse a Payment Element

This method collapses the Payment Element into a row of payment method tabs.

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

### Collapse a Payment Element

```js
// Collapse a Payment Element
var paymentElement = elements.getElement('payment');
paymentElement.collapse();
```

```es_next
// Collapse a Payment Element
const paymentElement = elements.getElement('payment');
paymentElement.collapse();
```