无法解析条带 - 从 axios NEXTJS 导入 axios

Question

我正在尝试创建结帐会话，但我收到一条错误消息，并且日志中突出显示了一行。我不确定为什么要这样做，因为它们都已安装并出现在我的 package.json 中。有什么改变吗？ .env 变量被记录在控制台中。任何帮助将不胜感激。

“未找到模块：无法解析 'stripe'

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

http://localhost:3000/api/createStripeSession 500（内部服务器错误）

import axios from axios

这是代码

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})

};

函数

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) });
  };

套餐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"
  }
}

我希望这是清楚的，第一次在 nextjs 中使用 stripe

Answer 1

您需要安装 stripe-node package，这有助于 server-side API 请求（例如创建结帐会话）。

npm install stripe --save

无法解析条带 - 从 axios NEXTJS 导入 axios

can't resolve stripe - import axios from axios NEXTJS

stripe-payments

reactjs

next.js