Next JS : 向 Stripe 发出 Post 请求，以便将多个商品添加到购物车答案

【问题标题】：Next JS : Make a Post Request to Stripe in Order to Add Multiple Items to CartNext JS : 向 Stripe 发出 Post 请求，以便将多个商品添加到购物车
【发布时间】：2021-11-27 07:32:42
【问题描述】：

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

【问题讨论】：

标签： javascript api post next.js stripe-payments

【解决方案1】：

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

您可以在每个项目上使用price_data 定义定价on the fly：

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

【讨论】：

非常感谢诺兰！不知道即时定价，将来肯定会派上用场:)

【解决方案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 将接受一个对象数组（在我的例子中，通过映射我的“购物车”状态变量生成）。

【讨论】：