How to store card details securely with Stripe

1// Frontend: Load Stripe.js and create Elements
2// <script src="https://js.stripe.com/v3/"></script>
3
4// Initialize with your PUBLISHABLE key (pk_test_...)
5const stripe = Stripe('pk_test_yourPublishableKey');
6const elements = stripe.elements();
7const cardElement = elements.create('card');
8cardElement.mount('#card-element');
9
10// When the form is submitted, create a PaymentMethod
11async function handleSubmit() {
12  const { paymentMethod, error } = await stripe.createPaymentMethod({
13    type: 'card',
14    card: cardElement,
15  });
16
17  if (error) {
18    console.error(error.message);
19    return;
20  }
21
22  // Send ONLY the paymentMethod.id to your server
23  await fetch('/api/save-card', {
24    method: 'POST',
25    headers: { 'Content-Type': 'application/json' },
26    body: JSON.stringify({ paymentMethodId: paymentMethod.id }),
27  });
28}

1const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
2
3// Server: Create a SetupIntent
4async function createSetupIntent(customerId) {
5  const setupIntent = await stripe.setupIntents.create({
6    customer: customerId,
7    payment_method_types: ['card'],
8  });
9  return setupIntent.client_secret; // Send to frontend
10}
11
12// Frontend: Confirm the SetupIntent with the card element
13async function confirmSetup(clientSecret) {
14  const { setupIntent, error } = await stripe.confirmCardSetup(clientSecret, {
15    payment_method: {
16      card: cardElement,
17    },
18  });
19
20  if (error) {
21    console.error(error.message);
22  } else {
23    console.log('Card saved:', setupIntent.payment_method);
24  }
25}

1async function saveCardToCustomer(paymentMethodId, customerId) {
2  // Attach the PaymentMethod to the customer
3  await stripe.paymentMethods.attach(paymentMethodId, {
4    customer: customerId,
5  });
6
7  // Optionally set as default payment method
8  await stripe.customers.update(customerId, {
9    invoice_settings: {
10      default_payment_method: paymentMethodId,
11    },
12  });
13
14  console.log(`Card ${paymentMethodId} saved to customer ${customerId}`);
15}
16
17saveCardToCustomer('pm_1ABC', 'cus_customer123');

1async function chargeSavedCard(customerId, paymentMethodId, amount) {
2  const paymentIntent = await stripe.paymentIntents.create({
3    amount: amount, // in cents
4    currency: 'usd',
5    customer: customerId,
6    payment_method: paymentMethodId,
7    off_session: true, // Customer is not present
8    confirm: true,
9  });
10
11  console.log('Payment succeeded:', paymentIntent.id);
12  return paymentIntent;
13}
14
15chargeSavedCard('cus_customer123', 'pm_1ABC', 2500); // $25.00