npm install stripe

app/api/create-checkout-session/route.js

import Stripe from 'stripe';

// Initialize Stripe with your secret key
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function POST(req) {
  try {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: {
              name: 'Digital File',
            },
            unit_amount: 2000, // Amount in cents ($20.00)
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: `${process.env.BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.BASE_URL}/cancel`,
    });

    // Respond with the session ID to the frontend
    return new Response(JSON.stringify({ sessionId: session.id }), {
      status: 200,
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), {
      status: 500,
    });
  }
}

.env file

STRIPE_SECRET_KEY=sk_test_your_secret_key
BASE_URL=http://localhost:3000

app/page.js

'use client';

import { useState } from 'react';

export default function Home() {
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);

    // Make a POST request to the API route to create the checkout session
    const res = await fetch('/api/create-checkout-session', {
      method: 'POST',
    });

    const data = await res.json();

    if (res.status === 200) {
      // Use Stripe.js to redirect to the checkout page
      const stripe = window.Stripe(process.env.STRIPE_PUBLISHABLE_KEY); // Replace with your publishable key
      const { error } = await stripe.redirectToCheckout({ sessionId: data.sessionId });

      if (error) {
        console.error('Error redirecting to checkout:', error);
      }
    } else {
      console.error('Error creating checkout session:', data.error);
    }

    setLoading(false);
  };

  return (
    <div>
      <h1>Purchase a Digital File</h1>
      <button onClick={handleCheckout} disabled={loading}>
        {loading ? 'Loading...' : 'Checkout'}
      </button>
    </div>
  );
}

Our success URL http://your-domain/success?session_id={CHECKOUT_SESSION_ID}
app/success/page.js

'use client';

import { useEffect, useState } from 'react';

export default function SuccessPage() {
  const [loading, setLoading] = useState(true);
  const [sessionData, setSessionData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Extract the session_id from the query string
    const urlParams = new URLSearchParams(window.location.search);
    const sessionId = urlParams.get('session_id');

    if (sessionId) {
      // Fetch session data from your API
      const fetchSessionData = async () => {
        try {
          const res = await fetch(`/api/retrieve-checkout-session?session_id=${sessionId}`);
          const data = await res.json();

          if (res.status === 200) {
            setSessionData(data);
          } else {
            setError('Failed to retrieve session data');
          }
        } catch (error) {
          setError('Error fetching session data');
        } finally {
          setLoading(false);
        }
      };

      fetchSessionData();
    } else {
      setError('No session_id provided');
      setLoading(false);
    }
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>{error}</p>;

  return (
    <div>
      <h1>Checkout Successful!</h1>
      <h2>Session Data:</h2>
      <pre>{JSON.stringify(sessionData, null, 2)}</pre>
      <h3>Product Details:</h3>
      {sessionData.line_items && sessionData.line_items.map((item, index) => (
        <div key={index}>
          <p>Name: {item.description}</p>
          <p>Quantity: {item.quantity}</p>
          <p>Amount: ${item.amount_total / 100}</p>
        </div>
      ))}
    </div>
  );
}

Set up the API route to retrieve session data
app/api/retrieve-checkout-session/route.js

import Stripe from 'stripe';

// Initialize Stripe with your secret key
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export async function GET(req) {
  try {
    // Extract session_id from the query params
    const url = new URL(req.url);
    const sessionId = url.searchParams.get('session_id');

    if (!sessionId) {
      return new Response(JSON.stringify({ error: 'session_id is required' }), { status: 400 });
    }

    // Retrieve the session from Stripe
    const session = await stripe.checkout.sessions.retrieve(sessionId, {
      expand: ['line_items'], // Expanding the line items to get the product data
    });

    // Send back the session data, including line items (products)
    return new Response(JSON.stringify(session), { status: 200 });
  } catch (err) {
    return new Response(JSON.stringify({ error: err.message }), { status: 500 });
  }
}
Edit

Pub: 21 Mar 2025 03:22 UTC

Views: 84