PayPal smart payment buttons

时间 2019-12-11

标签 paypal smart payment buttons 繁體版

原文原文链接

简介

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

其集成图以下
php

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

付款流程

整合Smart Payment Buttons到页面
用户点击支付按钮.
按钮调用 Orders API 建立交易
进入paypal支付页面
用户确认支付
集成的PayPal继续调用Orders API完成交易
显示支付成功信息

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

整合到代码中

<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({
    createOrder: function(data, actions) {
        // 建立交易
        return actions.order.create({
            intent: "CAPTURE",    // 
            application_context: {
                user_action: "CONTINUE",
                brand_name: "EXAMPLE INC",
                locale: "en-US",
                landing_page: "BILLING",
                shipping_preference: "SET_PROVIDED_ADDRESS"
            },
            purchase_units: [
                {
                    reference_id: "PUHF",
                    description: "Sporting Goods",
                    soft_descriptor: "HighFashions",
                    invoice_id: "1709111225",        // 订单号
                    custom_id: "CUST-HighFashions",
                    "amount": {
                        "currency_code": "USD",
                        "value": "230.00",             // 实际须要支付金额
                        "breakdown": {                 // 有此字段时必须有 items 字段
                          "item_total": {
                            "currency_code": "USD",
                            "value": "180.00"
                          },
                          "shipping": {
                            "currency_code": "USD",
                            "value": "30.00"
                          },
                          "handling": {
                            "currency_code": "USD",
                            "value": "10.00"
                          },
                          "tax_total": {
                            "currency_code": "USD",
                            "value": "20.00"
                          },
                          "shipping_discount": {
                            "currency_code": "USD",
                            "value": "10"
                          }
                        }
                      },
                      "items": [
                        {
                          "name": "T-Shirt",
                          "description": "Green XL",
                          "sku": "sku01",
                          "unit_amount": {
                            "currency_code": "USD",
                            "value": "90.00"
                          },
                          "tax": {
                            "currency_code": "USD",
                            "value": "10.00"
                          },
                          "quantity": "1",
                          "category": "PHYSICAL_GOODS"
                        },
                        {
                          "name": "Shoes",
                          "description": "Running, Size 10.5",
                          "sku": "sku02",
                          "unit_amount": {
                            "currency_code": "USD",
                            "value": "45.00"
                          },
                          "tax": {
                            "currency_code": "USD",
                            "value": "5.00"
                          },
                          "quantity": "2",
                          "category": "PHYSICAL_GOODS"
                        }
                    ],
                    shipping: {
                        name: {
                            full_name: "Zhiqiang Zhao"
                        },
                        address: {
                            address_line_1: "123 Townsend St",
                            address_line_2: "Floor 6",
                            admin_area_2: "San Francisco",
                            admin_area_1: "CA",
                            postal_code: "94107",
                            country_code: "US"
                        }
                    }
                }
            ]
        });
    },
    onApprove: function(data, actions) {
        // 获取交易详情
        return actions.order.capture().then(function(details) {
            // 请求应用服务器，并传递 orderID 
            return fetch('/checkout/execute-payment', {
                method: 'post',
                headers: {
                    'Content_type': 'application/json'
                },
                body: JSON.stringify({
                    orderID: data.orderID
                })
            }).then(function (res) {
                // 服务器验证成功后返回 200 状态码
                console.log('AAAAAAA', res);
                //{
                    // body: (...)
                    // bodyUsed: false
                    // headers: Headers {}
                    // ok: true
                    // redirected: false
                    // status: 200
                    // statusText: "OK"
                    // type: "basic"
                    // url: "http://front-em.com/checkout/execute-payment"
                // }
            });
        });
    },
    onCancel:function (data) {
        console.log(data);
        // todo 返回到个人未支付订单
    },
    onError: function (err) {
        console.log(err);
        // todo 展现错误页面
    }
}).render('#paypal-button-container');
</script>

最新的JS集成简化了许多，createOrder：建立订单，onApprove：用户受权并付款完成，onCancel：取消订单，onError：错误信息。
用户支付完成后，自动调用 onApprove中的actions.order.capture()方法，该方法会获取交易信息。
最后请求应用服务器，服务器经过前端传递的orderID获取订单详情，并处理咱们本身的逻辑。服务器

服务端

// execute.php
$orderID = json_decode($request->getContent(), true)['orderID'];
...

商家中设置及时通知（IPN）

商家登录地址
notify_url异步回调地址设置参考这里app

PayPal smart payment buttons

简介

付款流程

整合到代码中

js写入

服务端

商家中设置及时通知（IPN）

`js`写入