JS微信支付功能实现总结

最新推荐文章于 2024-03-22 13:44:08 发布

这很耳东先生

最新推荐文章于 2024-03-22 13:44:08 发布

阅读量1.5k

点赞数 1

分类专栏： java 文章标签：支付 api 微信 javascript

本文链接：https://blog.csdn.net/AbsenceOfTrace/article/details/51890839

版权

java 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.用户同意授权，获取code。用户授权有两种scope，以下采用snsapi_base静默授权并自动跳转到回调页。另外一种scope有兴趣可以根据API自行设置

访问地址:
https://open.weixin.qq.com/connect/oauth2/authorize?appid=（公众号的appid）&redirect_uri=（回调的网址）&response_type=code&scope=snsapi_base&state=（随意设置）#wechat_redirect

参数说明：
appid                公众号的appid
                    （登录公众平台  →  开发   →  基本配置  →  appid）
redirect_uri         为回调的网址，则当用户同意授权后会自动跳转到的目标网址。
response_type        默认code不需要修改  
scope                授权方式，此处使用snsapi_base
state                随意设置

回调的网址需要在公众平台上设置授权回调页面域名,否则会出现redirect_uri 参数错误。
公众平台上设置授权回调页面域名步骤如下：
 1）登录公众平台 https://mp.weixin.qq.com/ 
 2）开发    →    接口权限    →    网页服务    →    网页账号    →    网页授权获取用户基本信息    →    修改

成功访问上述链接后，页面将会跳转到redirect_uri指定的链接，并传递一个code参数，于是我们在回调后的逻辑里需要接收code参数的值。

2.获取openid

访问地址:
https://api.weixin.qq.com/sns/oauth2/access_token?appid=（公众号的appid）&secret=（公众号的appid下方的密钥）&code=（回调后获得的code）&grant_type=authorization_code

参数说明:
appid                公众号的appid
secret               公众号的appid下发的密钥
code                 步骤1成功回调后获得的code
grant_type           默认authorization_code

成功执行步骤2后将会获得一个json数组，openid包含其中，需要我们自行解析获取openid。

3.统一下单获取prepay_id

URL地址：
https://api.mch.weixin.qq.com/pay/unifiedorder

参数说明：
appid               公众号的appid
body                弹出支付窗口时的提示内容
mch_id              微信支付分配的商户号
                   （登录公众平台  →  微信支付   →  基本信息  → 商户号 ）
nonce_str           随机字符串
notify_url          接收微信支付异步通知回调地址，通知url必须为直接可访问的url，
                    不能携带参数。 
openid              步骤2获取的openid
out_trade_no        商户系统内部的订单号，可自定义
spbill_create_ip    用户端实际ip
total_fee           订单总金额，单位为分
trade_type          支付类型，此处为JSAPI
key                 微信商户平台(pay.weixin.qq.com) → 账户设置 → API安全
                     → 密钥设置

sign                MD5加密上述参数

如:
    String sintrt = "appid=yourappid"+
                    "&body=yourbody"+
                    "&mch_id=yourmch_id"+
                    "&nonce_str=yournonceStr"+
                    "&notify_url=yournotify_url"+
                    "&openid=youropenid"+
                    "&out_trade_no=yourout_trade_no"+
                    "&spbill_create_ip=yourip"+
                    "&total_fee=yourtotal_fee"+
                    "&trade_type=JSAPI"+
                    "&key=yourkey";
    String sign = MD5.getMD5(sintrt).toUpperCase();


以XML的方式封装以上参数，格式如下
<xml>
    <appid>appid</appid>
    <body>body</body>
    <mch_id>mch_id</mch_id>
    <nonce_str>nonceStr</nonce_str>
    <notify_url>notify_url</notify_url>
    <openid>openid</openid>"+
    <out_trade_no>out_trade_no</out_trade_no>"+
    <spbill_create_ip>spbill_create_ip</spbill_create_ip>"+
    <total_fee>total_fee</total_fee>
    <trade_type>JSAPI</trade_type>
    <sign>sign</sign>
</xml>  

以XML的方式访问统一下单的URL地址获取解析返回的数据，获取prepay_id

4.网页端调用js完成支付

WeixinJSBridge.invoke(
        'getBrandWCPayRequest', 
        {
        "appId":"appId",       
        "timeStamp":timestamp,         //时间戳，自1970年以来的秒数     
        "nonceStr":nonceStr,           //随机串     
        "package":prepay_id            //步骤3获取的prepay_id,     
        "signType":"MD5",              //微信签名方式：     
        "paySign":sign                 //微信签名 
        },
        function(res){     
             if(res.err_msg.indexOf("ok") > 0){
                     alert("支付完成!");
             }else{ 
                 alert(res.err_msg);
             }                       
        }
); 

参数说明：
appid               公众号的appid
timeStamp           时间戳
nonceStr            随机字符串
prepay_id           步骤3获取的prepay_id
signType            默认MD5
paySign             参数签名

签名参考如下
var stringSignTemp="appId=wxd0030975ff3fb970"+
                    "&nonceStr="+nonceStr+
                    "&package=prepay_id="+prepay_id+
                    "&signType=MD5"+
                    "&timeStamp="+timestamp+
                    "&key=3d3d43eff711172a774101a26ae1b16b";
    //key微信商户平台(pay.weixin.qq.com) → 账户设置 → API安全→ 密钥设置

var sign =hex_md5(stringSignTemp).toUpperCase();

这很耳东先生

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS微信支付功能实现总结

因为业务需要用到网页端微信支付功能，跨过了许许多多个坑终于实现了支付功能。特此梳理总结下思路，希望有可能帮助到其他需要用到支付功能的同学。1.用户同意授权，获取code。用户授权有两种scope，以下采用snsapi_base静默授权并自动跳转到回调页。另外一种scope有兴趣可以根据API自行设置访问地址:https://open.weixin.qq.com/connect/oauth2/aut
复制链接

扫一扫