6.微信支付之JSAPI支付

来源：互联网发布：恋迹网络歌手编辑：程序博客网时间：2024/09/21 09:26

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 jsapipayimport (    "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获取openid
func 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获取openidfunc 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}// 获取codefunc 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 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 {        //获取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.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)} }

设置支付目录

jsapi必须设置支付木有，只有在支付目录下的页面才能发起支付，否则会报错，上异步我们已经确认了我们要访问的地址为/jsapi，假设我们的域
名为www.qq.com,那么这个时候我们的支付域名就是www.qq.com/jsapi,那么我们就需要把www.paytest.com/设置为支付目录

设置方法：
登陆公众平台-微信支付-开发配置-JSAPI支付，添加支付目录为www.paytest.com/，注意添加的目录的域名必须经过备案

同时可以设置测试目录，测试目录不需要备案，但必须把测试的微信号加入白名单，而且测试的支付链接只能在这个公众号内打开

编译测试

在微信里面打开支付url,进行测试

异步通知

除了上面js接口里面的结果判定，同时在统一下单的时候，我们填写了一个notify_url，我们同时会发送异步通知到这个地址，这个后面再说，因为还有其他支付方式也会发送异步通知，所以作为一个单独模块来说，这里我们先随便填一个，无所谓的。

0 0