官方微信支付地址
因为之前没怎么接触到微信这一块,所以最近公司有说要接入微信支付这一块。我也就来熟悉熟悉。
首先作为一个开发者,商户什么的你肯定不是,想要成为商户,是需要提交相关资料进行审核。所以这边开发的话是需要指定的商户提供对应的AppID给你,你才能进行开发和接入。
![图片[1]COOY全球资源网-软件资源-干货分享-知识求知如何接入微信支付COOY全球资源网-软件资源-干货分享-知识求知COOY全球资源网](https://www.cooy.cn/wp-content/uploads/2024/01/frc-57f281667cdee6058758f5f594535c1c.png)
接入方式:
官方接入查看地址
![图片[2]COOY全球资源网-软件资源-干货分享-知识求知如何接入微信支付COOY全球资源网-软件资源-干货分享-知识求知COOY全球资源网](https://www.cooy.cn/wp-content/uploads/2024/01/frc-611c5e7b46f2c5a17dd12acf2b4ec21f.png)
上图是官方提供的6种微信支付的接入方式,每种都会有不同的接入方式,下面针对需要的几种方式进行介绍。
还有一种方式是H5嵌套到小程序中去调用微信支付,这种方式会在下面跟大家介绍,主要是通过一个小程序的中间页面进行调用支付和回调
🌊线下场景:🌊
这个其实不用过多介绍,主要是通过商家出示收款码或者让用户扫二维码,进行付款,之所以是线下,意思就是不管你程序员啥事了,所以跳过~~
🌊公众号:🌊
![图片[3]COOY全球资源网-软件资源-干货分享-知识求知如何接入微信支付COOY全球资源网-软件资源-干货分享-知识求知COOY全球资源网](https://www.cooy.cn/wp-content/uploads/2024/01/frc-31ab08d66e200d73f111af333edc4df4.png)
这种方式的意思就是,你打开的页面必须是在微信的浏览器内打开的,通过引入微信的 JS-SDK 可实现微信支付的方法调用,毕竟是公众号,页面肯定是微信的。
开发文档地址
🌊PC网站:🌊
![图片[4]COOY全球资源网-软件资源-干货分享-知识求知如何接入微信支付COOY全球资源网-软件资源-干货分享-知识求知COOY全球资源网](https://www.cooy.cn/wp-content/uploads/2024/01/frc-bfae76d774a88f4c7a8ea0b4a6471dbd.png)
这里的PC网站接入主要是生成二维码方式,需要用户手动扫一扫才能进行付款。两种支付方式,一种是让用户自己输入金额,一种是直接让用户付款多少金额。其实二维码这些都是后端生成给前端的,到时候前端只需要处理下用户支付结果就可以了。
🌊小程序:🌊
![图片[5]COOY全球资源网-软件资源-干货分享-知识求知如何接入微信支付COOY全球资源网-软件资源-干货分享-知识求知COOY全球资源网](https://www.cooy.cn/wp-content/uploads/2024/01/frc-36f27db61ae9def21f3608ff8121c197.png)
开发文档地址
既然是微信小程序自家的东西,肯定不用再引入其他东西了,直接用小程序提供的云开发功能,具体使用方法,可以参考上面的开发文档地址。
🌊H5通过唤醒微信调用支付:🌊
官方文档地址:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_2
微信官方体验链接:https://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微信外浏览器打开。
当然,官方也给出了建议,在app内的话尽量使用app的调用方法,而且要在微信外浏览器打开,具体怎么实现要看项目需求
🌊小程序嵌套H5:🌊
因为通过分析,我们公司目前要实现的就是这种方式,希望能在我H5页面可以直接进行微信支付。
前面有提到PC网站接入支付,H5项目其实也就是属于网站,微信提供的也就2种实现方式,就是扫描二维码,我司虽然没说要用哪种方式,但是我感觉肯定不是这种。
~~肯定不会让用户扫码的😂
我简单的说下实现原理,具体的大家可参考文章 小程序webview内网页实现微信支付 。
1.小程序里嵌套的H5页面,发起支付 (携带相关订单号和金额等信息)
这里的嵌套指的是 web-view 内 src 页面地址路径
2.跳转到小程序的支付页面,调用小程序内的微信支付
估计你会问怎么跳到小程序页面的?
因为之前的H5页面是嵌套在小程序里面的,在对应H5项目里只要引用了微信的js-sdk,就可以通过 wx.miniProgram.navigateTo的方式 跳转到小程序页面
image.png
3.支付完成重新跳回H5页面,H5页面根据小程序返回的URL参数,来处理用户是否支付成功等状态
估计你会问怎么跳回去的?
通过 wx.navigateTo ,重新跳转回去就行了。?后面是你想要拼接的参数
../webview/webview是你嵌套的H5页面文件路径
payOk 为支付状态
wx.navigateTo({
url: '../webview/webview?payOk=true',
})
总结:
H5:1个页面(主要用于支付的发起和结果的接收);
小程序:2个页面(一个专门嵌套H5的页面,一个用来调用支付的页面)
暂无评论内容