Paypal快捷支付
申屠恺
官网文档:
申请自己的Paypal SandBox：
HTML页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Title</title>
<script src="https://www.paypal.com/sdk/js?currency=HKD&client-id=YOU_CLIENT_ID" ></script>
</head>
<body>
<div id="paypal-button-container"></div>
</body>
<script>
...
</script>
</html>快捷支付V1与V2版参数格式，js引入地址都是有区别的。
V1与V2区别
1. 引入js地址
V1：
<script src="https://www.paypalobjects.com/api/checkout.js"></script>V2：
<script src="https://www.paypal.com/sdk/js?currency=HKD&client-id=YOU_CLIENT_ID" ></script>V1中client_id与币种都是能直接在请求的json参数中设置，但是在V2版本中却只能再js的链接中设置。（不知道是不是我自己没弄明白的原因）
2. 请求json参数：
V1：
<script>
paypal.Button.render({
locale: 'zh_CN', // or en_US
env: 'sandbox', // or sandbox
commit: true, // Show a 'Pay Now' button
client: {
sandbox: 'AYYRdbFHaWbys--n7ykGaCqka4vmfPcOH5gVDWvjGF_78Xt3QccnPYlUgulbZqsBdYAR1WIk_6u1kGUh',
production: '***'
},
style: {
size: 'small',
color: 'silver',
shape: 'pill',
label: 'checkout',
tagline: false
},
payment: function (data, actions) {
return actions.payment.create({
payment: {
transactions: [
{
amount: {total: '20', currency: 'HKD'}
}
]
}
});
},
onAuthorize: function (data, actions) {
return actions.payment.execute().then(function (payment) {
console.log(payment);
$.ajax({
type: 'POST',
url: '/callback',
data: {params: payment}
}).done(function (data) {
if (data == '0') {
alert('The payment is complete!');
// window.location.reload();
} else {
alert('pay fail')
}
})
});
},
onCancel: function (data, actions) {
console.log(data);
console.log(actions);
alert('取消支付');
},
onError: function (err) {
console.log(err);
/*
* An error occurred during the transaction
*/
}
}, '#paypal-button-container');
</script>V2：
<script>
paypal.Buttons({
createOrder: function (data, actions) {
return actions.order.create({
purchase_units: [{
//invoice_id: 'TEST20190627', //自己的商品流水号，必须唯一
reference_id: '30',
amount: {
value: '40',
currency_code: "HKD",
breakdown: {
item_total: {
currency_code: 'HKD',
value: '40'
}
}
},
items: [
{
name: '测试商品',
unit_amount: {
currency_code: 'HKD',
value: '10'
},
quantity: '2',
sku: '编号：25',
category: 'DIGITAL_GOODS'
},
{
name: '测试商品2',
unit_amount: {
currency_code: 'HKD',
value: '10'
},
quantity: '2',
sku: '编号：26',
category: 'DIGITAL_GOODS'
}
]
}]
});
},
onApprove: function (data, actions) {
return actions.order.capture().then(function (details) {
alert('Transaction completed by ' + details.payer.name.given_name);
// Call your server to save the transaction
console.log(details);
console.log(data);
console.log(actions);
return fetch('/action', { // 填写自己的后台地址
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(details)
});
});
},
//
/*onShippingChange: function (data, actions) {
//限制某些地方不可购买，或者某些地方有折扣（具体可看官方文档）
return actions.reject();
},*/
onCancel: function (data) {
console.log("取消支付：");
console.log(data);
alert('取消支付');
}
}).render('#paypal-button-container');
</script>1) V2中的参数必须每个都设置currency_code否则会发起支付不成功
2) V2中多个商品必须设置breakdown属性
以上就是我的个人记录，也就是瞎写写，只能最简单的发起支付收到结果。如果有什么好的建议或者有什么问题也可以提出来大家一起讨论一下。
类似资料：