前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序内嵌webview实现支付

小程序内嵌webview实现支付

作者头像
青年码农
发布2022-05-31 09:39:57
3.3K0
发布2022-05-31 09:39:57
举报
文章被收录于专栏:青年码农青年码农

目前的一个小程序项目需要把客户之前的h5页面嵌入到现在的小程序中,并且之前的支付功能要正常。小程序提供了webview开放能力供我们使用,但是不允许在webview直接调起微信支付。因此只能另辟蹊径。我们今天来讲一讲。在小程序的webview里实现微信支付功能。

在webview中不能支付,那只能把webview嵌入h5页面的支付挪到小程序中,也就是把支付时的参数传给小程序,小程序调起原生支付,这里面有两种情况,一种是同一主体的,另外一种是非同主体。

1.同主体

适用场景:同一主体下H5页面

前置条件:商户号已和小程序绑定

流程:H5内获取支付必须参数,传递给小程序,小程序内调用支付

2.非同一主体

适用场景:第三方商品

前置条件:商户号已和小程序绑定

原理:由于第三方商品是内嵌第三方页面,需要传递当前小程序appid,结合第三方商户号等信息,调用微信统一下单接口,返回支付必须参数。小程序内发起支付。

接下来就是代码实现,webview中src中配置网页链接,参数的话,通过get方式传递

代码语言:javascript
复制
<web-view src="xxx.com?name='zhangsan'"></web-view>

h5页面可以直接在url中获取到,这里就不过多解释。拿到参数后可以处理其他逻辑,重点(需要后端配合),生成的支付参数要用小程序的方式,参数格式如下

代码语言:javascript
复制
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',

拿到参数后,只需要在重新打开小程序页面即可,打开方式

代码语言:javascript
复制
let url = "../payPage/index?payParam="encodeURIComponent(JSON.stringify(payParam));
wx.miniProgram.navigateTo({
  url: url
});

保险一点,我们用 encodeURIComponent 函数编码,通过这种方式,可以打开小程序,只需要在小程序对应页面中,接收参数,调用支付即可。

注意:记得在小程序页面用 decodeURIComponent 解码

非同一主体流程一样,只不过在用webview的时候,把当前小程序的appid一同传过去,生成的支付参数要用传递过去的appid生成,这样才能在当前小程序支付。其他的也不多说,这都是一步一步调通并上线的项目,如果有不懂的可以留言。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.同主体
  • 2.非同一主体
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档