Stripe - Payment Integration in ReactJS/NextJS project

1. Installations

npm i stripe
npm i @stripe/stripe-js

//get pk and sk keys from stripe developers dashboard and put them in .env.local

2. When user Click on Pay Now Button then -:

   - Create PriceId

   - If PriceId successfully created then createPayment method this will give us a sessionId

   - From this session we redirect to stripe checkOut page

   - When payment sucessfull we got status=success in url passed during createPayment

   - Now extract that url in useEffect and check if its is success then update that user in database as premiumUser:true also update thier purcahsed item details , membership type , memberShipStartDate , memberShipEndDate etc etc

3. Create PriceID

<Button onClick={()=>handlePayment(plan)}>Get Premium</Button> // In plan we pass our item details like amount , no of items etc

//price id action(controller)
const stripe = require('stripe')(process.env.STRIPE_SK_KEY) 
export async function createPriceIdAction(data){
    const session = await stripe.prices.create({
        currency:"inr",
        unit_amount:data?.amount * 100,
        recurring:{
            interval:"year"
        },
        product_data:{
            name:"Premium Plan",
        },
    });
    return { 
        success:true,
        id:session?.id // return id
    }
}

4. Create Payment Method

//(controller)
export async function createStripePaymentAction(data){
    const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        line_items:data?.lineItems,
        mode:"subscription",
        success_url:"http://localhost:3000/membership" + "?status=success", // pass success url 
        cancel_url:"http://localhost:3000/membership" + "?status=cancel",
    });
    return{
        success:true,
        id:session?.id
    }
}

5. Call Above Methods from Frontend - handlePaymentMethod

    // see this method    
    const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK_KEY) // npm i @stripe/stripe-js
        async function handlePayment(currentPlan){
            const stripe = await stripePromise
    // Step 1: Create price id
            const extractPriceID = await createPriceIdAction({
                amount:Number(currentPlan?.price)
            });
   
    // Step 2: Create payment id from priceid
            if(extractPriceID){
                sessionStorage.setItem("currentPlan", JSON.stringify(currentPlan))
                const payment = await createStripePaymentAction({
                    lineItems:[
                        {
                            price:extractPriceID?.id,
                            quantity:1
                        }
                    ]
                });
   
    //Step 3: Open stripe checkout page from paymentid
                await stripe.redirectToCheckout({
                    sessionId:payment?.id
                });
            }
   
        }
   

6. After Payment Complete

 //Step 4 : Check Payment sucess or not
  const pathName = useSearchParams()
    useEffect(()=>{
        if(pathName.get("status")==="success") updateProfile();
    },[pathName])

//Step 5: Update that user in Database
   async function updateProfile(){
        const currentPlan = JSON.parse(sessionStorage.getItem("currentPlan"));
        const data={
            ... profileInfo,
            isPremiumUser:true,
            memberShipType:currentPlan?.type,
            memberShipStartDate:new Date().toString(),//Tue Jul 15 2025 11:51:34 GMT+0530 (India Standard Time)
            memberShipEndDate:new Date(
                (new Date().getFullYear() + (
                    currentPlan?.type === 'basic' ? 1 : currentPlan?.type === 'teams' ? 2 : 5
                )),
                new Date().getMonth(),
                new Date().getDate()
            ), //Wed Jul 15 2026 00:00:00 GMT+0530 (India Standard Time)
            id:profileInfo?._id,   
        }
        const response = await updateUserProfile(data , '/membership')
        console.log(profileInfo)
    }

Tip: After that update UI on the basis of premiumUser:true