reactjs+golang微信支付的充值功能

 

最近在作支付充值這一塊，用的微信支付，發現坑點真很多。因爲無golang的sdk因而拿着github上的別人寫好的改了改，最終也仍是圓滿完成了支付這一塊。

主要場景:微信支付-H5-微信內發起支付

主要內容:微信網頁開發>jssdk>微信商戶

開發語言:reactjs+golang

大概的主體思路以下每一步的操做都很重要
微信網頁開發配置:
一、在微信後臺配置域名(目的:獲取openid)
二、jssdk域名的配置(目的:前端請求的配置)
三、商戶後臺的域名配置（目的:支付的配置）

主要配置就以上這些（應該沒遺漏）
主要文檔：網頁受權的文檔，jssdk wxconfig wxpay的文檔，微信商戶支付文檔

坑一、微信受權 redrect_uri錯誤（此處偷懶能夠用別人的<a href="gopkg.in/chanxuehong/wechat.v2">包</a>）：本身寫則仔細檢查各類參數以及微信後臺的配置便可，總會成功的
示例受權代碼:
```
package controllers

import (
"net/url"

"charge/models"

"github.com/astaxie/beego"
mpoauth2 "gopkg.in/chanxuehong/wechat.v2/mp/oauth2"
oauth "gopkg.in/chanxuehong/wechat.v2/oauth2"
"gopkg.in/chanxuehong/wechat.v2/open/oauth2"
)

type Common struct {
beego.Controller
UserID uint
}

type WebController struct {
Common
}

func (this *WebController) Prepare() {
if !UserInterceptor(&this.Common) {
WechatLogin(&this.Common)
}
}

var oauth2Endpoint oauth.Endpoint = mpoauth2.NewEndpoint(Appid, AppSecret)

func WechatLogin(this *Common) {

code := this.GetString("code")

//第一次請求進來時候
if code == "" {
this.GoAuth()
this.StopRun()
return
}
client := oauth.Client{Endpoint: oauth2Endpoint}

if token, err := client.ExchangeToken(code); err != nil {
beego.Warning("exchange token error:", err)
this.GoAuth()
this.StopRun()
return
} else {
if info, err := oauth2.GetUserInfo(token.AccessToken, token.OpenId, "", nil); err != nil {
beego.Warning("get userinfo error:", err)
this.GoAuth()
this.StopRun()
return
} else {
//保存用戶信息到數據庫
var user models.User
if models.DB.Where("openid =?", info.OpenId).First(&user).RecordNotFound() {

user.Openid = info.OpenId
user.Nickname = info.Nickname
if err := models.DB.Create(&user).Error; err != nil {
beego.Error("update user error:", err)
this.StopRun()
return
}
this.UserID = user.ID
this.SetSession("userinfo", user)
} else {
if err := models.DB.Model(&user).Updates(map[string]interface{}{"Nickname": info.Nickname,}).Error; err != nil {
beego.Error("user update error:", err)
this.StopRun()
return
}
this.UserID = user.ID
this.SetSession("userinfo", user)
}
}

}
}

func (this *Common) GoAuth() {
//此處values
uri, _ := url.Parse(beego.AppConfig.String("domain") + this.Ctx.Input.URI())

values := uri.Query()
values.Del("code")
path := mpoauth2.AuthCodeURL(Appid, beego.AppConfig.String("domain")+
this.Ctx.Input.URL()+
"?"+ values.Encode(),
"snsapi_userinfo", this.GetString("token"))
this.Redirect(path, 302)
this.StopRun()
return
}

func UserInterceptor(ctr *Common) bool {
if userinfo := ctr.GetSession("userinfo"); userinfo != nil {
user := userinfo.(models.User)
if err := models.DB.Where("id=? ", user.ID).First(&user).Error; err != nil {
beego.Warning("user read error:", err)
return false
}

ctr.UserID = user.ID
return true
}

return false

}

//@router /* [*]
func (this *WebController) Index() {

this.TplName = "react/index.html"
}

//@router /MP_verify_zpcrQi7YFTe5pSaV.txt [*]
func (this *WebController) MP() {
this.TplName = "MP_verify_zpcrQi7YFTe5pSaV.html"
}

```
一、請求 ------>服務器---302----->微信服務器（用戶贊成）

