官方教程：
PayPal Express Checkout
根据官方教程整理了一下具体步骤。
模板：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button"></div>
<script>
paypal.Button.render({
locale: 'zh_CN',
env: 'production',
commit: true,
client: {
sandbox: '***',
production: '***'
},
style: {
size: 'small',
color: 'silver',
shape: 'pill',
label: 'checkout',
tagline: false
},
payment: function(data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '填入金额', currency: 'USD' }
}
]
}
});
},
onAuthorize: function(data, actions) {
return actions.payment.execute().then(function(payment) {
$.ajax({
type: 'POST',
url: '/',
data: {}
}).done(function (data) {
if (data == '0') {
alert('The payment is complete!');
window.location.reload();
}else {
alert('pay fail')
}
})
});
},
onCancel: function(data, actions) {
},
onError: function(err) {
}
}, '#paypal-button');
</script>
</body>
|
1. 必须 js
1
| <script src="https://www.paypalobjects.com/api/checkout.js"></script>
|
2. 支付按钮
<div id="paypal-button"></div>，paypal.Button.render绑定对应的id(也可以是class)。
3. render 参数
1)env： 运行环境
有两种：
| 类型 |
说明 |
| sandbox |
沙盒，用于测试，用添加的sandbox账号测试能否交易成功 |
| production |
生产环境，部署上线时使用的环境 |
2)locale： 语言版本
配套有多国语言，中文选用 zh_CN，美式英文选用 en_US
3）client： 客户端id
获取方式：登录 -> Applications -> 选择 REST API apps -> create App
创建成功后，可以从创建的应用获取Sandbox 和 Live 的 client ID，填入
1
2
3
4
| client: {
sandbox: '',
production: ''
},
|
4)style： 定义支付按钮样式，参考 Customize Checkout Button
5)触发函数：
| 函数 |
说明 |
| payment |
点击支付时触发，total填入需要支付的金额，currency填入支付的货币类型 |
| onAuthorize |
支付成功时触发，当支付成功时可以用Ajax提交数据修改订单支付状态为已支付。 |
| onCancel |
当用户关闭支付页面时触发 |
| onError |
当支付出错时触发 |
4. 创建沙盒账号用于测试
Sandbox accounts
创建两个账号，BUSSINESS 以及 PERSONAL。
创建完成后登录沙盒账号测试是否登录成功（红线按钮登录）
5. 使用sandbox 账号测试支付
当env环境为sandbox时，点击支付按钮时，使用PERSONAL账号来登录支付（测试账号默认有余额 $9999），当支付成功时会调用函数onAuthorize,可以弹窗alert('pay success')来测试是否支付成功。若成功，上线时将env转为production环境即可。
