Stripe Checkout Fresh

Create a payments page with prebuilt UIs using the Checkout Sessions API. Accept one-time and subscription payments from more than 125 local payment methods.

Three checkout modes

Mode	Hosting	Customization	Complexity
Full page (Recommended)	Stripe-hosted or embedded	15 settings via brand settings	Low
Embedded form	Your domain	70 settings via Appearance API	Medium
Elements	Your domain	Full CSS via Appearance API	High

All three modes use the same Checkout Sessions API.

Full-page checkout (hosted)

Redirect customers to a Stripe-hosted payment page. Recommended for fastest implementation.

Features

• Full order summary with subtotals, tax, shipping, discounts, promo codes
• Built-in support for Billing, Tax, Adaptive Pricing, Link, dynamic payment methods
• Cross-sells and upsells
• Free trial support

Create a session

const session = await stripe.checkout.sessions.create({
  line_items: [
    {
      price_data: {
        currency: 'usd',
        product_data: { name: 'Pro Plan' },
        unit_amount: 2000,
      },
      quantity: 1,
    },
  ],
  mode: 'payment',
  success_url: 'https://example.com/success?session_id={CHECKOUT_SESSION_ID}',
  cancel_url: 'https://example.com/cancel',
});

// Redirect customer to session.url

Subscription mode

const session = await stripe.checkout.sessions.create({
  line_items: [{ price: 'price_monthly_plan', quantity: 1 }],
  mode: 'subscription',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

Embedded checkout

Keep customers on your domain while Stripe renders the checkout UI in an iframe.

// Server
const session = await stripe.checkout.sessions.create({
  ui_mode: 'embedded',
  line_items: [{ price: 'price_1234', quantity: 1 }],
  mode: 'payment',
  return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}',
});
// Return session.client_secret to client

// Client
const checkout = await stripe.initEmbeddedCheckout({ clientSecret });
checkout.mount('#checkout');

Customization

Branding (hosted checkout)

Configure in Dashboard → Settings → Branding:

• Logo
• Background color
• Button color
• Font (from 20 preset options)
• Border radius (3 preset options)

Appearance API (embedded / Elements)

const elements = stripe.elements({
  clientSecret,
  appearance: {
    theme: 'stripe',
    variables: {
      colorPrimary: '#635bff',
      colorBackground: '#ffffff',
      colorText: '#30313d',
      borderRadius: '4px',
    },
  },
});

Collect additional information

const session = await stripe.checkout.sessions.create({
  // Collect phone number
  phone_number_collection: { enabled: true },
  // Collect billing address
  billing_address_collection: 'required',
  // Collect shipping address
  shipping_address_collection: {
    allowed_countries: ['US', 'CA', 'GB'],
  },
  line_items: [{ price: 'price_1234', quantity: 1 }],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

Apply discounts and promotions

const session = await stripe.checkout.sessions.create({
  discounts: [{ coupon: 'coupon_id' }],
  // Or allow customers to enter promo codes
  allow_promotion_codes: true,
  line_items: [{ price: 'price_1234', quantity: 1 }],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
});

Retrieve session details

After a successful payment, retrieve the session to access customer and payment data:

const session = await stripe.checkout.sessions.retrieve(
  req.query.session_id,
  { expand: ['line_items', 'customer'] }
);

console.log(session.customer_details.email);
console.log(session.amount_total);
console.log(session.payment_status); // 'paid'

Fulfill orders with webhooks

app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
  const event = stripe.webhooks.constructEvent(req.body, req.headers['stripe-signature'], process.env.WEBHOOK_SECRET);

  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      if (session.payment_status === 'paid') {
        fulfillOrder(session);
      }
      break;
    case 'checkout.session.async_payment_succeeded':
      fulfillOrder(event.data.object);
      break;
    case 'checkout.session.async_payment_failed':
      sendPaymentFailedEmail(event.data.object);
      break;
  }

  res.json({ received: true });
});

Some payment methods (ACH, bank transfers) are asynchronous — listen for checkout.session.async_payment_succeeded in addition to checkout.session.completed.