PayPal smart payment buttons

2019-05-18 admin

简介

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>

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

[转载]原文链接:https://segmentfault.com/a/1190000019219136

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65223.html

文章标题:PayPal smart payment buttons

回到顶部