背景: 收银台集成Vault Payment Method API保留付款形式而不创立付款交易,该性能将极大的缩短复购用户的paypal登录流程,晋升复购用户的领取体验。
一、页面里引入paypal script
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR_CLIENT_ID}}&components=buttons¤cy=USD"></script>
如果须要应用vaulting模式,须要在标签里埋入data-client-token属性,属性值就是中台返回的用户的client token,例如:
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR_CLIENT_ID}}&components=buttons¤cy=USD" data-client-token="{{YOUR-CLIENT-TOKEN}}"></script>
二、在代码里埋入paypal smart Bottun的占位元素
<div id="paypal-button-container"></div>
三、初始化 paypal smart button
<script> 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');</script>
四、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