logo科技微讯

公众号或小程序开通微信支付

作者:科技微讯
日期:2022-05-08
📝 笔记

由于小程序 iOS 端不支持购买虚拟物品,例如会员、积分等,所以可以通过公众号开通微信支付,引导用户点击公众号菜单或模版消息跳转 H5 完成支付流程,由于公众号和小程序已经绑定到同一个开放平台,可以通过 unionid 识别用户。

同一个企业可以注册多个微信商户号,数量不限制。个体户也可以开通微信支付,验证信息时可以用个人银行卡验证。

以下产品可以开通微信支付:

  • 微信认证的服务号
  • 政府或媒体类订阅号
  • 小程序
  • 企业微信
  • 移动应用
  • 网站应用

微信公众号开通微信支付,涉及两个方面:公众号网页开发、微信支付开发。

微信网页开发

可以使用小程序云开发的「静态网站」托管公众号网页,文档给出了一个例子,可以直接上传到静态网站后台。静态网站可以绑定自定义域名,需要先申请 ssl 证书。

微信网页开发需要用到的资源:

  • 设置“网页授权域名”:意思是这个域名对应的网页将获得用户的授权,以获取用户的信息,获取用户的信息之后,才能知道是哪个微信公众号用户付款了,主要是为了获得用户的 openid 和 unionid,因为后续使用微信支付 jsapi 发起微信支付时,必须附上用户的 openid,文档
  • 设置“业务域名”:设置后,在公众号打开这个域名的网页,就不会出现安全提示等标志;
  • 设置 “JS 接口安全域名”:设置了这个域名后,这个域名对应的网页才可以调用公众号 JS-SDK 中的接口,这个 js-sdk 可以调用很多微信的能力,有点像小程序 API 的子集,但在网页调用而不是在小程序调用;
  • 可以用 React 开发微信公众号网页,执行 npx create-react-app 即可在当前目录创建一个 react app,npm start 运行这个 app,然后在微信开发者工具的网页开发中,输入 localhost:3000 即可预览这个网页。用 React 写代码,写完之后不需要用浏览器预览、调试,而是直接在微信开发者工具预览、调试页面,如果要在真机预览、调试,可以用 ngrok;
  • 开发完成后,可以部署在云开发的“静态网站”功能中,直接上传生成后的静态文件即可。

补充,建议用 vite.js 创建一个 React 应用,而不是用 create-react-app 创建。

微信支付开发

微信支付开发文档。nodejs 第三方封装,注意微信支付没有审核或者控制的第三方工具和库,不能保证它们的安全性和可靠性。

微信支付有多个产品,具体看我写的博客文章。在公众号场景下,页面当然都是直接用微信的内部浏览器打开,所以用 JSAPI 就好了。如果一个页面主要用外部浏览器打开,则用 H5 支付。

  • 在微信商户平台后台绑定公众号的 APPID,公众号会收到绑定通知,公众号侧确认绑定,这样双方就完成了绑定;
  • 在微信商户平台-账户中心-API 安全,配置 API 密钥字符串,以及申请 API 证书;
  • API 密钥、API 证书是针对整个微信商户号有效的,针对每一个 appId,还需要设置“支付授权目录”,其实就是“支付授权域名”,即这些域名对应的网页将获得用户的支付授权,可以拉起微信支付模块,一共可以添加 5 个这样的域名;
  • 微信开发者工具可以开发公众号网页,公众号网页开发也可以使用云开发,但公众号没有自己的云开发,需要小程序使用“环境共享”的方式共享给公众号;
  • 撰写公众号网页,网页需要使用公众号 JS-SDK,关于 UI,可以使用 WeUI 样式库;
  • 在前面完成的公众号网页中调用 wx.chooseWXPay 接口,发起一个微信支付请求,需要给这个接口传入多个参数,而这些参数需要通过微信支付 JSAPI 计算获得,即在后台(例如云函数)通过微信支付 JSAPI 计算相关参数后,返回给前端,前端在 wx.chooseWXPay 接口携带上这些参数发起调用,即可完成支付。
donation赞赏
thumbsup0
thumbsdown0
暂无评论