美文网首页
微信支付方式

微信支付方式

作者: Hsugar | 来源:发表于2019-05-29 19:06 被阅读0次

1.浏览器内的微信支付

  • 这个相对微信内部的支付,前端的步骤会少一些。
  • 地址栏的参数一定要经过转码
  • 参数不识别&符号,我们解决的方法是‘,’隔开,依次获取
  • 下单时直接调取后台给的支付接口即可
util.api({
  url: url,
  headers:{
      token: util.getCookie('token')
  },
  data: data,
  type:'post',
  dataType:'json',
  success:function(res){
    if(res.rpco == 200){
      let data = id+','+opt.id+','+encodeURIComponent(token)+','+ encodeURIComponent(res.url);
      //跳转微信
      let redirect_url = 'order_good.html?data='+data;
      util.href(res.url+'&redirect_url='+encodeURI(redirect_url));
      //支付失败重新支付时的跳转地址,由接口返回
      opt.pay_url = res.rpbd.url;
  }
})
  1. 微信内部的h5支付
    1)在公众平台的相关配置:(一般开发时找PM即可,但不排除PM对这些不懂~那么 呵= =,那就等着加班吧)

    • 在公众平台配置appid,开通支付功能;
    • 公众平台配置商户号,并绑定相应appid,与上面的appid保持一致
    • 配置网页授权的回调url(注意这里只需填写域名),也就是获取code之后的redirect_uri地址的域名
    • 配置支付的回调页面地址,(注意地址要求是具体页面的上一级目录)

    2)根据官方文档获取code
    url一定要encode转码
    state可以是你想要传的参数,但必须是字母或者数字
    scope=snsapi_userinfo,获取用户的头像跟昵称等信息,需要手动授权
    scope=snsapi_base,为静默授权用户无感知,但只能得到openid

'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&' + 'redirect_uri=url&response_type=code&scope=snsapi_userinfo&state=1&' +
 'connect_redirect=1#wechat_redirect'

3)根据code获取openid/ 用code换取assess_token,再获取openid
不管那种方法,获取openid都需要存储在服务器端
4)拿到openid之后,调取后端下单的接口(openid为必传参数)
5)调起微信支付,里面的参数是在上一步接口会返回

function onBridgeReady() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":  "", //公众号名称,由商户传入     
            "timeStamp": + new Date(), //时间戳,自1970年以来的秒数     
            "nonceStr": "", //随机串     
            "package": "prepay_id=u802345jgfjsdfgsdg888",//一般接口返回时会拼接好
            "signType": "MD5", //微信签名方式:     
            "paySign": "" //微信签名 
        },
        function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示:
                //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                callback && callback(res);
            } else {
                Toast('支付失败');
            }
        });
}
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}

ps,吐槽一下
微信支付调试会比较坑,无法在微信开发者工具进行调试,更别说浏览器了 👀
不知道大佬们都怎么调试的?讨论讨论 ~
我的调试也是经过跟同事各种研究,最后利用nginx+抓包+手机代理 😂,一步步alert,前进着~~ 最后,终于支付完成~~

相关文章

  • iOS:APP 支付-微信支付、支付宝支付

    当前主流 APP 内购支付方式为微信支付、支付宝支付,结合项目对两类支付做简单总结。 一、微信支付流程 微信支付(...

  • mycncart之微信支付设置

    自mycncart 1.1版本开始,添加了微信支付方式,也即微信公众号支付方式。 微信支付只有企业才有资质申请,具...

  • PHP支付接口教程,详解微信支付(一)

    微信支付 三大支付方式里面,最复杂也是坑最多的非微信支付莫属,我们从微信开始讲。常见的微信支付种类有下列四种: 微...

  • 支付如何调取第三方的sdk--收银台页面描述

    收银台页面微信支付方式:JSAPI(微信公众号支付) 微信里、微信的朋友圈 点开 网址MWEB(微信h5支付) ...

  • PHP支付接口教程,详解微信支付

    微信支付 三大支付方式里面,最复杂也是坑最多的非微信支付莫属,我们从微信开始讲。 常见的微信支付种类有下列四种: ...

  • POS机使用方法

    请餐饮收银注意一下这个是支付宝与微信方式的预授权担保 这个是支付宝与微信方式的预授权完成 这个是支付宝与微信方式的...

  • SSM实现微信JSAPI支付以及退款

      微信支付方式有很多,这里主要记录网页微信支付唤起以及退款的主要流程,微信JSAPI支付必传openid,这里需...

  • python 微信支付

    微信支付的3种方式: Native支付是指商户系统按微信支付协议生成支付二维码,用户再用微信“扫一扫”完成支付的模...

  • 微信支付文档

    微信支付文档 1.微信支付简介 a)功能简介 b)支付账户 c)支付方式 d)账号测试 2.JS API支付接口 ...

  • 微信支付浅尝

    微信支付浅尝 一. 微信支付方式概览 1. 刷卡支付 刷卡支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系...

网友评论

      本文标题:微信支付方式

      本文链接:https://www.haomeiwen.com/subject/elltgqtx.html