reactjs +golang 微信支付坑坑坑

本贴最后更新于 1939 天前,其中的信息可能已经东海扬尘

P81023161420jpg

最近在做支付充值这一块,用的微信支付,发现坑点真不少。由于无 golang 的 sdk 于是拿着 github 上的别人写好的改了改,最终也还是圆满完成了支付这一块。

主要场景:微信支付-H5-微信内发起支付

主要内容:微信网页开发 >jssdk> 微信商户

开发语言:reactjs+golang

大概的主体思路如下每一步的操作都很重要
微信网页开发配置:
1、在微信后台配置域名(目的:获取 openid)
2、jssdk 域名的配置(目的:前端请求的配置)
3、商户后台的域名配置(目的:支付的配置)

主要配置就以上这些(应该没遗漏)
主要文档:网页授权的文档,jssdk wxconfig wxpay 的文档,微信商户支付文档

坑 1、微信授权 redrect_uri 错误(此处偷懒可以用别人的):自己写则仔细检查各种参数以及微信后台的配置即可,总会成功的
示例授权代码:

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"
}


1、请求 ------> 服务器---302-----> 微信服务器(用户同意)

2、微信服务器--code--> 服务器

3、服务器----code-> 微信服务器----(用户信息和 token)------服务器

坑 2、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 => {

        });
    };

总结:整个逻辑很简单但是一个人前后端都写的话,对于微信这一块不熟的话写起来就会犯迷糊,忘记了参数,类型等等等。相比来说支付宝的就简单很多,加油

  • golang

    Go 语言是 Google 推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发 Go,是因为过去 10 多年间软件开发的难度令人沮丧。Go 是谷歌 2009 发布的第二款编程语言。

    491 引用 • 1383 回帖 • 370 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
xhaoxiong
站在巨人的肩膀上学习与创新

推荐标签 标签

  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 448 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    362 引用 • 1212 回帖 • 580 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    16 引用 • 68 回帖
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖 • 1 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 683 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 593 关注
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 232 关注
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    198 引用 • 120 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 458 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 3 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    19 引用 • 31 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 219 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 7 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 592 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 590 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    69 引用 • 190 回帖 • 501 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    66 引用 • 124 回帖
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 25 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 431 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    21 引用 • 22 回帖 • 1 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 120 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    185 引用 • 318 回帖 • 352 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    673 引用 • 535 回帖