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

Question

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>

)
}

Answer 1

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

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

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

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

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

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

Paypal Integration with reactjs -node.js -Guidance on implementation

paypal

paypal-sandbox

node.js

reactjs