基本流程
- 注册账号
- 创建开发者沙箱应用,获得沙箱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
1、按JS SDK文档地址说明:https://developer.paypal.com/sdk/js/reference/ 引入JS资源。
2、在页面中定义一个容器用于渲染按钮。
<div id="paypal-button-container"></div>
<!-- 引入 PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=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