二、微信服務器--code-->服務器

三、服務器----code->微信服務器----(用戶信息和token)------服務器

坑二、jssdk配置wx.config 和wx.chooseWXPay
reactjs的微信jssdk weixin-js-sdk

> config配置:react獲取當前路徑我是使用window而後split域名，去掉默認的#號是使用browserHistory 而不是用hash路由 個人每次wx.chooseWXPay請求以前都是調用了wx.config config
關於調試:需線上配置好的環境在微信開發者工具中調試
關於簽名失敗:仔細檢查參數

>[！wx.config基於微信後臺域名的配置]

前端代碼：
```
_getInitialState() {
let url = window.location.href;
let urlArr = url.split("xxxx");
let that = this;
let pathname = urlArr[1];
window.$http.post('/api/jssdk', qs.stringify({path: pathname})).then(res => {
if (res.status === 10000) {
that.setState({
openid: res.openid
});
wx.config({
debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
appId: res.appid, // 必填，公衆號的惟一標識
timestamp: res.timestamp, // 必填，生成簽名的時間戳
nonceStr: res.noncestr, // 必填，生成簽名的隨機串
signature: res.signature,// 必填，簽名
jsApiList: ["chooseWXPay", "onMenuShareTimeline", "addCard"], // 必填，須要使用的JS接口列表
success: function (res) {
}

});
}
}).catch(err => {
});

}

```
後端jssdk接口
```
//@router /api/jssdk [*]
func (this *WebController) JSSDK() {

path := this.GetString("path")

noncestr := string(utils.Krand(16, 3))
timestamp := time.Now().Unix()
var user models.User

//因爲已經微信受權將openid寫入數據庫了
if err := models.DB.Where("id = ?", this.UserID).First(&user); err != nil {
beego.Warning(err)
}
//"gopkg.in/chanxuehong/wechat.v2/mp/jssdk"
signature := jssdk.WXConfigSign(JSTICKET, noncestr, strconv.FormatInt(timestamp, 10), 你的域名+path)

data := make(map[string]interface{})
data["appid"] = Appid
data["noncestr"] = noncestr
data["timestamp"] = timestamp
data["signature"] = signature
data["status"] = 10000
data["openid"] = user.Openid
this.Data["json"] = data
this.ServeJSON()
return
}
```
>而後預下單
將openid 商品信息提交到服務端,服務端經過預下單接口下單（此處實際上是模擬商戶向微信請求此時商戶的的參數包括）
```
//向商戶下單[github.com/objcoding/wxpay]
func PostPreOrder(openid string, tradeNo string, amount int64, ip string, category int) (prepayId string, paySign string, isOk bool, err error) {
account := wxpay.NewAccount(Appid, Mchid, ApiKey, false)
client := wxpay.NewClient(account)

bodyString := ""

if category == 1 {
bodyString = "callpay"
} else {
bodyString = "fuelpay"
}
// 設置http請求超時時間
client.SetHttpConnectTimeoutMs(2000)

// 設置http讀取信息流超時時間
client.SetHttpReadTimeoutMs(1000)
client.SetSignType("MD5")
params := make(wxpay.Params)

fmt.Println("body:", bodyString)
fmt.Println("appid:", Appid)
fmt.Println("out_trade_no:", tradeNo)

params.SetString("body", bodyString).
SetString("appid", Appid).
SetString("out_trade_no", tradeNo).
SetInt64("total_fee", amount).
SetString("spbill_create_ip", ip).
SetString("notify_url", notifyUrl).
SetString("trade_type", tradeType).
SetString("openid", openid)
/*
beego.Error("-----------request param------------")

for key, value := range params {
beego.Error("key:", key, " value:", value)
}
*/
returnParams, err := client.UnifiedOrder(params)

if err != nil {
log.Println(err)
return "", "", false, err
}
/*
beego.Error("-----------response param------------")
for key, value := range returnParams {
beego.Error("key:", key, " value:", value)
}
*/
returnCode, ok := returnParams["return_code"]
resultCode, ok := returnParams["result_code"]
if returnCode == "SUCCESS" && resultCode == "SUCCESS" && ok {
paySign, _ = returnParams["sign"]
prepayId, _ := returnParams["prepay_id"]
return prepayId, paySign, true, err
}
return "", "", false, err
}

```

