我在 React 中有一个项目,我想将数组的每个项目放入 Paypal 订单函数中。 下面是文件。我怎样才能做到这一点?
export default function Cart(): JSX.Element {
const [cart, setCart] = useState<Cart>([]);
return <>
<ShoppingCart onChange={setCart} cart={cart} />
<PayPalScriptProvider options={{
"client-id": process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID || "",
currency: Currency.EURO
}}>
<PayPalButtons style={{ layout: "horizontal" }}
createOrder={(_data, actions) => {
// TODO: Make this object be build with cart items including every single item
return actions.order.create({
purchase_units: [
{
amount: {
currency_code: Currency.EURO,
value: "1.99",
},}, ], }); }}
onApprove={onApprove}
/>
</PayPalScriptProvider>
</>
}
我试图将每个项目映射到一个数组中,然后像这样将其放入 creatyOrder 函数中
<>
<PayPalButtons style={{layout: "horizontal"}}
createOrder={(_data, actions) => {
const items = cart.map((item) => ({
name: item.name,
quantity: item.quantity.toString(),
unit_amount: {
currency_code: Currency.EURO,
value: item.price.toFixed(2).toString()
},
}));
return actions.order.create({
purchase_units: [
{
items: items,
amount: {
currency_code: Currency.EURO,
value: cart.reduce((total, item) => total + item.price * item.quantity, 0).toFixed(2).toString(),
breakdown: {
item_total: {
currency_code: Currency.EURO,
value: "4.98"
} } },}, ], }); }}
onApprove={onApprove}
/>
</PayPalScriptProvider>
</>```
But unfortunatly the order windows closes immediately after pressing the button and i cat this error in the console.
[enter image description here](https://i.stack.imgur.com/CEwgK.png)
I really dont know whats the problem here. Does anyone know what the error means or how i can solve this?
Paypal seems to be a bit special when it comes to make own Requests.
actions.order.create 和 actions.order.capture 已弃用,不应在任何新集成中使用。特定于 React 的文档可能尚未更新以反映这一点,但您可以在 standard integration guide 的 JS/node 示例中看到这些功能不再使用(并且永远不应该使用)。
相反,使用 v2/checkout/orders API 仅从后端/服务器创建和捕获 PayPal 订单。
我不知道前端部分使用 React 的当前示例(编辑:啊 this 集成构建器 中的新示例可能),但是 here 你可以找到一个强大的 Typescript 示例(纯 JS 前端)您可以与现有的 React 代码集成/配对(据我所知,它使用官方的@paypal/react-paypal-js)