2019 最新版 Paypal 智能付款按钮（Smart Payment Buttons）
秦承安
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
<script src="https://www.paypal.com/sdk/js?client-id=client_id¤cy=EUR"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
/*
1. client_id 账号的客户端ID，需要自己注册。
2. currency 币种，默认是USD。
2. paypal.Buttons 参数以及使用。 https://developer.paypal.com/docs/checkout/integration-features/
3. 显示的按钮是根据一系列因素自动决定的，包括：买方国家，设备类型，买家选择查看的资金来源。
4. 要阻止某些按钮显示参考 https://developer.paypal.com/docs/checkout/reference/customize-sdk/#disable-funding
*/
let purchase_units_amount = {
currency_code: "EUR",
value: "8.00",
breakdown: {
item_total: {
value: "10.00",
currency_code: "EUR"
},
discount: {
value: "2.00",
currency_code: "EUR"
},
}
}
let purchase_units_item_list = [
{
name: "NeoPhone",
sku: "sku03",
unit_amount: {
value: "5.00",
currency_code: "EUR"
},
quantity: "1"
},
{
name: "Fitness Watch",
sku: "sku04",
unit_amount: {
value: "5.00",
currency_code: "EUR"
},
quantity: "1"
}
]
let purchase_units_shipping_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"
};
paypal.Buttons({
// 配置付款按钮 https://developer.paypal.com/docs/checkout/integration-features/customize-button/
style: {
layout: 'vertical', // 布局方式：vertical: 垂直，horizontal：水平，
color: 'gold',
shape: 'rect',
label: 'paypal'
},
//返回顾客在paypal上选择的地址，具体用法参考 https://developer.paypal.com/docs/checkout/integration-features/shipping-callback/
onShippingChange: (data, actions)=>{
console.log("onShippingChange", data, actions);
},
// 按钮第一次呈现时调用
onInit: ()=>{
console.log("onInit");
},
// 点击付款按钮时调用 通常用于表单验证
onClick: ()=>{
console.log("onClick");
return true;
},
createOrder: (data, actions)=>{
// 参考链接：https://developer.paypal.com/docs/api/orders/v2/#orders_patch
return actions.order.create({
purchase_units: [{
amount: purchase_units_amount,
shipping: {
address: purchase_units_shipping_address
},
items: purchase_units_item_list
}],
application_context: {
brand_name: "LilySilk",
shipping_preference: "SET_PROVIDED_ADDRESS", // GET_FROM_FILE / NO_SHIPPING / SET_PROVIDED_ADDRESS
user_action: "PAY_NOW"
}
});
},
onApprove: (data, actions)=>{
return actions.order.capture().then((details)=>{
console.log("capture", details);
});
},
onCancel: (data)=>{
console.log("onCancel", data);
},
onError: (err)=>{
// 参考资料：https://developer.paypal.com/docs/api/orders/v2/#orders_patch
console.log("onError", err);
}
}).render('#paypal-button-container');
</script>
</body>
类似资料：