简介
Smart Payment Buttons（智能支付按钮），是全球著名在线支付商PayPal提供的一项最新收款功能，其目的是尽可能多的消除结账中产生的摩擦（checkout friction），即：影响买家完成支付的不利因素。
其集成图如下
可以看到，Smart Payment Buttons已经将paypal和信用卡支付集成到了页面中，实际上是在js中做了封装，点击不同的支付类型，调用不同的支付。在付款时，浏览器会在当前结账页面弹出一个小窗口来引导用户完成支付，这样用户就无需离开当前的购物页面。和之前的付款方式相比，这应该也是一个改进。
付款流程
- 整合
Smart Payment Buttons到页面 - 用户点击支付按钮.
- 按钮调用
Orders API创建交易 - 进入
paypal支付页面 - 用户确认支付
- 集成的PayPal继续调用
Orders API完成交易 - 显示支付成功信息
整个付款过程都在js中调用完成
整合到代码中
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<script
src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
</script>
</body>注：SB_CLIENT_ID是自己在PayPal账户中创建APP时获取的client_id，默认sb。
js写入
<script>
paypal.Buttons({
createOrder: function(data, actions) {
// 创建交易
return actions.order.create({
intent: "CAPTURE", //
application_context: {
user_action: "CONTINUE",
brand_name: "EXAMPLE INC",
locale: "en-US",
landing_page: "BILLING",
shipping_preference: "SET_PROVIDED_ADDRESS"
},
purchase_units: [
{
reference_id: "PUHF",
description: "Sporting Goods",
soft_descriptor: "HighFashions",
invoice_id: "1709111225", // 订单号
custom_id: "CUST-HighFashions",
"amount": {
"currency_code": "USD",
"value": "230.00", // 实际需要支付金额
"breakdown": { // 有此字段时必须有 items 字段
"item_total": {
"currency_code": "USD",
"value": "180.00"
},
"shipping": {
"currency_code": "USD",
"value": "30.00"
},
"handling": {
"currency_code": "USD",
"value": "10.00"
},
"tax_total": {
"currency_code": "USD",
"value": "20.00"
},
"shipping_discount": {
"currency_code": "USD",
"value": "10"
}
}
},
"items": [
{
"name": "T-Shirt",
"description": "Green XL",
"sku": "sku01",
"unit_amount": {
"currency_code": "USD",
"value": "90.00"
},
"tax": {
"currency_code": "USD",
"value": "10.00"
},
"quantity": "1",
"category": "PHYSICAL_GOODS"
},
{
"name": "Shoes",
"description": "Running, Size 10.5",
"sku": "sku02",
"unit_amount": {
"currency_code": "USD",
"value": "45.00"
},
"tax": {
"currency_code": "USD",
"value": "5.00"
},
"quantity": "2",
"category": "PHYSICAL_GOODS"
}
],
shipping: {
name: {
full_name: "Zhiqiang Zhao"
},
address: {
address_line_1: "123 Townsend St",
address_line_2: "Floor 6",
admin_area_2: "San Francisco",
admin_area_1: "CA",
postal_code: "94107",
country_code: "US"
}
}
}
]
});
},
onApprove: function(data, actions) {
// 获取交易详情
return actions.order.capture().then(function(details) {
// 请求应用服务器，并传递 orderID
return fetch('/checkout/execute-payment', {
method: 'post',
headers: {
'Content_type': 'application/json'
},
body: JSON.stringify({
orderID: data.orderID
})
}).then(function (res) {
// 服务器验证成功后返回 200 状态码
console.log('AAAAAAA', res);
//{
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: true
// redirected: false
// status: 200
// statusText: "OK"
// type: "basic"
// url: "http://front-em.com/checkout/execute-payment"
// }
});
});
},
onCancel:function (data) {
console.log(data);
// todo 返回到我的未支付订单
},
onError: function (err) {
console.log(err);
// todo 展示错误页面
}
}).render('#paypal-button-container');
</script>最新的JS集成简化了许多，createOrder：创建订单，onApprove：用户授权并付款完成，onCancel：取消订单，onError：错误信息。
用户支付完成后，自动调用 onApprove中的actions.order.capture()方法，该方法会获取交易信息。
最后请求应用服务器，服务器通过前端传递的orderID获取订单详情，并处理我们自己的逻辑。
服务端
// execute.php
$orderID = json_decode($request->getContent(), true)['orderID'];
...通知
支付完成后，PayPal 有三种通知方式：
- IPN(即时通知)
- Webhooks
- PDT
这里只介绍 IPN 和 Webhooks 这两种。
IPN
IPN 通知方式需要在商家后台填写异步通知地址
商家登陆地址notify_url异步回调地址设置参考这里
Webhooks
文档介绍
添加 Webhook 的步骤：
- 登录到
Developer Dasbhoard。 - 创建一个
沙盒 APP来生成API凭证并订阅webhook事件。如果已有APP，请继续执行下一步。 - 点击
沙盒 APP，进入APP中。 - 在
Webhook部分，单击添加Webhook。 - 填写需要接收异步通知的
URL，这个URL必须是https为开头的且可以正常访问的地址 - 点击保存。仪表板显示您的
Webhook侦听器URL、Webhook的ID以及您订阅应用程序的事件。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。