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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容