最强干货系列-小程序调用微信支付问题
目前已知的调用微信支付的方式:
- 通用的方式就是小程序直接发起微信支付就行;
通过小程序访问某支付域名网站实现目标发起微信支付:
小程序使用web-view组件访问目标网站后,目标网站发起微信支付就行。注意:这里有一个最大的坑点,直接通过web-view组件访问是不能发起微信支付的,但是打开调试模式或者不校验合法域名是可以发起的!!等真正上了生产才知道,根本不能发起微信支付!
解决办法:
让目标网站js中检测到当前环境是小程序后,把发起微信支付的必要参数封装好后通过微信小程序那边的sdk把参数请求封装好后跳转到我们小程序这边的目标页面,就可以通过我们的页面发起微信支付了。
注意事项:
能够成功调用微信支付,必须得保证下单的appId和付款时候的appId相同(或者属于同一商户号),否则一切白搭!
针对方式二调用微信支付的解决方案
需要解决的问题:
通过h5访问的形式访问目标支付网站后发起小程序微信支付。
解决方案:
在最终调用统一支付域名下的页面中添加微信小程序调用微信支付业务代码(自己写好后给到目标网页,下面会给出示例),代码将会判定当前访问环境是否为小程序,如果判定为小程序访问环境的话,将会把调用微信支付的参数传递到小程序具体支付页面来发起微信支付,该方案适用于所有小程序调用微信支付,也方便后期扩展更多小程序业务。
解决办法:
- 微信小程序端:
1
2
3
4
5
6
7
8
9
10目录结构
project-name
├── pages
│ ├── index // demo演示首页
│ ├── web-page // h5访问通用页
│ ├── wxpay // 发起微信支付页
├── app.js
├── app.json
├── app.wxss
└── project.config.json // 小程序配置文件
- h5端:
将下面的微信小程序调用微信支付业务代码放入支付发起页面中;

修改微信支付业务代码参数(时间戳、随机串、prepay_id、签名方式、支付签名等);

页面校验一下params参数数据拼接正常就行,后面的小程序这边会做校验;

启动index.html页面作为网站;(也可以直接放到你自己的网站上,这里采用python指令本地化启动模拟网站)
python -m SimpleHTTPServer

测试最终结果
在微信小程序中点击访问目标微信支付页面;

进入微信支付h5页面,校验访问环境是否为微信小程序访问,若是则处理微信支付参数传递跳转微信支付页面;

来到微信支付页面,执行微信支付。
