本文主要是介绍微信支付之JSAPI支付，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
JSAPI支付
JSAPI支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付
使用场景
用户在微信公众账号(必须是服务号)内进入商家公众号，打开某个H5页面，完成支付
用户的好友在朋友圈、聊天窗口等分享商家H5页面连接，用户点击链接打开商家H5页面，完成支付
将商户H5页面转换成二维码，用户扫描二维码后在微信浏览器中打开h5页面后完成支付
JSAPI接口
使用JS脚本：getBrandWCPayRequest 调起微信支付
WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": "{{.AppId}}", //公众号名称，由商户传入"timeStamp": "{{.TimeStamp}}",//时间戳，自1970年以来的秒数"nonceStr": "{{.NonceStr}}",//随机串"package": "{{.Package}}","signType": "{{.SignType}}",//微信签名方式:"paySign": "{{.PaySign}}" //微信签名},function (res) {if (res.err_msg == "get_brand_wcpay_request:ok") {alert("支付成功");}else if (res.err_msg == "get_brand_wcpay_request:cancel") {alert("支付过程中用户取消");}else{//支付失败alert(res.err_msg)}}
);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
业务流程
用户通过不同场景点击进入商户网页
用户选择商品购买，完成选购流程
使用网页授权获取用户基本信息，得到openid
商户使用统一下单接口获取prepay_id
商户网页使用getBrandWCPayRequest接口调起微信支付
支付成功后，在该接口里面会返回结果，同时微信也会发送异步通知到统一下单时候填写的notify_url
开发实现
实现目标目标
打开网页http://config.HOST/buy.html，选购商品，最终打开http://config.HOST/jsapi.html调起微信支付
JSAPI必须先用网页授权的方式去获取用户的openid,在统一下单的时候需要,详情可以查看官方文档：网页授权获取获取用户基本信息
创建jsapipay包
创建文件夹jsapipay
设置网页获取用户基本信息的授权域名
只有在授权域名下的链接才能获取openid，所以第一步就去设置网页授权目录
假设我们网站的域名为:www.qq.com，那么久需要把网页授权目录设置为www.qq.com
设置方法：登陆公众平台，在开发中中心，往下翻功能列表里面有一项：网页授权获取用户基本信息，点击旁边的修改按钮即可，按照要求填入我们要设置的域名
在本节代码里面我们把域名保存在config.HOST变量里面
创建选购商品显示页面
创建buy.html，点击里面的购买按钮后，获取code并跳转到支付页面buy.html
<!DOCTYPE html>
<html>
<title>商家网页</title>
<head>
<form class="editPart" action="{{.callbackurl}}"><fieldset><legend>商家网页</legend><p><label>商品金额1分钱测试</label></p><div class="lightEditor"><iframe id="myFrame" class="editorFrame" style="height:162px;" frameborder="0px" tabindex=3></iframe></div></p><input type="submit" class="commentSubmit" value="点击购买" /></fieldset>
</form></body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
创建支付发起显示页面
创建jsapi.html文件，实现:
- 实现对getBrandWCPayRequest接口的调用，从而调起微信支付
- 打印出我们使用的参数
代码如下:
JSAPI支付一分钱
<script type="text/javascript">//实现微信支付JS脚本function pay() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": "{{.AppId}}", //公众号名称，由商户传入"timeStamp": "{{.TimeStamp}}",//时间戳，自1970年以来的秒数"nonceStr": "{{.NonceStr}}",//随机串"package": "{{.Package}}","signType": "{{.SignType}}",//微信签名方式:"paySign": "{{.PaySign}}" //微信签名},function (res) {if (res.err_msg == "get_brand_wcpay_request:ok") {alert("支付成功");}else if (res.err_msg == "get_brand_wcpay_request:cancel") {alert("支付过程中用户取消");}else{//支付失败alert(res.err_msg)}});}</script>
</head><body><!--打印出参数-->
<h1>微信jsapi支付 1分钱</h1>
<a>Appid: {{.AppId}}</a><br>
<a>TimeStamp: {{.TimeStamp}}</a><br>
<a>Nonce_str: {{.NonceStr}}</a><br>
<a>Package: {{.Package}}</a><br>
<a>SignType: {{.SignType}}</a><br>
<a>PaySign: {{.PaySign}}</a><br><button type="button" onclick="pay()">点击微信支付</button></body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
getBrandWCPayRequest接口参数生成
创建文件jsapirequest.go,实现
Jsapirequest结构体:存储getCPayReBrandWquest需要的参数，传递给jsapi.html页面func (v *Jsapirequest) Signmd5()函数:对Jsapirequest结构体中的非空参数进行微信支付签名，并存储签名结果
代码如下：
package jsapipayimport ("encoding/xml""wechatpaygolang/config""wechatpaygolang/tools"
)//1.定义Jsapirequest结构体，存储getBrandWCPayRequest接口要使用的参数
type Jsapirequest struct {XMLName xml.Name `xml:"xml"`AppId string `xml:"appId"` //公众账号IDNonceStr string `xml:"nonceStr"` //随机字符串Package string `xml:"package"` //账单类型SignType string `xml:"signType"` //商户号TimeStamp string `xml:"timeStamp"` //对账单日起PaySign string `xml:"-"` //最终请求串}//2.对Jsapirequest的非空字段进行md5签名，并存储签名结构
func (v *Jsapirequest) Signmd5() bool {sign := tools.Wechatpay_SignMD5(*v, config.API_KEY)v.PaySign = signreturn true
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
获取openid
创建auth.go文件，实现
Resultauth结构体，存储获取到的y用户基本新消息func Getopenid(w http.ResponseWriter, r *http.Request) (openid string)函数，根据code获取openidfunc getauthurl(callurl string) string函数，生成网页授权获取code的url,code会回传给callurl，注意这里的callurl必须是
urlencode编码
代码实现
package jsapipayimport ("fmt""wechatpaygolang/config""wechatpaygolang/tools"
)type Resultauth struct {Access_token string `json:"access_token"`Expires_in int `json:"expires_in"`Rfresh_token string `json:"rfresh_token"`Openid string `json:"openid"`Scope string `json:"scope"`
}//根据code获取openid
func Getopenid(code string) (openid string) {r.ParseForm()requestUrl := "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + config.APP_ID + "&secret=" + config.APP_SECRET + "&code=" + code + "&grant_type=authorization_code"rebots := tools.Get(requestUrl)var m Resultautherr := tools.XmlDecodebytes(rebots, &m)if err != nil {fmt.Println("error:", err)}openid = m.Openidfmt.Println("openid=" + openid)return openid}// 获取code
func getauthurl(url string) string {str := "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2b029c08a6232582&redirect_uri=" + url + "&response_type=code&scope=snsapi_base&state=test#wechat_redirect"return str}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
创建jsapi.go
前面我们分别创建了2个html页面，一个是表示选购页面，一个是发起支付页面，那么决定显示那个html页面，并传递对应的参数进去,在jsapi.go里面实现
func Jsapi(w http.ResponseWriter, r *http.Request)为页面入口函数，在这个函数里面，进行显示页面的判断和参数传递
- 如果判断链接没有
code字段，我们进入商品选购页面buy.html 如果判断链接有
code字段，我们进入支付页面pay.html，因为有code字段肯定是进行可buy.html里面的授权跳转
package jsapipayimport ("fmt""html/template""io/ioutil""net/http""os""wechatpaygolang/auth""wechatpaygolang/config""wechatpaygolang/tools""wechatpaygolang/unifiedorder"
)func Jsapi(w http.ResponseWriter, r *http.Request) {r.ParseForm()code := r.FormValue("code")//没有code·进入选购页面if code == "" {path, _ := os.Getwd()t, err := template.ParseFiles(path + "/jsapipay/buy.html")fmt.Println(err)m := map[string]string{}m["callbackurl"] = getauthurl("http://" + config.HOST + "/jsapi")da.Signmd5()t.Execute(w, da)} else {//获取openidopenid := auth.Getopenid(w, r)//1.统一下单v := &unifiedorder.Unifieldrequest{Appid: config.APP_ID, Mch_id: config.MCH_ID}//支付金额，单位为分v.Total_fee = "1"//商品说明v.Body = "JSAPI"//32位随机字符串v.Nonce_str = tools.Getnoncestr(32)//商户订单号，此处也随机生成v.Out_trade_no = tools.Getnoncestr(32)//发起支付的机器IPv.Spbill_create_ip = "127.0.0.1"//设置openidv.Openid = "omL67jm0A1sKwystTq7WsU28MF_c"//最终支付成功的通知地址v.Notify_url = config.URL_UNIFIEDORDER_NOTIFYURL//支付方式为JSAPIv.Trade_type = "JSAPI"//对上面设置的字段进行签名v.Signmd5()//把所有的有效字段组织为xml格式v.Xml()//向统一下单接口发起请求，并把返回请求结果res := v.Dorequest()fmt.Println("下单结果=", res.ReponseXML)fmt.Println("prepayid=", res.Prepay_id)fmt.Println("========================================")//打开支付网页,并传递参数,包括传递我们上面统一下单获取到的prepay_idpath, _ := os.Getwd()t, err := template.ParseFiles(path + "/jsapipay/pay.html")fmt.Println(err)da := Jsapirequest{AppId: config.APP_ID}da.Package = "prepay_id=" + res.Prepay_idda.TimeStamp = tools.Time_stamp_seconds()da.NonceStr = tools.Getnoncestr(32)da.SignType = "MD5"da.Signmd5()t.Execute(w, da)}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
结果判定
在jsapi.html里面，根据判定结果，进行相应的处理
返回值 描述
get_brand_wcpay_request:ok 支付成功
get_brand_wcpay_request:cancel 支付过程中用户取消
get_brand_wcpay_request:fail 支付失败
- 1
- 2
- 3
- 4
和/jsapi地址关联
在main.go文件里面
加入头文件
"wechatpaygolang/jsapi"在
rout函数里面加入路由
func rout(w http.ResponseWriter, r *http.Request) {
r.ParseForm()path := r.URL.Pathif path == "/helloworld" {fmt.Println("被扫支付")helloworld.HelloWorld(w, r)} else if path == "/micropay" {fmt.Println("被扫支付")micropay.Micropay(w, r)} else if path == "/jsapi" {fmt.Println("被扫支付")jsapi.Jsapi(w, r)} }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
设置支付目录
jsapi必须设置支付木有，只有在支付目录下的页面才能发起支付，否则会报错，上异步我们已经确认了我们要访问的地址为/jsapi，假设我们的域
名为www.qq.com,那么这个时候我们的支付域名就是www.qq.com/jsapi,那么我们就需要把www.paytest.com/设置为支付目录
设置方法：
登陆公众平台-微信支付-开发配置-JSAPI支付，添加支付目录为www.paytest.com/，注意添加的目录的域名必须经过备案
同时可以设置测试目录，测试目录不需要备案，但必须把测试的微信号加入白名单，而且测试的支付链接只能在这个公众号内打开
编译测试
在微信里面打开支付url,进行测试
异步通知
除了上面js接口里面的结果判定，同时在统一下单的时候，我们填写了一个notify_url，我们同时会发送异步通知到这个地址，这个后面再说，因为还有其他支付方式也会发送异步通知，所以作为一个单独模块来说，这里我们先随便填一个，无所谓的。
这篇关于微信支付之JSAPI支付的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
