【从实作学习ASP.NET Core】Day26 | 前台 | PayPal 订单付款 (1)

接续昨天提到的 PayPal Checkout ，今天要试着把 PayPal 付款按钮加到页面上

PayPal 沙盒测试帐号

要连结这种第三方应用就会需要有测试帐号，注册并登入 PayPal Developer 官方网站
点选红框可以查询到之後会用到的测试ID

预设有给你两组测试帐号，测试用商业帐号和测试用个人帐号
点选View可以查到帐号密码

PayPal Checkout SDK

在前端引入 SDK ，把YOUR_CLIENT_ID换成上面查到的测试ID

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID"></script>

Client-Side Button

在你要显示按钮的位置上加入<div> 并用下面的 javascript 加以渲染

<div id="payment-button"></div>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({
        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '88.44'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                console.log('Capture result', orderData, 
                            JSON.stringify(orderData, null, 2));
            });
        }
    }).render('#payment-button');
</script>

测试一下就可以发现按钮和功能都能页面上运行了


仔细看应该有发现这时候 PayPal 上显示的订单还只是一笔88.44美元的测试订单
明天再来看看要如何把我们自己建立的订单内容绑定到 PayPal 上面