stripe-payments

Stripe Payments Integration

Secure payment flows with webhook handling, idempotency, and SCA support.

Checkout Sessions

BAD: Client-side price, no idempotency

// ❌ Trusting client data, XSS risk
app.post('/checkout', async (req, res) => {
  const { priceId, amount } = req.body; // Never trust client
  const session = await stripe.checkout.sessions.create({
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: req.body.successUrl, // XSS risk
  });
  res.json({ url: session.url });
});

GOOD: Server-side price lookup, idempotency, metadata

import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-12-18.acacia',
});

app.post('/checkout', async (req, res) => {
  const { productId, userId } = req.body;

  const prices = await stripe.prices.list({ product: productId, active: true });
  if (!prices.data.length) return res.status(400).json({ error: 'Invalid product' });

  const session = await stripe.checkout.sessions.create({
    line_items: [{ price: prices.data[0].id, quantity: 1 }],
    mode: 'payment',
    success_url: `${process.env.BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.BASE_URL}/cancel`,
    metadata: { userId, productId },
  }, {
    idempotencyKey: `checkout_${userId}_${productId}_${Date.now()}`,
  });

  res.json({ url: session.url });
});

Payment Intents with SCA

BAD: Deprecated Charges API, no 3D Secure

// ❌ Deprecated, no SCA support
app.post('/charge', async (req, res) => {
  await stripe.charges.create({
    amount: req.body.amount,
    source: req.body.token, // Deprecated
  });
});

GOOD: Payment Intent with automatic SCA, React Elements

// Server-side
app.post('/payment-intent', async (req, res) => {
  const order = await db.orders.findUnique({ where: { id: req.body.orderId } });
  if (!order) return res.status(404).json({ error: 'Order not found' });

  const paymentIntent = await stripe.paymentIntents.create({
    amount: order.totalCents,
    currency: 'usd',
    automatic_payment_methods: { enabled: true },
    metadata: { orderId: order.id },
  }, { idempotencyKey: `pi_${order.id}` });

  res.json({ clientSecret: paymentIntent.client_secret });
});

// Client-side React
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';

function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  return (
    <form onSubmit={async (e) => {
      e.preventDefault();
      if (!stripe || !elements) return;
      await stripe.confirmPayment({
        elements,
        confirmParams: { return_url: `${window.location.origin}/complete` },
      });
    }}>
      <PaymentElement />
      <button disabled={!stripe}>Pay</button>
    </form>
  );
}