资讯专栏INFORMATION COLUMN

快应用微信H5支付

ysl_unh / 3258人阅读

摘要:快应用微信支付首先是服务端完成支付服务端的接入,接入完成以后,服务器要完成的工作是接收来自客户端的支付请求,然后生成一个订单,之后把订单传给微信的服务器,微信会返回一个,服务器需要把这个返回给客户端完成一个中间跳转页面,中间页需要在加载

快应用微信H5支付

1.首先是服务端完成支付服务端的接入,接入完成以后,服务器要完成的工作是接收来自客户端的支付请求,然后生成一个订单,之后把订单传给微信的服务器,微信会返回一个mweb_url,服务器需要把这个mweb_url返回给客户端;

data:{
    orderId :56955,
    url:"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602"
}

2.完成一个中间跳转页面,中间页需要在加载完成的时候从页面的get参数中解析出 mweb_url , 然后自动向这个url跳转;生成一个https://my.demain.com/html/bo... H5链接

//中间页面H5的逻辑
  var payUrl = decodeURIComponent(getQueryString("mweb_url"))
  if (payUrl !== "null") {
    window.location.replace(payUrl)
  }

  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var l = decodeURI(window.location.search);
    var r = l.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
  }

3.关于这个中间页:

为什么需要这个中间页?

因为微信h5支付拉起支付界面的方式就是向mweb_url跳转,不过因为微信会通过ref做防盗链检查,因为跳转动作需要在开发者的页面中完成

这个中间页什么时候会被加载运行?调用微信支付的pay接口之后,平台会自动加载运行这个页面

加载运行这个中间页的时候,会拿到哪些参数?调用微信支付的pay接口时传入的参数,会全部作为get参数传给这个页面

4.在快应用中进行配置中间页地址,manifest.json中声明wxpay这个feature时填上

 {
     "name": "service.wxpay",
     "params": {
     "package": "you.package.name",
     "sign": "abcdefg",
     "url": "https://my.demain.com/html/bookSoter/index.html"
  }
}

5.调用官方文档提供的wxpay.getType()方法

wechatPayHandle(){
    var payType = wxpay.getType();
    if (payType === "MWEB") {
    wxpay.pay({
      //微信网页支付的prepayId
      prepayid: "wx13101012415473b5899768303880086259",
      extra: {
        //传递给支付页面的自定义参数, 根据需要进行设置, 会被urlEncode之后拼接在配置的url尾部
        mweb_url: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13101012415473b5899768303880086259&package=1999421602"
      },
      fail: function (data, code) {
        console.log(`WX H5 PAY handling fail, code = ${code}`)
      },
      cancel: function () {
        console.log("WX H5 PAY handling cancel")
      },
      success: function (data) {
        //H5方式下,支付成功的回调仅仅只是指将订单递交给微信,并不意味着支付已经成功完成
        console.log(data)
      }
    })
  }
}

6.如果pay()方法走成功以后会返回一个data,不需要做任何操作和跳转,就可以唤起微信支付,返回的格式如下:

{
finl_url:"https://my.demain.com/html/bookSoter/index.html?repayid=wx13101012415473b5899768303880086259&trade_type=MWEB&mweb_url=https%3A%2F%2Fwx.tenpay.com%2Fcgi-bin%2Fmmpayweb-bin%2Fcheckmweb%3Fprepay_id%3Dwx13101012415473b5899768303880086259%26package%1999421602"
    }

7.如果走了success回调函数以后,微信唤起不成功存在可能有

生成的H5中间页面的域名没有在微信开发平台上面配置白名单;

服务端代码发布环境和你测试环境在同一个局域网里面

8.如果走了fail回调函数,看返回的code值

900 在manifest.json中配置的应用签名有误,无法解析

901 在manifest.json中配置的应用包名有误

1000 微信未安装

1001 用于微信网页支付的url配置找不到

2001 订单已经提交给微信,但是微信返回错误, 可能的原因:签名错误、未注册APPID、项目设置APPID不正确、注册的APPID与设置的不匹配、其他异常等。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97730.html

相关文章

  • 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的?

    摘要:中国互联网络信息中心发布的中国互联网络发展状况统计报告显示,截至年月,我国网民规模达亿人,微信月活亿支付宝月活亿百度月活亿另一方面,中国手机占智能手机整体的比例超过,月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的? 原创: 嘉宾-张楠 开源中国 以往我们说某一功能跨多端,往往是指在诸如 PC、移动等不同类型的设备之...

    GraphQuery 评论0 收藏0
  • beecloud对接——微信支付

    摘要:微信支付方式付款码支付适用于线下场所支付支付是指商户通过调用微信支付提供的接口,在支付场景中调起微信支付模块完成收款。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。 微信支付方式(https://pay.weixin.qq.com/sta...): 1、付款码支付————————适用于线下场所 2、JSAPI支付————————JSAPI支付是指商户...

    FingerLiu 评论0 收藏0
  • 应用开发速上手及简明教程

    摘要:注册账号首先你需要一个手机厂商对应开发者账号和快应用账号由于博主的手机是华为,就在华为官网注册一个个人开发者账号就好啦,这个部分就不具体展开了。 博主的开发及调试环境是 macOS 10.13.4 + Chrome/65.0.3325.181 + honorV9 EMUI8.0.0(Android8.0.0)本文适合有一定前端开发经验的小伙伴(有一定经验看原文档太累赘了,而且环境配置部...

    sean 评论0 收藏0

发表评论

0条评论

ysl_unh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<