继续上一篇文章,我们已经注册了企业小程序,并顺利完成了微信认证。 本节我们将开始正式关联微信支付,并将支付功能接入到我们的小程序中。
传送门:《企业微信小程序注册图文详解》 必要条件1:小程序已关联微信商户
1.登录小程序后台,点击关联更多商户账户
2、需要关联商户账户。 单击下面的链接了解更多信息。
复制我们的小程序
然后授权关联我们的微信支付商户账号
授权完成后,我们的小程序上会出现以下信息。 单击确认。
这样我们就可以成功关联微信支付商户账号了
单击上图中的“确认”,然后单击“授权”,如下图所示。
可以看到我们的小程序和微信商户已经成功关联了。
2.激活云开发并绑定微信商户号
1.然后新建一个小程序,启动代码部分。
这里的必须是你关联了微信支付的商户,而且必须是企业小程序。 这里创建项目的时候记得选择不使用云服务,因为使用默认的云开发会创建很多无用的文件。
2. 激活云开发功能
3. 为您的云开发环境命名,可以是英文或拼音。
然后点击确定,等待云开发创建完成。 创建完成后如下。
4.然后点击设置、全局配置,可以看到有微信支付配置。
有的同学这里看不到微信支付配置是因为你的小程序开发工具版本太低。 最好下载最新版本的开发者工具。
5.云开发配置微信商户账号。
添加完成后,还需要在手机上确认授权。
6.手机微信确认
可以看到这里已经绑定了授权。
我们稍后会讨论退款的问题。
这时候我们的准备工作就全部做好了,接下来就要愉快的写代码了。
三、编写云开发支付代码 1、看官方文档。 其实是非常详细的。 接下来我将带您了解一下。
这里也贴出官方链接给大家。
//dev//-sdk-api/open/pay/..html
其实官方已经给我们提供了一个完整的例子。
我们只需要将这段代码复制到我们自己的云函数中即可。
2、创建云功能,进行云开发统一支付
我们首先需要创建云函数的根目录
然后新建一个云函数
然后直接复制官方的例子到我们自己的云函数中
3.将云函数中的信息替换为我们自己的
上面标记的重要的东西一定要替换成你自己的,然后保存更改并部署云功能
4. 编写页面
在.wxml中写一个按钮,点击时调用我们的支付云函数
然后在.js中编写点击事件
这时候我们直接点击支付,看看是否会激活支付。
此时有很多点击。 仔细观察可以发现我们的云开发环境ID还没有初始化。
5.在app.js中配置云开发环境ID
在这里获取环境id
然后在app.js中配置
然后我们点击支付,就可以看到我们已经成功激活支付了。
6.然后我会尝试用手机微信支付。
支付成功后,我们的控制台也会有相应的日志打印。
至此我们就可以在小程序中成功使用微信支付了。 剩下的无非就是让价格和产品名称动态传入即可。
稍后我也会把源码放到网盘里。 有需要的同学可以到我的公众号“编程小石头”回复“云开发付费”获取。