Accepting payments with Stripe Checkout

This chapter follows Products and prices in Stripe.

Stripe Checkout is the default path for many web apps: Stripe renders the payment form, handles wallets and local methods you enable in the Dashboard, and returns the customer to your site. You create a Checkout Session on the server and redirect to session.url.

Prerequisites

You need:

• A Price id for a one-time product (from Products and prices)
• STRIPE_SECRET_KEY and the shared stripe client
• Optional: a Stripe Customer id if the buyer is logged in

Do not pass payment_method_types on the Session unless you are building Terminal card_present flows. Omitting it enables dynamic payment methods from Dashboard settings.

Create a Checkout Session on the server

1
import { stripe } from '../stripe-client.js';
2
import { usersById } from '../store.js';
3

4
const BASE_URL = process.env.BASE_URL ?? 'http://localhost:4242';
5

6
export async function createCheckoutSession(req, res) {
7
  const { userId, priceId } = req.body;
8
  const user = usersById.get(userId);
9

10
  const session = await stripe.checkout.sessions.create({
11
    mode: 'payment',
12
    line_items: [{ price: priceId, quantity: 1 }],
13
    success_url: `${BASE_URL}/success.html?session_id={CHECKOUT_SESSION_ID}`,
14
    cancel_url: `${BASE_URL}/cancel.html`,
15
    customer: user?.stripeCustomerId,
16
    client_reference_id: userId,
17
    metadata: { appUserId: userId ?? 'guest' },
18
  });
19

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

client_reference_id and metadata help your webhook handler tie payment back to your user without trusting query parameters alone.

Redirect the browser to Checkout

1
<button id="buy">Buy Pro (lifetime)</button>
2
<script>
3
  document.getElementById('buy').onclick = async () => {
4
    const res = await fetch('/create-checkout-session', {
5
      method: 'POST',
6
      headers: { 'Content-Type': 'application/json' },
7
      body: JSON.stringify({
8
        userId: 'user_1',
9
        priceId: 'price_REPLACE_ME',
10
      }),
11
    });
12
    const { url } = await res.json();
13
    window.location = url;
14
  };
15
</script>

Wire Express:

1
import express from 'express';
2
import { createCheckoutSession } from './routes/checkout.js';
3

4
const app = express();
5
app.use(express.static('public'));
6
app.use(express.json());
7
app.post('/create-checkout-session', createCheckoutSession);
8
app.listen(4242);

In production, protect the POST route with authentication and validate priceId against your allowed catalog—never accept arbitrary price ids from anonymous clients.

Success and cancel pages

Cancel — Show a friendly message; no payment occurred.

Success — You may retrieve the Session for display:

1
import { stripe } from '../stripe-client.js';
2

3
export async function getSessionStatus(req, res) {
4
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
5
  res.json({
6
    status: session.status,
7
    paymentStatus: session.payment_status,
8
    customerEmail: session.customer_details?.email,
9
  });
10
}

session.status === 'complete' and payment_status === 'paid' indicate success for most card payments. Do not grant entitlements here alone—users can refresh or share the URL. Grant access when your webhook processes checkout.session.completed (and checkout.session.async_payment_succeeded when payment_status is unpaid until async methods settle).

Why fulfillment belongs in webhooks

Redirects are unreliable: closed tabs, back buttons, and mobile handoffs happen daily. Webhooks retry from Stripe’s infrastructure and carry signed proof of the event.

The next payment chapter covers embedded UI; Webhooks in Stripe implements the handler.

Test the flow locally

Use test card 4242 4242 4242 4242, any future expiry, any CVC. Install the Stripe CLI and forward events while developing:

1
stripe listen --forward-to localhost:4242/webhook

Complete a Checkout payment and confirm events arrive before you rely on success-page logic.

Next: Custom payment forms with the Payment Element.