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) } } );
业务流程
用户通过不同场景点击进入商户网页
用户选择商品购买，完成选购流程
使用网页授权获取用户基本信息，得到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>
创建支付发起显示页面
创建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>
getBrandWCPayRequest接口参数生成
创建文件jsapirequest.go,实现
Jsapirequest结构体:存储getCPayReBrandWquest需要的参数，传递给jsapi.html页面func (v *Jsapirequest) Signmd5()函数:对Jsapirequest结构体中的非空参数进行微信支付签名，并存储签名结果
代码如下：
package jsapipay
import (
"encoding/xml"
"wechatpaygolang/config"
"wechatpaygolang/tools"
)
//1.定义Jsapirequest结构体，存储getBrandWCPayRequest接口要使用的参数
type Jsapirequest struct {
XMLName xml.Name `xml:"xml"`
AppId string `xml:"appId"` //公众账号ID
NonceStr 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 = sign
return true
}
获取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 jsapipay
import (
"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 Resultauth
err := tools.XmlDecodebytes(rebots, &m)
if err != nil {
fmt.Println("error:", err)
}
openid = m.Openid
fmt.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
}
创建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 jsapipay import ( "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 { //获取openid openid := 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) //发起支付的机器IP v.Spbill_create_ip = "127.0.0.1" //设置openid v.Openid = "omL67jm0A1sKwystTq7WsU28MF_c" //最终支付成功的通知地址 v.Notify_url = config.URL_UNIFIEDORDER_NOTIFYURL //支付方式为JSAPI v.Trade_type = "JSAPI" //对上面设置的字段进行签名 v.Signmd5() //把所有的有效字段组织为xml格式 v.Xml() //向统一下单接口发起请求，并把返回请求结果 res := v.Dorequest() fmt.Println("下单结果=", res.ReponseXML) fmt.Println("prepayid=", res.Prepay_id) fmt.Println("========================================") //打开支付网页,并传递参数,包括传递我们上面统一下单获取到的prepay_id path, _ := 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_id da.TimeStamp = tools.Time_stamp_seconds() da.NonceStr = tools.Getnoncestr(32) da.SignType = "MD5" da.Signmd5() t.Execute(w, da) } }
结果判定
在jsapi.html里面，根据判定结果，进行相应的处理
返回值 描述
get_brand_wcpay_request:ok 支付成功
get_brand_wcpay_request:cancel 支付过程中用户取消
get_brand_wcpay_request:fail 支付失败
和/jsapi地址关联
在main.go文件里面
加入头文件
"wechatpaygolang/jsapi"在
rout函数里面加入路由func rout(w http.ResponseWriter, r *http.Request) { r.ParseForm() path := r.URL.Path if 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) } }
设置支付目录
jsapi必须设置支付木有，只有在支付目录下的页面才能发起支付，否则会报错，上异步我们已经确认了我们要访问的地址为/jsapi，假设我们的域
名为www.qq.com,那么这个时候我们的支付域名就是www.qq.com/jsapi,那么我们就需要把www.paytest.com/设置为支付目录
设置方法：
登陆公众平台-微信支付-开发配置-JSAPI支付，添加支付目录为www.paytest.com/，注意添加的目录的域名必须经过备案
同时可以设置测试目录，测试目录不需要备案，但必须把测试的微信号加入白名单，而且测试的支付链接只能在这个公众号内打开
编译测试
在微信里面打开支付url,进行测试
异步通知
除了上面js接口里面的结果判定，同时在统一下单的时候，我们填写了一个notify_url，我们同时会发送异步通知到这个地址，这个后面再说，因为还有其他支付方式也会发送异步通知，所以作为一个单独模块来说，这里我们先随便填一个，无所谓的。
1439
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
