PayPal smart payment buttons

0

简介

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

其集成图如下

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

付款流程

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

整个付款过程都在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({
    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异步回调地址设置参考这里

你可能感兴趣的

载入中...