1.Paypal前端Html代码
注意:client 需要填写自己的信息,否则无法使用
<!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" style="margin-top:100px;"></div>
<script>
paypal.Button.render({
locale: 'zh_CN',
env: 'sandbox',
commit: true,
client: {
sandbox: 'YOUR CLIENT',
production: 'YOUR CLIENT'
},
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) {
console.log(data);
return actions.payment.execute().then(function(payment) {
$.ajax({
type: 'POST',
url: '/',
data: {}
}).done(function (data) {
if (data == '0') {
alert('支付完成!');
window.location.reload();
}else {
alert('支付失败')
}
})
});
},
onCancel: function(data, actions) {
// 买家取消了支付触发
// TODO
},
onError: function(err) {
// 当交易发生错误时触发
// TODO
}
}, '#paypal-button');
</script>
</body>
2.配置支付按钮
<div id="paypal-button"></div> //paypal.Button.render绑定对应的id
3.Render参数
3.1 Env:运行环境
类型 |
说明 |
sandbox |
沙盒,用于测试,用添加的sandbox账号测试能否交易成功 |
production |
生产环境,部署上线时使用的环境 |
3.2 Locale:语言版本
类型 |
说明 |
zh_CN |
中文 |
en_US |
美式英文 |
3.3 Client:收款方id
1. 登陆
2.点击 Applications
3.选择 REST API apps
4.点击 create App
创建成功后即可获取Sandbox以及Live的Client ID
4.样式
自定义支付按钮的样式,参考:Customize Checkout Button
5.触发函数
函数 |
说明 |
payment |
点击支付时触发,total填入需要支付的金额,currency填入支付的货币类型 |
onAuthorize |
支付成功时触发,当支付成功时可以用Ajax提交数据修改订单支付状态为已支付。 |
onCancel |
当用户关闭支付页面时触发 |
onError |
当支付出错时触发 |
6.支付截图
(6.1)支付按钮
(6.2)选择支付方式
(6.3)确认支付信息
还有不清楚的地方请留言哦