## Handle card payment with an Element

`stripe.handleCardPayment(clientSecret: string, element: Element, data?: object)`

*`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](https://docs.stripe.com/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](https://docs.stripe.com/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.

*   `clientSecret` The [client secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) of the `PaymentIntent`.
*   `element` A `card` or `cardNumber` [Element](https://docs.stripe.com/js/element.md) that will be used to create a payment method.
*   `data` Data to be sent with the request.
    *   `payment_method_data` Use this parameter to supply additional data relevant to the payment method, such as billing details.
        *   `billing_details` The [billing details](https://docs.stripe.com/api/payment_methods/create.md#create_payment_method-billing_details) associated with the card.

### Example

```javascript
const stripe = await stripe_js.loadStripe('pk_test_...');
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

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

  if (error) {
    // Show error to your customer
  } else {
    // The payment was successful!
  }
});
```