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 (

      

    );

  }

 return (

    

      

      

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

      

    

  );

};

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

  return (

    

      

    

  );

};

export default SandboxPayment;

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

  

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

  

Step 5: Add a route for the sandbox payment

In your App.tsx:

import SandboxPayment from “./pages/SandboxPayment”;

  } />

  } />

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