小程序完整對接 pingpp支付

小程序完整對接 pingpp支付

有幾個先要條件：

1. 小程序須要企業認證且開通支付功能，我的認證是沒法使用支付功能的（小程序微信支付官網）
2. pingpp 自己接入的企業服務器（即商戶服務器）並不強制要求 https，可是小程序是，因此也要一塊兒強制要求全程 https
3. pingpp 有一個帳戶，而且裏面的配置渠道參數
4. pingpp 已經配置好服務端,具體參考 pingpp 開發文檔，再也不詳述（https://www.pingxx.com/docs/server）

備註：pingpp，ping plus plus 簡稱 ping++

1、準備好 pingpp

大體的配置內容以下：

• 根據圖瞭解 pingpp 的支付流程，這是其中支付的內容（還有其餘支付或者退款流程，可是不作詳述，由於懂了一個就能夠一理通百里明）

通常的 pingpp 支付請求處理是根據上圖所示：

1. 用戶在客戶端選擇商品並提交訂單，客戶端須要向你的服務端傳遞支付要素。注意：Ping++ SDK 不涉及你的客戶端和你的服務端之間的數據交互，此處請你自定義通訊方式。
2. 服務端接收到客戶端請求參數，並調用 Server-SDK封裝的建立支付 Charge 的方法請求 Ping++ 。
3. Ping++ 響應你的服務端請求，返回 Charge (支付憑據)給你的服務端。
4. 你的服務端響應你的客戶端請求，須要將該 Charge 對象完整的返回給你的客戶端，注意：這裏的 Charge 返回類型必須是 JSON 格式。
5. 客戶端拿到支付憑據 Charge 對象後，須要調用 Client-SDK 封裝的方法調起支付控件，用戶輸入密碼完成支付。
6. 第三方支付渠道會直接在客戶端返回支付結果，此處不要使用客戶端的成功結果更新訂單的最終狀態。
7. 在 Ping++ 管理平臺配置 Webhooks 的 charge.succeeded 事件。支付完成時，Ping++ 會主動以 POST 方式向你配置在管理平臺上的 Webhooks 通知地址發送支付結果，建議訂單狀態的更新對比客戶端的渠道同步回調信息和服務端的 Ping++ Webhooks 通知來肯定是否修改。
8. 同時，建議在處理邏輯中添加主動查詢機制：若是在可接受的時間範圍內沒有收到 Webhooks 通知，你也能夠調用 Server-SDK 封裝的查詢方法，主動向 Ping++ 發起請求來得到訂單狀態，該查詢結果能夠做爲交易結果。

參考：https://www.pingxx.com/docs/overview/transaction/charge?transaction=true

• 其中在商戶服務器發起支付請求到 ping++服務器的時候，就須要有這個支付渠道，配置好支持小程序的支付渠道便可。

2、server端接入

這裏是 pingpp 幫咱們封裝好了微信小程序的支付流程，只須要傳入wx_app_id公衆號惟一標示和受權後跳轉的地址就能夠了，正常的流程並非這麼簡單，具體能夠參考微信公衆號的支付開發文檔： https://pay.weixin.qq.com/wiki/doc/api/index.html

小程序的 pingpp 調用支付流程是：

• 第1、小程序是有本身的 API 能夠在客戶端直接獲取 code（這個 code 是小程序調用接口的登陸憑證，參考：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html）

wx.login({ // 這個接口能夠在打開小程序的時候調用，而後保存code用來後續使用
  success: function(res) {
    if(res.code){ // 獲取到 code
      console.log('code = ' + res.code);
    }else{
     console.log('獲取用戶登陸態失敗！' + res.errMsg);
    }
  }
});

這裏能夠參看官方小程序登陸流程圖

• 第2、獲得 code 以後 以 GET的方式（使用 wx.request），請求你本身的服務端。而後在服務端使用 code 來獲取 open_id，其中 $wx_app_id 是你的微信AppID(小程序ID) ，$wx_app_secret 是你的微信小程序密鑰。

<?php
$code = $_GET['code'];
// 這裏會返回一個 open_id，這個open_id是微信用戶惟一標識
$open_id = \Pingpp\WxpubOAuth::getOpenid($wx_app_id, $wx_app_secret, $code);

• 第3、將 open_id 做爲建立 charge 時的 extra 參數傳給 pingpp

這裏能夠參看官方小程序的支付流程圖

這裏須有幾個地方須要注意：

• 關於用戶的 unionid

  1. 若是開發者擁有多個移動應用、網站應用、和公衆賬號（包括小程序），可經過unionid來區分用戶的惟一性，由於只要是同一個微信開放平臺賬號下的移動應用、網站應用和公衆賬號（包括小程序），用戶的unionid是惟一的。換句話說，同一用戶，對同一個微信開放平臺下的不一樣應用，unionid是相同的。
  2. 在傳入 open_id 到 charge 提交給 pingpp 的時候，這裏是需用 open_id 而不是 unionid 傳入！
• 關於 code，是能夠在小程序登陸時候獲取，而後保存下來，在支付的時候使用便可，不須要每次支付都獲取一次 code

官方小程序登陸流程圖

官方小程序的支付流程圖

3、構建 pingpp.js

下載 pingpp 專門給小程序用的js sdk，在這個地址下載https://github.com/PingPlusPlus/pingpp-js

這裏是須要本身構建的，使用 gulp 構建：

由於微信小程序中 不能使用其餘支付渠道，構建時請添加該參數 wx_lite

gulp build --channels=wx_lite

構建好後就會出現dist 目錄：

pingpp-js-master tree . -L 1
.
├── CHANGELOG.md
├── README.md
├── alipay_in_weixin
├── demo
├── dist  // 每次構建都會從新刪除 dist 目錄而後從新建立
├── gulpfile.js
├── mods.js.tmpl
├── node_modules
├── package.json
├── src
└── test

dist目錄下會生成pingpp.js，咱們須要的就是這個。

4、在小程序裏面引入 pingpp.js

在小程序的支付訂單頁面的 js 文件（這個頁面是根據本身開發的程序邏輯決定，總而言之，就是最終要在小程序支付的地方）

// 建立 pingpp charge 訂單

// apiGet.pingppCreateCharge是本身寫的封裝函數，用來發起 pingpp 的支付請求，不須要理會
apiGet.pingppCreateCharge(payId, 'wx_lite').then(function (res) {
    console.log('result_pingpp:' + JSON.stringify(res));
// pingpp 會返回一個 charge 的支付請求，這裏按需引入 pingpp 的 jssdk 包，而後發起真正的 pingpp 支付請求（即調起 pingpp 的支付控件）

    if (res.type == 1) {
      // 調起 pingpp 支付
      let pingpp = require('../../utils/libs/pingpp.js');
      // 執行 pingpp 的建立支付的方法pingpp.createPayment
      pingpp.createPayment(res.charge, function (result, err) {
        if (result == "success") {
          console.log(result);
          // payment succeeded 支付成功

        } else {
          console.log(result + " " + err.msg + " " + err.extra);
        }
      });
    }

pingpp.js 的目錄須要本身放置到小程序的開發項目目錄裏面，目錄根據本身須要肯定

btw：

1. 爲何要用 pingpp

A：由於支付接口和流程異常複雜而且常常容易變更，若是維護起來是至關麻煩的，經過使用這種第三方封裝的，且有專人維護的接口，會減小至關一部分的開發成本和後續維護成本

全文參考網址：

1. pingpp 官方 jssdk 接入文檔
2. 小程序官方開發文檔

---

原文連接：https://www.godblessyuan.com/...