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`寫入