>上面返回了預下單的preid 和paysign（這是錯誤的簽名） 後面我拿出來從新改寫了
```
func (this *OrderController) test(){
noncestr := utils.Str2Md5(time.Now().Format("20060102150405"))
timestamp := time.Now().Unix()

//來自上面PostPreOrder()返回的
paySign = Sign(prepayId, noncestr, strconv.FormatInt(timestamp, 10))
/*

rst["package"] = "prepay_id=" + prepayId
rst["paySign"] = paySign
rst["nonceStr"] = noncestr
rst["timeStamp"] = strconv.FormatInt(timestamp, 10)
rst["appId"] = Appid
rst["status"] = 10000
rst["tradeNo"] = tradeNo
this.Data["json"] = rst
this.ServeJSON()

}

/支付的簽名函數 (包內的簽名函數的改寫)
func Sign(prepayId string, noncestr string, timestamp string) string {
params := make(wxpay.Params)
params.SetString("package", "prepay_id="+prepayId).
SetString("nonceStr", noncestr).
SetString("timeStamp", timestamp).
SetString("appId", Appid).
SetString("signType", "MD5")
var keys = make([]string, 0, len(params))
for k := range params {
if k != "sign" { // 排除sign字段
keys = append(keys, k)
}
}

sort.Strings(keys)

//建立字符緩衝
var buf bytes.Buffer
for _, k := range keys {
if len(params.GetString(k)) > 0 {
buf.WriteString(k)
buf.WriteString(`=`)
buf.WriteString(params.GetString(k))
buf.WriteString(`&`)
}
}
// 加入apiKey做加密密鑰
buf.WriteString(`key=`)
buf.WriteString(ApiKey)

var (
dataMd5 [16]byte
str string
)
dataMd5 = md5.Sum(buf.Bytes())
str = hex.EncodeToString(dataMd5[:])
return strings.ToUpper(str)
}

```
>返回給前端6個重要參數 其中5個是調用wx.chooseWXPay的(這是後端給前端的，也有一些寫法是前端把參數準備好而後再請求)
此處注意參數key和value的準確性(好比大小寫,值的類型等)

>在以上基礎上再調用wx.chooseWXPay
```
_preOrder = () => {

let that = this;
let itemId = that.state.itemId;
let mobile = that.state.mobile;
let openid = that.state.openid;
let category = that.state.category;

mobile = mobile.replace(/\s/ig, '');
//預下單
window.$http.post('/api/order/pre', qs.stringify({
mobile: mobile,
id: itemId,
category: category,
openid: openid
})).then(res => {
//回調得到支付參數(也有是在前端將參數準備好的)
let appId = res.appId;
let timeStamp = res.timeStamp;
let nonceStr = res.nonceStr;
let packages = res.package;
let paySign = res.paySign;
that.setState({
tradeNo: res.tradeNo
});
//發起支付[此處注意這個包幫你封裝了一層 timestamp 實際微信文檔爲timeStamp]
wx.chooseWXPay({
appId: appId,
timestamp: timeStamp.toString(),
nonceStr: nonceStr,
package: packages,
signType: 'MD5',
paySign: paySign,
success: function (res) {
//完成後修改訂單狀態
that._paySuccess();
},
}).catch(err => {
console.log("error")
});

if (res.status === 10001) {
console.log("下單失敗")
}
}).catch(err => {

});
};
```

總結：整個邏輯很簡單可是一我的先後端都寫的話，對於微信這一塊不熟的話寫起來就會犯迷糊，忘記了參數，類型等等等。相比來講支付寶的就簡單不少，加油啦

<a href="https://www.xhxblog.cn">個人博客</a>