Next JS : 发出 Post 条带化请求，以便将多个项目添加到购物车

Question

NEXT JS：我试图将状态变量“cart”的内容放入对 STRIPE api 的 POST 请求的正文中。购物车的格式为 [{id: 1, amount: 1}, {id: , amount: }......]

我尝试将项目直接放入 api 处理程序 (list_items) 并且有效。但是我无法让我的“购物车”变量显示在那里，所以我想我必须将这些项目包含在 POST 请求本身中。已尝试将其获取到运行（包括那里的对象和 JSON.stringify 作为属性到“line_items” - 变量，但无济于事。也许有人可以帮助我？

API 处理程序：

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {

  if (req.method !== 'POST') {
    return res.send({
      error: 'Method need to be POST',
    });
  }
  const domainURL = 'http://localhost:3000';

  // const { quantity, mode, productKey } = req.body;

  const pmTypes = ['card'];
  const session = await stripe.checkout.sessions.create({
    payment_method_types: pmTypes,
    mode: 'payment',
    locale: 'en',
    line_items: the_variable????,

    success_url: `${domainURL}/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${domainURL}/cart`,
  });

  res.send({
    sessionId: session.id,
  });
}

POST 请求：

 const stripeLoader = loadStripe(props.pk);
  const redirectToCheckout = async () => {
    const stripeClient = await stripeLoader;

    const { sessionId } = await fetch('api/checkout_sessions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body : {????}
    }).then((res) => res.json());

    stripeClient.redirectToCheckout({ sessionId });
  };

Answer 1

您可以使用您喜欢的任何结构在您的客户端和后端之间进行通信，但是您向 Stripe 发出的创建会话的 API 请求必须符合预期的 line_items API 参数形状 (docs).

您可以为每件商品定义定价 on the fly 和 price_data：

const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
  });

或者您可以使用 predefined prices:

const session = await stripe.checkout.sessions.create({
  payment_method_types: ['card'],
  line_items: [{
    price: 'price_123',
    quantity: 1,
  },{
    price: 'price_456',
    quantity: 3,
  }],
  mode: 'payment',
  success_url: 'https://example.com/success?session_id={CHECKOUT_SESSION_ID}',
  cancel_url: 'https://example.com/cancel',
});

Answer 2

我想出了如何发出 POST 请求。正文必须如下所示：

body: JSON.stringify({
        lineItems: props.cart.map((singleItem) => {
          return {
            price: <the_stripe_price_key_for_the_given_product>,
            quantity: <the_amount>,
          };
        }),
      })

在 API 处理程序中包含以下行：const { lineItems } = req.body; 并设置 line_items: lineItems

因此，正如 Nolan 指出的那样，line_items 将接受一个对象数组（在我的例子中是通过 'cart' 状态变量的映射生成的）。

Next JS : 发出 Post 条带化请求，以便将多个项目添加到购物车

Next JS : Make a Post Request to Stripe in Order to Add Multiple Items to Cart

javascript

api

post

stripe-payments

next.js