CODEWITHSUNDEEP
reactjsnext.jsstripe-payments
someone
someone

Reputation: 703

can't resolve stripe - import axios from axios NEXTJS

I am trying to create a checkout session but I get an error message and one line is highlighted in the log. I'm not sure why it's doing this because they are both installed and present in my package.json. Has something changed? The .env variables are being logged in the console. Any help would be greatly appreciated.

"Module not found: Can't resolve 'stripe'

1 | const stripe = require("stripe")(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); | ^"

http://localhost:3000/api/createStripeSession 500 (Internal Server Error)

import axios from axios

This is the code

const stripe = require("stripe")(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);

console.log(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY);


export default async  (req,res) =>  {
    const {item} = req.body;
  console.log(item);
    const transformedItem ={
    price_data: {
        currency: 'gbp',
        product_data: {
         images:   [item.image],
         name: item.name,
        },
        unit_amount: item.price * 100,
    },
    description: item.description,
    quantity: item.quantity,
}

const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
        transformedItem,
      ],
     
success_url: 'https://localhost:3000/Success',
  cancel_url: 'https://localhost:3000/Cancel',
metadata: {
    images: JSON.stringify(item.map((i)=> i.image)) ,
},
});
res.status(200).json({id: session.id})

};

The function

const createCheckOutSession = async () => {
    const stripe = await stripePromise;
    
    
    const checkoutSession = await axios.post('/api/createStripeSession', {
      item: item,
    });


    const result = await stripe.redirectToCheckout({
    sessionId: checkoutSession.data.id,
});
if (result.error) {
    alert(result.error.message);
}
};


const [item, setItem] = useState({
    name: "Apple AirPods",
    description: "Latest Apple AirPods.",
    image: "/searching.png",
    quantity: 0,
    price: 10,
  });

  const cartChange = (value) => {
    setItem({ ...item, quantity: Math.max(0, value) });
  };

package json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.24.0",
    "axios": "^0.26.1",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.2",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23"
  }
}

I hope this is clear, first time working with stripe in nextjs

Upvotes: 0

Views: 684

Answers (1)

Jonathan Steele
Jonathan Steele

Reputation: 1938

You need to install the stripe-node package, which facilitates server-side API requests (like creating a Checkout Session).

npm install stripe --save

Upvotes: 1

Related Questions