未捕获的集成错误：无效的 stripe.redirectToCheckout 参数：items.0.price 不是可接受的参数答案

【问题标题】：Uncaught IntegrationError: Invalid stripe.redirectToCheckout parameter: items.0.price is not an accepted parameter未捕获的集成错误：无效的 stripe.redirectToCheckout 参数：items.0.price 不是可接受的参数
【发布时间】：2020-12-06 08:04:49
【问题描述】：

我的目标是使用 react 前端来设置使用节点的条带结帐。我使用 key 属性映射了 apiId 以遍历列表中的所有项目。但是控制台内有一个集成警告，我不知道为什么。我已将 js.stripe 脚本 src 添加到我的 html 文件中，所以我不明白为什么没有进行 API 调用。

 function checkout() {
        stripe.redirectToCheckout({
            items: items.map(item => ({
                quantity: item.quantity,
                price: item.apiId
            })),
            successUrl: "https://www.website.com/success",
            cancelUrl: "https://www.website.com/canceled",
        })
    }

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Image</th>
                        <th>Quanity</th>
                        <th>Price</th>
                    </tr>
                </thead>

                <tbody>
                    {items.map((item) => (
                        <tr key={item.apiId}>
                            <td>{item.name}</td>
                            <td>
                                <img
                                    src={`/images/${item.apiId}.jpg`}
                                    alt={item.name}
                                    width={180}
                                />
                            </td>
                            <td>{item.quantity}</td>
                            <td>{formatPrice(item.price)}</td>
                        </tr>
                    ))}
                    <tr>
                        <td style={{ textAlign: "right" }} colSpan={3}>
                            Total:
            </td>
                        <td>{formatPrice(totalPrice(items))}</td>
                    </tr>

                    <tr>
                        <td style={{ textAlign: "right" }} colSpan={4}>
                            <button onClick={checkout}>Complete checkout</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    )
}

【问题讨论】：

标签： node.js reactjs stripe-payments jsx

【解决方案1】：

items 字段仅接受 SKU/计划数组和数量。如果你正在使用价格，你想使用lineItems：https://stripe.com/docs/js/checkout/redirect_to_checkout#stripe_checkout_redirect_to_checkout-options-lineItems

【讨论】：

我想使用 jsx 文件将条带结帐集成到反应中。如果我使用这种方法，我将不得不对数组中的每个项目进行硬编码，而不是使用 {key} 标记来映射数组的项目。
不知道你为什么这么认为。您只需将重定向代码更改为 lineItems: items.map(item => { ...，它应该可以按预期工作。