前端微信支付开发H5支付(微信外)

简介: 前端微信支付开发H5支付(微信外)

相关文章

微信支付现在开发的越来越多了,生活里离不开手机支付,微信支付便是其中的一种支付方式,微信的支付有公众号支付、H5支付,扫码支付等
今天要说的是其中的h5支付(原生浏览器及app)的支付方式。具体流程我就不啰嗦了,说说大致流程及踩得坑吧。

大致流程

支付流程

  • 1、用户在商户侧完成下单,使用微信支付进行支付
  • 2、由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB
  • 3、统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名“mweb_url”),商户通过mweb_url调起微信支付中间页
  • 4、中间页进行H5权限的校验,安全性检查(此处常见错误请见下文)
  • 5、如支付成功,商户后台会接收到微信侧的异步通知
  • 6、用户在微信支付收银台完成支付或取消支付,返回商户页面(默认为返回支付发起页面)
  • 7、商户在展示页面,引导用户主动发起支付结果的查询
  • 8,9、商户后台判断是否接到收微信侧的支付结果通知,如没有,后台调用我们的订单查询接口确认订单状态
  • 10、展示最终的订单支付结果给用户
大致的流程就和微信的文档一致。如果看不懂的话,那就通俗的来讲就是:你在下单时,要给后台发请求,后台通过拿到的参数请求微信后台去生成订单并同时返给你一个路径mweb_url,这个路径就是用来调起微信应用发起支付操作的。(这里要说明的就是由于h5支付不能主动回调,所以需要个主动查询的操作,这时会需要你又一个确认界面来进行主动查询订单状态。这里是个坑一会儿再说),调起支付界面之后进行支付操作,期间你什么都不用管,因为这都是微信的事。你需要的就是在你付完钱之后查看你的钱买你要的东西到底有没有成功(你要是不加的话,谁知道成功没,估计顾客会打死你,付完钱就茫然了,不知道到底钱到哪去了→_→)

常见错误

一、回调页面

正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面。
如,您希望用户支付完成后跳转至https://www.wechatpay.com.cn,则可以做如下处理:
假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
*则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn***

(有颜色的部分就是你要添加最后想要跳转进行别的操作的页面,一般就是确认订单状态的页面)
注意:
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在:
1,微信支付中间页调起微信收银台后超过5秒
2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图
跳转页

常见问题.png

这里重点说一下图片里的问题3(*商家存在未配置的参数,请联系商家解决)这个问题在app中的调用(原生app)会出先调不起微信应用而且也不会有回调的页面。

解决方案

对于问题三的解决方案,本人亲试有效.。

代码:

需要在webview中添加

webview.setWebViewClient(new WebViewClient() {
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        if (url.startsWith("weixin://wap/pay?")) {
            Intent intent = new Intent();
            intent.setAction(Intent.ACTION_VIEW);
            intent.setData(Uri.parse(url));
            startActivity(intent);
            return true;
        } else {
            //H5微信支付要用,不然说"商家参数格式有误"
            Map<String, String> extraHeaders = new HashMap<String, String>();
            extraHeaders.put("Referer", "商户申请H5时提交的授权域名");
            view.loadUrl(url, extraHeaders);
        }
        return true;
    }
});

需要注意的是这个“”商户申请H5时提交的授权域名“”一定要一致,不然会报错的。这个setWebViewClient相当于一个监听事件。

更新

1、如果对你有帮助的话,记得给个赞赏加关注,鼓励一下。

相关文章
|
23天前
|
移动开发 JavaScript
Vue——H5微信内支付(四)
10月更文挑战第11天
50 2
|
10天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
21天前
|
移动开发 前端开发
|
22天前
|
移动开发 JavaScript
Vue——H5微信内支付(五)
10月更文挑战第12天
30 2
|
24天前
|
移动开发 JavaScript
Vue——H5微信内支付(三)
10月更文挑战第10天
46 1
|
27天前
|
移动开发 JavaScript
Vue——H5微信内支付(二)
10月更文挑战第9天
30 1
|
17天前
|
移动开发
|
20天前
|
Web App开发 移动开发 Android开发
|
25天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
30天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
127 2