阅读 343

PayPal支付总结

总结一下paypal支付功能 整个流程在前端完成

背景

公司要求在落地页上,添加商品下单功能,支持PayPal支付和通联支付,于是先搞起了贝宝 不BB上demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://www.paypal.com/sdk/js?client-id=sb"></script> -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Ensures optimal rendering on mobile devices. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Optimal Internet Explorer compatibility -->
    <script src="https://www.paypal.com/sdk/js?client-id=AeRq2qAvJG3KYKzfM0JhaRv2b2bmuuooHaaMz7oEJLollUZeSex0wBDcbTu9rbKeOsxpmtW8wq1-BsvM">
        // Required. Replace YOUR_CLIENT_ID with your sandbox client ID.
    </script>
    <script>
        paypal.Buttons({
            createOrder: function(data, actions) {
                console.log('createOrderData', data);
                console.log('createOrderactions', actions);
                // This function sets up the details of the transaction, including the amount and line item details.
                return actions.order.create({
                    purchase_units: [{
                        amount: {
                            value: '100' // 交易金额
                        }
                    }]
                });
            },
            onApprove: function(data, actions) {
                console.log('onApproveData', data);
                console.log('onApproveActions', actions);
                // This function captures the funds from the transaction.
                return actions.order.capture().then(function(details) {
                    console.log('交易成功', details);

                    // This function shows a transaction success message to your buyer.
                    alert('Transaction completed by ' + details.payer.name.given_name);
                });
            }
        }).render('#paypal-button-container');
        //This function displays Smart Payment Buttons on your web page.
    </script>

</head>

<body>
    <div id='paypal-button-container'></div>
    <script>
    </script>
</body>
复制代码

关键点

需要引入第三方的库 <script src="https://www.paypal.com/sdk/js?client-id=AeRq2qAvJG3KYKzfM0JhaRv2b2bmuuooHaaMz7oEJLollUZeSex0wBDcbTu9rbKeOsxpmtW8wq1-BsvM">

  • clientId 这个是收款方的id
  • createOrder 创建订单回调函数
  • onApprove 捕获交易回调函数,
  • actions.order.capture 回调里可以拿到details;到这一步就表示交易成功了
  • #paypal-button-container 容器Id

自己页面流程

引入第三方库,携带clientId,渲染到你要的容器里头 如下图

1626163741(1).jpg 样式都是它给的,我没做其他修改;这时候点击paypal按钮,就能吊起第三方界面,进行付款。

第三方界面付款流程

  • 这时候需要你填写买家的邮箱账号,我申请了一个沙盒账号(测试账号)进行测试

1626163969(1).jpg

  • @personal的是个人账号,也就是买家,@business就是收款方,也就是商家,后面我会介绍如何申请沙盒账号,和获取clientId
  • 这个就可以拿到账号进行登录, 然后填写一些信息(例如收获地址等)付款,金额是卖家设定好的,也就是代码里头的 value: '100' // 交易金额 结束付款流程

如何申请沙盒账号,和获取clientId

申请地址 www.paypal.com/signin?retu…

  • 在DASHBOARD菜单下,选择My Apps & Credentials。
  • 确保您位于 Sandbox 选项卡上以获取您在开发代码时将使用的 API 凭据。在测试之后和上线之前,切换到“实时”选项卡以获取实时凭据。
  • 在App Name列下,选择Default Application,PayPal 使用新的 Developer Dashboard 帐户创建该应用程序。如果您没有看到默认应用程序,请选择创建应用程序。
  • 这三个步骤是我贴过来的,写的很清楚
  • 创建好应用后,就能拿到clientId

获取卖家和买家的沙盒账号

  • 点击account

1626164687(1).jpg

  • view / edit account 就可以看到账户邮箱和密码
  • 获取到买家邮箱账户和密码,就可以进行付款
  • 整个流程结束

查看交易

  • www.sandbox.paypal.com/?_ga=1.2520…
  • 登录到上面这个链接,就可以查看买家或者卖家收付款信息了,账户和密码在上面有说怎么获取 view / edit account

that's all

文章分类
前端
文章标签