背景： 收银台集成Vault Payment Method API保存付款方式而不创建付款交易，该功能将极大的缩短复购用户的paypal登录流程，提升复购用户的支付体验。
一、页面里引入paypal script
如果需要使用vaulting模式，需要在标签里埋入data-client-token属性，属性值就是中台返回的用户的client token，例如：
二、在代码里埋入paypal smart Bottun的占位元素
三、初始化 paypal smart button
paypal.Buttons({
onInit:function(data, actions){
// 初始化sdk的回调函数
},
onClick:function(){
//smart button按钮点击的回调函数，用于处理一下数据上报逻辑
}，
createOrder: function(data, actions) {
// 在paypal弹窗中执行支付操作后生单的回调
if(data.paymentSource == 'paypal'){
// paypal 类型的按钮可以实现vaulting功能，按一下逻辑执行向中台请求生单id返回给paypal
return fetch('/yourserver.com/createOrder', {
method: 'post',
body: JSON.stringify({
source: data.paymentSource, //paypal / payLater/ venmo / etc.
}),
}).then(function(res) {
return res.json();
}).then(function(orderData) {
return orderData.id;
});
}else{
// smart button模式执行以下逻辑：获取当前订单的金额amount传给paypal
return actions.order.create({
'purchase_units': [{
'amount': {
'value': amount
}
}]
});
}
},
onApprove: (data, actions) => {
// 用户在paypal生单授权支付成功的回调，请求中台接口，把paypal返回的tokenId等参数传给中台完成支付
return fetch('/yourserver.com/order/' + data.orderID + '/capture/', {
method: 'post'
});
},
onCancel(data, actions) {
// 在paypal 中取消支付的回调
console.log(`Order Canceled - ID: ${data.orderID}`);
},
onError(err) {
// 在paypal中支付失败的回调
console.error(err);
}
}).render('#paypal-button-container');
四、paypal vaulting 模式展示
一旦用户进行了绑定操作，下次购物就可以省去授权步骤直接支付成功，省时省力，体验更好；
但是出于安全考虑，如果用户更换了浏览器，就需要再次进行绑定
五、paypal vaulting的解绑
用户可以在paypal站点进行vaulting的解绑，解绑后paypal会通知中台，中台通过web hooks监听vault.payment-token.deleted事件，并解除用户的绑定状态，不再使用vaulting进行支付。
参考：
paypal smart button demo
JavaScript SDK script configuration
Save PayPal with the JavaScript SDK
Customize Pay Later messages
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
