How to integrate Stripe sandbox payment and pricing plans?

Step 1: Install Stripe dependencies

Run this in your terminal:

npm install @stripe/stripe-js @stripe/react-stripe-js

Step 2: Create a test Stripe account

1. Go to https://dashboard.stripe.com/register

2. Enable “View test data” mode (toggle on top-left).

3. Copy your Publishable key (starts with pk_test_…).

Step 3: Create a Payment Component (SandboxPayment.tsx)
This handles the sandbox (test) checkout session.

// SandboxPayment.tsx

import { loadStripe } from “@stripe/stripe-js”;

import { Elements, useStripe, useElements, CardElement } from “@stripe/react-stripe-js”;

import { useState } from “react”;

import { Button } from “@/components/ui/button”;

const stripePromise = loadStripe(“pk_test_XXXXXXXXXXXXXXXXXXXXXXXX”); // replace with your test key

const CheckoutForm = ({ planName, planPrice }: { planName: string; planPrice: string }) => {

  const stripe = useStripe();

  const elements = useElements();

  const [loading, setLoading] = useState(false);

  const [success, setSuccess] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {

    e.preventDefault();

    if (!stripe || !elements) return;

    setLoading(true);

    // Mock sandbox behavior

    setTimeout(() => {

      setLoading(false);

      setSuccess(true);

    }, 1500);

  };

  if (success) {

    return (

      <div className=”text-center text-green-500 font-semibold”>

        Sandbox Payment Successful for {planName} ({planPrice})

      </div>

    );

  }

 return (

    <form onSubmit={handleSubmit} className=”space-y-4″>

      <CardElement className=”p-3 bg-white/10 rounded-lg” />

      <Button type=”submit” disabled={!stripe || loading} className=”w-full bg-[#508b00] hover:bg-[#6cb000] text-white”>

        {loading ? “Processing…” : `Pay ${planPrice}`}

      </Button>

    </form>

  );

};

const SandboxPayment = ({ planName, planPrice }: { planName: string; planPrice: string }) => {

  return (

    <Elements stripe={stripePromise}>

      <div className=”max-w-md mx-auto p-6 bg-[#04193b] rounded-2xl text-white”>

        <h3 className=”text-2xl font-bold mb-4″>Test Payment – {planName}</h3>

        <p className=”text-sm text-gray-300 mb-6″>

          This is a <strong>Stripe Sandbox</strong> checkout. Use the test card below:

          <br />

          <span className=”font-mono text-green-400″>4242 4242 4242 4242</span> (any future date, any CVC)

        </p>

        <CheckoutForm planName={planName} planPrice={planPrice} />

      </div>

    </Elements>

  );

};

export default SandboxPayment;

Step 4: Link from your Pricing section
In your existing Pricing component, change the button’s link:
Example:

<Link to={`/sandbox-payment?plan=${plan.name}&price=${plan.price}`}>

  <Button className=”w-full bg-[#508b00] hover:bg-[#6cb000] text-white”>

    {plan.price === “Custom” ? “Contact Sales” : “Test Payment”}

  </Button>

</Link>

Step 5: Add a route for the sandbox payment

In your App.tsx:

import SandboxPayment from “./pages/SandboxPayment”;

<Routes>

  <Route path=”/” element={<Index />} />

  <Route path=”/sandbox-payment” element={<SandboxPayment planName=”Starter” planPrice=”$499″ />} />

</Routes>

Test Card Details (Stripe Sandbox)

Use these values during testing:

• Card number: 4242 4242 4242 4242
• Expiry date: Any future date (e.g., 12/34)
• CVC: Any 3 digits

ZIP: Any 5 digits