简介

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>

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