H5微信支付、支付宝支付

准备工作

1.绑定域名
登录微信.众平台 –> 公众号设置 –> 功能设置 –> 填写“js接口安全域名”

2.JS-SDK使用:
在页面引入JS文件 :HTTPs://res.wx.qq.com/oPEn/js/jweixin-1.2.0.js
[crayon-5f995452760c7752589320/]
3.配置微信网页授权

官方授权url如下,各参数意义参考: 微信网页授权,或者下方图片

H5微信支付、支付宝支付
参数说明

一、微信支付

1.新建aaa.html,作为授权页面(其实就是一个授权url),授权成功后会根据(redirect_uri)跳转到指定地址,如bbb.html(放在服务器上的bbb.html)

H5微信支付、支付宝支付
image.png

2.在当前bbb.html的url上会有授权后返回的code参数,取出code值作为参数调取后端自定义接口,获取返回值openid以供支付时使用等

3.取当前支付页面的地址(?号以前的),此地址前提在微信商户平台添加好,作为参数调取后端自定义接口,获取微信的返回值来配置wx.config

4.先调取后端自定义接口,获取返回值,再在wx.ready中调 wx.chooseWXPay微信支付

注意:这样就可以支付成功了,支付成功后会跳转自定义的paySuccess.html页面,此方法只是微信支付的思路流程

二、支付宝支付

1.支付宝支付比微信简单多了,也许是后端都配置好了,支付宝支付要在非微信浏览器里面才可以

H5微信支付、支付宝支付
image.png

2.根据后端自定义的接口传相应的参数(比如用户id、手机号、价格、支付方式等),成功后从返回值中取出类似form的表单的地址,这个就是拉起支付宝的东西,将此插入到当前页,打开就可以看到支付宝被拉起了

H5微信支付、支付宝支付
image.png

3.下面就是此页面所有的代码

4哈哈 。。。大功告成

链接:h5微信分享可以参考H5微信分享

未经允许不得转载:一点博客-青梅煮码-共享博客 » H5微信支付、支付宝支付
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