PayPal H5方案接入 服务端下单，无跳转

PayPal

基本流程

  • 注册账号
  • 创建开发者沙箱应用，获得沙箱clientID和Secret
  • 接入API
  • 创建沙箱测试用户调试付款
  • 完成接入

正文

写在开始

因为公司的业务是H5平台的，所以这里只介绍H5方案的接入说明。PayPal提供了丰富的和支付相关的能力，但是我公司的业务仅仅需要普通的一次性消耗付款，所以其它如订阅等功能我也没去了解，就不介绍了。还有注册账号的基本操作这里也不讲了，在PayPal官网按步骤操作即可。我们从创建开发者应用讲起。

创建开发者沙箱应用

点击 https://developer.paypal.com/打开PayPal开发者中心，国内环境打开稍微有点满，耐心等待一下。打开后登陆注册好的账号，进入 开发者后台，在【My apps & credentials】页面中选择 sandbox 选项卡创建一个沙箱应用，创建好后可以获得clientID和Secret。记录下这两个值，我们后面要用到。

最后可以给这个应用可以设置webhook，即触发某个事件（如完成付款）后，PayPal服务器通过此地址通知你。

接入API

因为我是H5平台接入，所有有两种方案可以选择，一种是REST API，一种是Javascript SDK方案。

REST API方案：从服务端向PayPal服务器下单，下单完成后PayPal返回订单ID和支付链接，将支付链接传递给前端用户，用户跳转到PayPal的支付链接付款完成后，会通过跳转回你下单时设置的目的地址，如果你有在PayPal后台设置对应事件的webhook的话，PayPal服务器也会通知你用户已付款。然后你再去PayPal服务器确认订单，确认完成后即完成了整个流程。

Javascript SDK方案：前端页面加载PayPal JS资源，渲染支付按钮，用户点击按钮PayPal SDK自动下单并打开支付页面，用户支付完成后前端返回支付结果，如果你有在PayPal后台设置对应事件的webhook的话，PayPal服务器也会通知你用户已付款。然后你再去PayPal服务器确认订单，确认完成后即完成了整个流程。

这两种方案各有优缺点。REST API方案会跳出你的页面，支付完成再回来只能重新打开你的页面。Javascript SDK方案下单是由前端完成的，服务端都不知道前端什么时候下单的，上来就被我否定了-_-。不过最终找到了一个结合REST API和 Javascript SDK 的第三种方案，既不用跳出页面，也可以由服务端下单。PayPal示例地址:https://developer.paypal.com/demo/checkout/#/pattern/server

下面就说明第三种方案的具体接入要点。

前端页面加载 Javascript SDK

<div id="paypal-button-container"></div>
    <!-- 引入 PayPal JavaScript SDK -->
    <script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD"></script>

    <script>
        // 渲染PayPal按钮到容器#paypal-button-container
        paypal.Buttons({
            // 请求你的服务器下单
            // 注意此处和JS SDK文档处写的由actions.order.create下单不同
            // 这里请求你服务端的接口，由你服务器下单并返回一个PayPal的订单ID
            createOrder: function(data, actions) {
                return fetch('/demo/checkout/api/paypal/order/create/', {
                    method: 'post'
                }).then(function(res) {
                    return res.json();
                }).then(function(orderData) {
                    return orderData.id;
                });
            },

            // 告知你的服务器付款结果
            // 你的服务器通过PayPal返回订单ID,请求Capture payment for order确认订单
            // 如果PayPal返回INSTRUMENT_DECLINED错误，前端可以通过actions.restart()重启付款流程
            onApprove: function(data, actions) {
                return fetch('/demo/checkout/api/paypal/order/' + data.orderID + '/capture/', {
                    method: 'post'
                }).then(function(res) {
                    return res.json();
                }).then(function(orderData) {
                    var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
                    if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
                        return actions.restart(); // 重启付款流程,如果你需要的话
                    }
                    // 继续处理付款完成逻辑
                    // ...
                });
            }

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

服务端接入下单接口

服务端请求下单接口。

请求Header中需要设置 Content-Type: application/json 和 Authorization，Authorization可以使用 Bearer Access-Token or Basic client_id:secret 两种方式。使用Bearer Access-Token方式的话需要通过授权接口先获得Access-Token。如果使用 Basic client_id:secret 方式的话直接 Basic Base64Encode(client_id:secret) 即可。

请求参数中需要设置币种和金额，如果是单纯的使用REST API方案的话，还需要再application_context中设置一个return_url。CURL示例如下：

    curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer Access-Token" \
    -d '{
    "intent": "CAPTURE",
    "purchase_units": [
        {
        "amount": {
            "currency_code": "USD",
            "value": "100.00"
        }
        }
    ],
    "application_context": {
        "return_url": "",
        "cancel_url": ""
    }
    }'

下单完成后，会返回PayPal的订单ID，和PayPal的支付链接（approve url）。将PayPal订单ID返回给前端JS SDK，PayPal会自动打开一个页面让用户付款，付款完SDK会通知你用户付款完成。如果再PayPal后台有配置付费事件（Checkout order approved）的webhook的话，PayPal服务器也会通过webhook通知你用户已付款。

   {
   "id": "5O190127TN364715T",
   "status": "CREATED",
   "links": [
       {
       "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
       "rel": "self",
       "method": "GET"
       },
       {
       "href": "https://www.paypal.com/checkoutnow?token=5O190127TN364715T",
       "rel": "approve",
       "method": "GET"
       },
       {
       "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T",
       "rel": "update",
       "method": "PATCH"
       },
       {
       "href": "https://api-m.paypal.com/v2/checkout/orders/5O190127TN364715T/capture",
       "rel": "capture",
       "method": "POST"
       }
   ]
   }

此时订单处于APPROVED状态，需要你请求Capture payment for order接口去确认订单。CURL示例如下：

    curl -v -X POST https://api-m.sandbox.paypal.com/v2/checkout/orders/5O190127TN364715T/capture \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer Access-Token" \

如果确认完成，PayPal会响应订单状态为COMPLETED，此状态表示订单已经完成了。

创建沙箱付款账号

打开开发者后台，进入沙箱账号列表：https://developer.paypal.com/developer/accounts，点击Create account按钮创建沙箱付款账号，创建完成后点击账号列表后的View/edit account按钮查看账号邮箱和密码。使用此账号即可在沙箱环境中完成付款。

其它-查询PayPal订单详情

服务端请求查询订单详情接口，按文档接入即可。

完成接入

在开发者后台，应用列表页面选择Live选项卡，创建正式应用，获得正式clientID和Secret，替换沙箱密钥，并将沙箱接口替换成功正式接口即可。

如果需要服务端接收事件，也需要给正式应用配置对应的webhook。

沙箱接口地址： https://api-m.sandbox.paypal.com

正式接口地址： https://api-m.paypal.com

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容