Paypal 与 reactjs -node.js 集成 - 实施指南

Posted 2023-02-22

【中文标题】Paypal 与 reactjs -node.js 集成 - 实施指南

【英文标题】：Paypal Integration with reactjs -node.js -Guidance on implementation

【发布时间】：2020-09-19 09:46:28

【问题描述】：

PayPal 使用智能支付按钮：

如何使用 Paypal 中的智能支付按钮？当我渲染按钮时出现错误，这是我想在这里使用的脚本：

https://developer.paypal.com/demo/checkout/#/pattern/client

我正在使用 useEffect 加载脚本：

useEffect(() => 
    const script = document.createElement('script');

    script.src = "https://www.paypal.com/sdk/js?client-id=AZOEGr_kwtZWZ2_Hy46cHBs1pYR_Ly68zMWymBQX88AlUM70HifIuAbwaUW_92BXhCxAozxqFDBLU5wj&currency=USD";
    script.async = true;

    document.body.appendChild(script);

    return () => 
      document.body.removeChild(script);
    
  , []);

之后，我在卡中呈现注册摘要，我想在其中呈现此 Paypal 智能按钮

<Card className=classes.card>
        <CardContent style=textAlign:"center">
            .....
            //registration details
            .....
        </CardContent>
        <CardActions style=justifyContent:"center" >
            renderPaypal
         // renderPaypal invokes the function to render the button
        </CardActions>

    </Card>

这是我渲染按钮的函数：

   const renderPaypal=()=>
    return (
        <script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons(

        // Set up the transaction
        createOrder: function(data, actions) 
            return fetch('/demo/checkout/api/paypal/order/create/', 
                method: 'post'
            ).then(function(res) 
                return res.json();
            ).then(function(data) 
                return data.orderID;
            );
        ,

        // Finalize the transaction
        onApprove: function(data, actions) 
            return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', 
                method: 'post'
            ).then(function(res) 
                return res.json();
            ).then(function(details) 
                // Show a success message to the buyer
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            );
        


    ).render('#paypal-button-container');
</script>

)

【参考方案1】：

这里有指南：https://developer.paypal.com/docs/checkout/reference/server-integration/#

但是如果你想使用示例目录中的代码，捕获意图有这个：https://github.com/paypal/Checkout-NodeJS-SDK/tree/develop/samples/CaptureIntentExamples

对于您的前端网页代码，这是最好的：https://developer.paypal.com/demo/checkout/#/pattern/server

对于退款，在捕获意图示例中，有一个使用 captureId 调用退款方法的示例：https://github.com/paypal/Checkout-NodeJS-SDK/blob/2476cd9c0ed7fdda5402bc7a2094522e6d719f5d/samples/CaptureIntentExamples/runAll.js

所以看起来足以弄清楚如何使用它

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。