H5使用微信和支付宝支付

  • 项目需求:
    • App中要使用H5的支付宝或者微信支付(官方是不推荐这样使用的)

微信支付

  1. 首先请求后台的下单接口,接口会返回一个可以跳转的URL地址
https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx07152955146476636e656fb9a1ff050000&package=1611623092&redirect_url=encodeURIComponent(支付完成要回调的页面,该地址的域名需要跟微信公众平台配置的域名一致,不然不能跳转)
  1. 点击微信支付跳转URL
    • 注意点:
      • 用 window.location.href打开URL
      • 在index.html页面配置meta,(meta name=“referrer” content=“origin” )这个配置很重要配置完成后,浏览器的请求头上会佩戴上,请求的域名
        H5使用微信和支付宝支付_第1张图片
    • 代码写完,需要部署到服务器上调试,(微信公众号配置的域名服务器)
  2. 实现的效果
    • ios手机app内嵌H5使用微信支付(安卓一样效果)
      • 效果:直接拉起微信支付,没有中间页,支付成功后,会回跳到app中,总体还可以
    • 微信中打开H5网页
      • 效果:会提示请在微信外打开订单,进行支付。
    • ios手机自带浏览器打开H5网页
      • 效果:直接拉起微信支付,没有中间页,支付成功后,会回跳到网页中,总体还可以

支付宝支付

  1. 首先请求后台的下单接口,接口会返回一个form表单
  2. 打开form表单
    const div = document.createElement('div')
        /* 此处form就是后台返回接收到的数据 */
        div.innerHTML = res.data.data
        document.body.appendChild(div)
        document.forms[0].submit()

H5使用微信和支付宝支付_第2张图片

![在这里插入图片描述](https://img-blog.csdnimg.cn/ef49a714bacd435f8da866b24414466a.png
3. 支付宝的本地就可以进行调试
4. 实现的效果

  • ios手机app内嵌H5使用支付宝支付(安卓一样效果)
    • 效果:(有支付宝app的前提下)直接拉起支付宝支付,有中间页(上面那个图),支付成功后会回跳到中间页面中,(app端可以检测到回跳到中间页面),没有安装app的请假下,去中间页,让下载支付宝app(其实有支付宝app的情况也是先跳中间页然后拉起支付宝)

      • app端可以监测到回跳到中间页的这个动作,到时候指定跳转app的页面就可以
    • 微信中打开H5网页

      • 效果:会提示请在浏览器外打开订单,进行支付。支付完成后,会停留在支付宝,不会回跳H5页面,或者浏览器
        H5使用微信和支付宝支付_第3张图片
    • ios手机自带浏览器打开H5网页

      • 效果:微信中打开H5网页效果一样

你可能感兴趣的:(vue,微信,javascript,前端)