乐趣区

PayPal-smart-payment-buttons

jiezi

简介

Smart Payment Buttons（智能支付按钮），是全球著名在线支付商 PayPal 提供的一项最新收款功能，其目的是尽可能多的消除结账中产生的摩擦（checkout friction），即：影响买家完成支付的不利因素。

其集成图如下

可以看到，Smart Payment Buttons已经将 paypal 和信用卡支付集成到了页面中，实际上是在 js 中做了封装，点击不同的支付类型，调用不同的支付。在付款时，浏览器会在当前结账页面弹出一个小窗口来引导用户完成支付，这样用户就无需离开当前的购物页面。和之前的付款方式相比，这应该也是一个改进。

付款流程

  1. You add the PayPal Smart Payment Buttons to your web page.
  2. Your buyer clicks the button.
  3. The button calls PayPal Orders API to set up a transaction.
  4. The button launches the PayPal Checkout experience.
  5. The buyer approves the payment.
  6. The button calls PayPal Orders API to finalize the transaction.
  7. You show a confirmation to your buyer.

整个付款过程都在 js 中调用完成

整合到代码中

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>

<body>
  <script
    src="https://www.paypal.com/sdk/js?client-id=SB_CLIENT_ID">
  </script>
</body>

注：SB_CLIENT_ID是自己在 PayPal 账户中创建 APP 时获取的client_id，默认sb。

js写入

<script>
  paypal.Buttons({
    // 创建 PayPal 订单
    createOrder: function(data, actions) {        
      return actions.order.create({
        purchase_units: [{
          amount: {value: '0.01'}
        }]
      });
    },
    // 用户授权并支付后调用
    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
        return fetch('/paypal-transaction-complete', {
          method: 'post',
          headers: {'content-type': 'application/json'},
          body: JSON.stringify({orderID: data.orderID})
        });
      });
    }
  }).render('#paypal-button-container');
</script>

时间关系，先保存，晚上继续补全

退出移动版