How to confirm a Payment Intent with Stripe

1<form id="payment-form">
2  <div id="payment-element"></div>
3  <button id="submit-btn" type="submit">Pay now</button>
4  <div id="error-message"></div>
5</form>
6
7<script>
8const form = document.getElementById('payment-form');
9form.addEventListener('submit', handleSubmit);
10</script>

1async function handleSubmit(event) {
2  event.preventDefault();
3  const submitBtn = document.getElementById('submit-btn');
4  submitBtn.disabled = true;
5  submitBtn.textContent = 'Processing...';
6
7  const { error } = await stripe.confirmPayment({
8    elements,
9    confirmParams: {
10      return_url: 'https://yoursite.com/payment-complete',
11    },
12  });
13
14  // This code only runs if there's an immediate error
15  // (e.g., card declined). For successful payments,
16  // the customer is redirected to return_url.
17  if (error) {
18    const messageEl = document.getElementById('error-message');
19    messageEl.textContent = error.message;
20    submitBtn.disabled = false;
21    submitBtn.textContent = 'Pay now';
22  }
23}

1// On your /payment-complete page
2const clientSecret = new URLSearchParams(window.location.search)
3  .get('payment_intent_client_secret');
4
5const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
6
7switch (paymentIntent.status) {
8  case 'succeeded':
9    showMessage('Payment succeeded!');
10    break;
11  case 'processing':
12    showMessage('Payment is processing. We will notify you when it completes.');
13    break;
14  case 'requires_payment_method':
15    showMessage('Payment failed. Please try another payment method.');
16    break;
17  default:
18    showMessage('Something went wrong.');
19}

1const { error, paymentIntent } = await stripe.confirmPayment({
2  elements,
3  redirect: 'if_required',
4});
5
6if (error) {
7  document.getElementById('error-message').textContent = error.message;
8} else if (paymentIntent.status === 'succeeded') {
9  showMessage('Payment succeeded!');
10}

1// Standard success (no 3DS): 4242 4242 4242 4242
2// 3DS required:              4000 0025 0000 3155
3// 3DS required, will fail:   4000 0082 6000 3178
4// Declined:                  4000 0000 0000 0002