## Handle card payment with an Element

*`handleCardPayment` has been renamed to [confirmCardPayment](#stripe_confirm_card_payment).
In addition to the rename, we have slightly modified the arguments.
These changes do not affect the behavior of the method.
While we have no plans to ever remove support for `handleCardPayment`, we think the new name and arguments are easier to understand and better convey what the method is doing.*

Use `stripe.handleCardPayment(clientSecret, element, data?)` when the customer submits your payment form.
It will gather payment information from the element, which can be a `card` or `cardNumber` element, along with any other data you provide.
It will then confirm the `PaymentIntent` and carry out 3DS or other `next_action`s if they are required.

If you are using [Dynamic 3D Secure](/payments/3d-secure.md#three-ds-radar), `handleCardPayment` will trigger your Radar rules to execute and may open a dialog for your customer to authenticate their payment.

> Note that `stripe.handleCardPayment` may take several seconds to complete.
> During that time, you should disable your form from being resubmitted and show a waiting indicator like a spinner.
> If you receive an error result, you should be sure to show that error to the customer, re-enable the form, and hide the waiting indicator.
> 
> Additionally, `stripe.handleCardPayment` may trigger a [3D Secure](/payments/3d-secure.md) authentication challenge.
> This will be shown in a modal dialog and may be confusing for customers using assistive technologies like screen readers.
> You should make your form accessible by ensuring that success or error messages are clearly read out after this method completes.

A Promise which resolves with a `result` object.

The object will have either:

* `result.paymentIntent`: the successful [PaymentIntent](/api/payment_intents).
* `result.error`: An error. Refer to the [API reference](/api/errors) for all possible errors.

**Syntax:** `stripe.handleCardPayment(...)`

- `clientSecret` (string) **required**
  The [client secret](/api/payment_intents/object.md#payment_intent_object-client_secret) of the `PaymentIntent`.

- `element` (Element) **required**
  A `card` or `cardNumber` [Element](/js/element.md) that will be used to create a payment method.

- `data` (object)
  Data to be sent with the request.

  - `payment_method_data` (object)
    Use this parameter to supply additional data relevant to the payment method, such as billing details.

    - `billing_details` (object)
      The [billing details](/api/payment_methods/create.md#create_payment_method-billing_details) associated with the card.

  - `shipping` (object)
    The [shipping details](/api/payment_intents/confirm.md#confirm_payment_intent-shipping) for the payment, if collected.

  - `receipt_email` (string)
    Email address that the receipt for the resulting payment will be sent to.

  - `setup_future_usage` (string)
    Indicates that you intend to make future payments with this [PaymentIntent](/api/payment_intents.md)'s payment method.

If present, the `PaymentMethod` used with this PaymentIntent can be [attached to a Customer](/api/payment_methods/attach.md), even after the transaction completes.

Use `on_session` if you intend to only reuse the `PaymentMethod` when your customer is present in your checkout flow.
Use `off_session` if your customer may or may not be in your checkout flow.
See [saving card details during payment](/payments/cards/saving-cards-after-payment.md) to learn more.

Stripe uses `setup_future_usage` to dynamically optimize your payment flow and comply with regional legislation and network rules.
For example, if your customer is impacted by SCA, using `off_session` will ensure that they are authenticated while processing this PaymentIntent.
You will then be able to collect [off-session payments](/payments/cards/charging-saved-cards.md#off-session-payments-with-saved-cards) for this customer.

### Handle a card payment

```js
stripe
  .handleCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', element, {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  })
  .then(function(result) {
    // Handle result.error or result.paymentIntent
  });
```

```es_next
const {paymentIntent, error} = await stripe.handleCardPayment(
  '{PAYMENT_INTENT_CLIENT_SECRET}',
  element,
  {
    payment_method_data: {
      billing_details: {
        name: 'Jenny Rosen',
      },
    },
  },
);
```