乐趣区

关于javascript:JS接入PAYPAL-Smart-Button-Vaulting

jiezi

背景：收银台集成 Vault Payment Method API 保留付款形式而不创立付款交易，该性能将极大的缩短复购用户的 paypal 登录流程，晋升复购用户的领取体验。

一、页面里引入 paypal script
<script src="https://www.paypal.com/sdk/js?client-id={{YOUR_CLIENT_ID}}&components=buttons&currency=USD"></script>

如果须要应用 vaulting 模式，须要在标签里埋入 data-client-token 属性，属性值就是中台返回的用户的 client token，例如：

<script src="https://www.paypal.com/sdk/js?client-id={{YOUR_CLIENT_ID}}&components=buttons&currency=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

退出移动版