How to implement 3D Secure with Stripe Elements

1<!-- Frontend HTML -->
2<form id="payment-form">
3  <div id="card-element"></div>
4  <div id="card-errors" role="alert"></div>
5  <button type="submit">Pay</button>
6</form>
7
8<script src="https://js.stripe.com/v3/"></script>
9<script>
10const stripe = Stripe('pk_test_yourPublishableKey');
11const elements = stripe.elements();
12const cardElement = elements.create('card', {
13  style: {
14    base: {
15      fontSize: '16px',
16      color: '#32325d',
17    },
18  },
19});
20cardElement.mount('#card-element');
21
22// Handle validation errors
23cardElement.on('change', (event) => {
24  const errorEl = document.getElementById('card-errors');
25  errorEl.textContent = event.error ? event.error.message : '';
26});
27</script>

1const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
2const express = require('express');
3const app = express();
4app.use(express.json());
5
6app.post('/api/create-payment-intent', async (req, res) => {
7  try {
8    const paymentIntent = await stripe.paymentIntents.create({
9      amount: req.body.amount, // cents
10      currency: 'eur',
11      automatic_payment_methods: { enabled: true },
12    });
13    res.json({ clientSecret: paymentIntent.client_secret });
14  } catch (err) {
15    res.status(400).json({ error: err.message });
16  }
17});

1// Frontend JavaScript
2const form = document.getElementById('payment-form');
3
4form.addEventListener('submit', async (event) => {
5  event.preventDefault();
6
7  // Step 1: Get client secret from server
8  const response = await fetch('/api/create-payment-intent', {
9    method: 'POST',
10    headers: { 'Content-Type': 'application/json' },
11    body: JSON.stringify({ amount: 5000 }), // $50.00
12  });
13  const { clientSecret } = await response.json();
14
15  // Step 2: Confirm payment — 3DS popup appears automatically if needed
16  const { paymentIntent, error } = await stripe.confirmCardPayment(
17    clientSecret,
18    {
19      payment_method: {
20        card: cardElement,
21        billing_details: {
22          name: 'Customer Name',
23        },
24      },
25    }
26  );
27
28  if (error) {
29    // Authentication failed or card was declined
30    document.getElementById('card-errors').textContent = error.message;
31  } else if (paymentIntent.status === 'succeeded') {
32    // Payment successful, no 3DS or 3DS passed
33    alert('Payment successful!');
34  }
35});

1// 3DS Test Cards (any future expiry, any CVC):
2//
3// ALWAYS requires authentication:
4// 4000002500003155 — Requires auth, succeeds when completed
5// 4000002760003184 — Requires auth, succeeds when completed
6//
7// Authentication FAILS:
8// 4000008260003178 — Requires auth, fails authentication
9//
10// NEVER requires authentication:
11// 4242424242424242 — Succeeds without 3DS
12//
13// 3DS2 frictionless (SCA applied but no popup):
14// 4000003800000446 — Approved with frictionless 3DS2
15//
16// Insufficient funds after 3DS:
17// 4000000000009995 — Auth succeeds, but charge is declined
18
19console.log('Test each card to verify:');
20console.log('1. 3DS popup appears for required cards');
21console.log('2. Payment succeeds after authentication');
22console.log('3. Failed auth shows a clear error');
23console.log('4. Non-3DS cards skip the popup');

1async function handlePaymentWithEdgeCases(clientSecret) {
2  try {
3    const { paymentIntent, error } = await stripe.confirmCardPayment(
4      clientSecret,
5      { payment_method: { card: cardElement } }
6    );
7
8    if (error) {
9      switch (error.code) {
10        case 'payment_intent_authentication_failure':
11          showError('Authentication failed. Please try again or use a different card.');
12          break;
13        case 'card_declined':
14          showError('Card was declined. Please use a different card.');
15          break;
16        case 'expired_card':
17          showError('Card has expired. Please use a different card.');
18          break;
19        default:
20          showError(error.message);
21      }
22      return;
23    }
24
25    switch (paymentIntent.status) {
26      case 'succeeded':
27        showSuccess('Payment completed!');
28        break;
29      case 'processing':
30        showInfo('Payment is processing. You will be notified when it completes.');
31        break;
32      case 'requires_payment_method':
33        showError('Payment failed. Please try a different card.');
34        break;
35    }
36  } catch (err) {
37    showError('An unexpected error occurred. Please try again.');
38  }
39}