小程序完整對接 pingpp支付

有幾個先要條件：

小程序需要企業(yè)認證且開通支付功能，個人認證是無法使用支付功能的（小程序微信支付官網(wǎng)）

pingpp 本身接入的企業(yè)服務器（即商戶服務器）并不強制要求 https，但是小程序是，所以也要一起強制要求全程 https

pingpp 有一個賬戶，并且里面的配置渠道參數(shù)

pingpp 已經(jīng)配置好服務端,具體參考 pingpp 開發(fā)文檔，不再詳述（https://www.pingxx.com/docs/server）

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

一、準備好 pingpp

大致的配置內容如下：

• 根據(jù)圖了解 pingpp 的支付流程，這是其中支付的內容（還有其他支付或者退款流程，但是不做詳述，因為懂了一個就可以一理通百里明）

一般的 pingpp 支付請求處理是根據(jù)上圖所示：

用戶在客戶端選擇商品并提交訂單，客戶端需要向你的服務端傳遞支付要素。注意：Ping++ SDK 不涉及你的客戶端和你的服務端之間的數(shù)據(jù)交互，此處請你自定義通信方式。

服務端接收到客戶端請求參數(shù)，并調用 Server-SDK封裝的創(chuàng)建支付 Charge 的方法請求 Ping++ 。

Ping++ 響應你的服務端請求，返回 Charge (支付憑據(jù))給你的服務端。

你的服務端響應你的客戶端請求，需要將該 Charge 對象完整的返回給你的客戶端，注意：這里的 Charge 返回類型必須是 JSON 格式。

客戶端拿到支付憑據(jù) Charge 對象后，需要調用 Client-SDK 封裝的方法調起支付控件，用戶輸入密碼完成支付。

第三方支付渠道會直接在客戶端返回支付結果，此處不要使用客戶端的成功結果更新訂單的最終狀態(tài)。

在 Ping++ 管理平臺配置 Webhooks 的 charge.succeeded 事件。支付完成時，Ping++ 會主動以 POST 方式向你配置在管理平臺上的 Webhooks 通知地址發(fā)送支付結果，建議訂單狀態(tài)的更新對比客戶端的渠道同步回調信息和服務端的 Ping++ Webhooks 通知來確定是否修改。

同時，建議在處理邏輯中添加主動查詢機制：如果在可接受的時間范圍內沒有收到 Webhooks 通知，你也可以調用 Server-SDK 封裝的查詢方法，主動向 Ping++ 發(fā)起請求來獲得訂單狀態(tài)，該查詢結果可以作為交易結果。

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

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

二、server端接入

這里是 pingpp 幫我們封裝好了微信小程序的支付流程，只需要傳入wx_app_id公眾號唯一標示和授權后跳轉的地址就可以了，正常的流程并不是這么簡單，具體可以參考微信公眾號的支付開發(fā)文檔：https://pay.weixin.qq.com/wiki/doc/api/index.html

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

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

wx.login({ // 這個接口可以在打開小程序的時候調用，然后保存code用來后續(xù)使用success: function(res) {if(res.code){ // 獲取到 codeconsole.log('code = ' + res.code);}else{console.log('獲取用戶登錄態(tài)失敗！' + res.errMsg);}} }); 這里可以參看官方小程序登錄流程圖

• 第二、得到 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);

• 第三、將 open_id 作為創(chuàng)建 charge 時的 extra 參數(shù)傳給 pingpp

這里可以參看官方小程序的支付流程圖

這里須有幾個地方需要注意：

• 關于用戶的 unionid

• 如果開發(fā)者擁有多個移動應用、網(wǎng)站應用、和公眾帳號（包括小程序），可通過unionid來區(qū)分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網(wǎng)站應用和公眾帳號（包括小程序），用戶的unionid是唯一的。換句話說，同一用戶，對同一個微信開放平臺下的不同應用，unionid是相同的。
• 在傳入 open_id 到 charge 提交給 pingpp 的時候，這里是需用 open_id 而不是 unionid 傳入！
• 關于 code，是可以在小程序登錄時候獲取，然后保存下來，在支付的時候使用即可，不需要每次支付都獲取一次 code

官方小程序登錄流程圖

官方小程序的支付流程圖

三、構建 pingpp.js

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

這里是需要自己構建的，使用 gulp 構建：

因為微信小程序中 不能使用其他支付渠道，構建時請?zhí)砑釉搮?shù)wx_lite gulp build --channels=wx_lite

構建好后就會出現(xiàn)dist 目錄：

pingpp-js-master tree . -L 1 . ├── CHANGELOG.md ├── README.md ├── alipay_in_weixin ├── demo ├── dist // 每次構建都會重新刪除 dist 目錄然后重新創(chuàng)建 ├── gulpfile.js ├── mods.js.tmpl ├── node_modules ├── package.json ├── src └── test

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

四、在小程序里面引入 pingpp.js

在小程序的支付訂單頁面的 js 文件（這個頁面是根據(jù)自己開發(fā)的程序邏輯決定，總而言之，就是最終要在小程序支付的地方）

// 創(chuàng)建 pingpp charge 訂單// apiGet.pingppCreateCharge是自己寫的封裝函數(shù)，用來發(fā)起 pingpp 的支付請求，不需要理會 apiGet.pingppCreateCharge(payId, 'wx_lite').then(function (res) {console.log('result_pingpp:' + JSON.stringify(res)); // pingpp 會返回一個 charge 的支付請求，這里按需引入 pingpp 的 jssdk 包，然后發(fā)起真正的 pingpp 支付請求（即調起 pingpp 的支付控件）if (res.type == 1) {// 調起 pingpp 支付let pingpp = require('../../utils/libs/pingpp.js');// 執(zhí)行 pingpp 的創(chuàng)建支付的方法pingpp.createPaymentpingpp.createPayment(res.charge, function (result, err) {if (result == "success") {console.log(result);// payment succeeded 支付成功} else {console.log(result + " " + err.msg + " " + err.extra);}});} pingpp.js 的目錄需要自己放置到小程序的開發(fā)項目目錄里面，目錄根據(jù)自己需要確定

btw：

為什么要用 pingpp

A：因為支付接口和流程異常復雜并且經(jīng)常容易變動，如果維護起來是相當麻煩的，通過使用這種第三方封裝的，且有專人維護的接口，會減少相當一部分的開發(fā)成本和后續(xù)維護成本

全文參考網(wǎng)址：

pingpp 官方 jssdk 接入文檔

小程序官方開發(fā)文檔

---

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

總結

以上是生活随笔為你收集整理的小程序完整对接 pingpp支付的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。