首页 教程 Web前端 uniapp前端实现微信支付(小程序、公众号H5、app)

uniapp前端实现微信支付(小程序、公众号H5、app)

这段时间通过uniapp开发一个三端合一的项目,涉及到不同平台的支付方式,这里为大家简单介绍一下,希望能有所帮助;
阅读: 微信支付文档

一、微信小程序支付

  1. 通过wx.login()获取code、调用后端接口获取openid;

wx.login({success(res){if(res.code){//发起网络请求获取openid,一般是访问后端封装好的接口,也可以通过访问微信官方接口获取 uni.request({url:'后端接口地址,获取openid',method:'GET',success(res){//获取openid:用户真实唯一id进行保存 console.log(res.data.openid)}})}else{ console.log('登录失败!'+ res.errMsg)}}})

  1. 调用后端接口创建订单,获取orderId;

uni.request({url:'后端接口地址,获取订单id',method:'POST',data:{ 传入接口需要的参数,如商品金额,商品个数等 },success(res){ console.log(res.data.orderId)}})

  1. 调用后端接口获取支付核心参数,预支付;

uni.request({url:'后端接口地址,获取支付核心数据',method:'POST',data:{ 传入接口需要的参数,如订单ID,openId等 },success(res){ console.log(res.data)//接口会返回以下核心参数//timeStamp 时间戳//nonceStr 随机字符串//package 统一下单接口返回的 prepay_id 参数值//signType 签名算法//paySign 签名}})

  1. 通过支付核心参数调用wx.requestPayment()发起支付;

//调用微信官方支付接口弹出付款界面,输入密码扣款 wx.requestPayment({ timeStamp,//时间戳 nonceStr,//随机字符串package,//prepay_id signType,//签名算法MD5 paySign,//签名success(res){if(res.errMsg =="requestPayment:ok"){ console.log('支付成功', res)}else{ console.log('支付失败')}},fail(res){ console.log('支付失败', res)}})

二、公众号H5支付

支付方式可以参考两种方式:

  • JSAPI 支付:通过JSAPI下单接口获取到发起支付的必要参数prepay_id,然后使用微信支付提供的前端JS方法调起公众号支付
  1. 在获取订单id、openid后,调用预支付,获取JSAPI核心参数;

uni.request({url:'后端接口地址,获取支付核心数据',method:'POST',data:{ 传入接口需要的参数,如订单ID,openId等 },success(res){//调用下方支付方法 wxpay(res.data) console.log(res.data)//接口会返回以下核心参数//appId 公众号ID//timeStamp 时间戳//nonceStr 随机字符串//package 统一下单接口返回的 prepay_id 参数值//signType 微信签名方式RSA//paySign 微信签名}})

  1. 通过JSAPI核心参数发起支付;

// 检测支付环境中的 WeixinJSBridgefunctionwxpay(data){if(typeof WeixinJSBridge =="undefined"){if(document.addEventListener){ document.addEventListener('WeixinJSBridgeReady',onBridgeReady(data),false);}elseif(document.attachEvent){ document.attachEvent('WeixinJSBridgeReady',onBridgeReady(data)); document.attachEvent('onWeixinJSBridgeReady',onBridgeReady(data));}}else{onBridgeReady(data);}}functiononBridgeReady(data){ WeixinJSBridge.invoke('getBrandWCPayRequest',{// 传入第一步后端接口返回的核心参数"appId": data.appId,//公众号"timeStamp": data.timeStamp,//时间戳"nonceStr": data.nonceStr,//随机串"package": data.package,//prepay_id"signType": data.signType,//微信签名方式RSA"paySign": data.paySign //微信签名},function(res){// 支付成功if(res.err_msg =="get_brand_wcpay_request:ok"){// 使用以上方式判断前端返回,微信团队郑重提示://res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。}// 支付过程中用户取消if(res.err_msg =="get_brand_wcpay_request:cancel"){}// 支付失败if(res.err_msg =="get_brand_wcpay_request:fail"){}/** * 其它 * 1、请检查预支付会话标识prepay_id是否已失效 * 2、请求的appid与下单接口的appid是否一致 * */if(res.err_msg =="调用支付JSAPI缺少参数:total_fee"){}});}

  • 微信公众号的JSSDK中的wx.chooseWXPay: JS-SDK说明文档;注意:目前官方文档取消了chooseWXPay接口,而是推荐JSAPI支付;
  1. 在项目中需要引入jweixin文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js
    或者通过npm i jweixin-module使用jWeixin对象;
  2. 通过config接口注入权限验证配置;

//调用后端接口获取配置参数 uni.request({url:'后端接口地址,获取验证配置',method:'POST',data:{ 传入接口需要的参数,如页面路径url },success({data}){//注入权限验证配置 jWeixin.config({debug:false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。(测试记得关掉)appId: data.appId,// 公众号的唯一标识timestamp: data.timestamp,// 生成签名的时间戳nonceStr: data.nonceStr,// 生成签名的随机串signature: data.signature,// 签名jsApiList:['chooseWXPay'],// JS接口列表})}})

  1. 通过ready接口处理成功验证,调用支付;

jWeixin.ready(function(){// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 jWeixin.chooseWXPay({timestamp: data.timeStamp,package: data.package,nonceStr: data.nonceStr,signType: data.signType,paySign: data.paySign,success:function(res: any){if(res.errMsg =="chooseWXPay:ok"){ console.log('支付成功')}else{ console.log('支付失败')},fail:function(res: any){ console.log('支付失败')},});});

三、app小程序支付

App支付适用于在移动端App中集成微信支付功能的场景。商户App调用微信提供的SDK调用微信支付模块,商户App会跳转到微信中完成支付,支付完后跳回到商户App内,最后展示支付结果。具体操作流程如下(流程与小程序类似):

  1. 登录获取openId后,创建订单获取订单ID;(这里需要注意的是使用uni.login唤起微信登录需要在manifest.json进行相关配置: 链接查看)

//登录 uni.login({"provider":"weixin",success:function(event){// 登录成功,获取openidconst{openid,access_token}= event.authResult //获取用户信息 uni.getUserInfo({provider:'weixin',success:function(info){// 获取用户信息成功, 调用后端接口进行完成登录}})},fail:function(err){// 登录授权失败// err.code是错误码}})//登录成功后在下单时创建订单```javascript uni.request({url:'后端接口地址,获取订单id',method:'POST',data:{ 传入接口需要的参数,如商品金额,商品个数等 },success(res){ console.log(res.data.orderId)}})

  1. 调用后端接口获取支付核心参数,预支付;

uni.request({url:'后端接口地址,获取支付核心数据',method:'POST',data:{ 传入接口需要的参数,如订单ID},success(res){ console.log(res.data)//接口会返回以下核心参数//timeStamp 时间戳//nonceStr 随机字符串//package 统一下单接口返回的 prepay_id 参数值//signType 签名算法//paySign 签名//通过下方api发起支付}})

  1. 调用uni.requestPayment()发起支付:支付平台功能申请 -> manifest.json 里配置支付参数 -> uni-app 里调用 API 进行支付 官网流程阅读

uni.requestPayment({provider:'wxpay',orderInfo: data.orderInfo,//微信、支付宝订单数据 【注意微信的订单信息,键值应该全部是小写,不能采用驼峰命名】nonceStr: data.noncestr,package: data.package,timeStamp: data.timestamp,signType: data.signType,paySign: data.paySign,success:function(res){if(e.errMsg =="requestPayment:ok"){ console.log('支付成功')}else{ console.log('支付失败')}},fail:function(err){ console.log('支付失败:'+JSON.stringify(err));}});

总结

  1. 登录:调用uni.login/wx.login调用微信接口,获取code,调用后端后台获取openid;
  2. 订单:调用后端接口获取订单ID,再调用后端接口传入openid、商品id、商品单价、商品数量等参数获取预支付的重要参数(时间戳timeStamp,随机字符串nonceStr,预支付id package,签名算法signType,签名paySign)
  3. 支付:调用uni/wx.requestPayment微信支付方法,传递5个重要参数,获取支付结果(成功或失败)
  4. H5支付因为无法直接调用微信api,需要通过JSSDK配置后调用对应的接口;

在开发中如果涉及到多端支付,需要通过条件编译处理多端差异,可以参考 官网文档,在实际开发中可以多参考各位大佬的文档找到适合自己项目开发的方法,也欢迎各位大佬讨论、提供建议补充…

评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    【MySQL】用户管理

    【MySQL】用户管理

     服务器/数据库  2个月前  2.18k

    我们推荐使用普通用户对数据的访问。而root作为管理员可以对普通用户对应的权限进行设置和管理。如给张三和李四这样的普通用户权限设定后。就只能操作给你权限的库了。

    Cursor Rules 让开发效率变成10倍速

    Cursor Rules 让开发效率变成10倍速

     服务器/数据库  2个月前  1.23k

    在AI与编程的交汇点上,awesome-cursorrules项目犹如一座灯塔,指引着开发者们驶向更高效、更智能的编程未来。无论你是经验丰富的老手,还是刚入行的新人,这个项目都能为你的编程之旅增添一抹亮色。这些规则文件就像是你私人定制的AI助手,能够根据你的项目需求和个人偏好,精确地调教AI的行为。突然间,你会发现AI不仅能理解Next.js的最佳实践,还能自动应用TypeScript的类型检查,甚至主动提供Tailwind CSS的类名建议。探索新的应用场景,推动AI辅助编程的边界。

    探索Django 5: 从零开始,打造你的第一个Web应用

    探索Django 5: 从零开始,打造你的第一个Web应用

     服务器/数据库  2个月前  1.16k

    Django 是一个开放源代码的 Web 应用程序框架,由 Python 写成。它遵循 MVT(Model-View-Template)的设计模式,旨在帮助开发者高效地构建复杂且功能丰富的 Web 应用程序。随着每个版本的升级,Django 不断演变,提供更多功能和改进,让开发变得更加便捷。《Django 5 Web应用开发实战》集Django架站基础、项目实践、开发经验于一体,是一本从零基础到精通Django Web企业级开发技术的实战指南《Django 5 Web应用开发实战》内容以。

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

    MySQL 的mysql_secure_installation安全脚本执行过程介绍

     服务器/数据库  2个月前  1.09k

    mysql_secure_installation 是 MySQL 提供的一个安全脚本,用于提高数据库服务器的安全性

    【MySQL基础篇】概述及SQL指令:DDL及DML

    【MySQL基础篇】概述及SQL指令:DDL及DML

     服务器/数据库  2个月前  489

    数据库是长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。数据库不仅仅是数据的简单堆积,而是遵循一定的规则和模式进行组织和管理的。数据库中的数据可以包括文本、数字、图像、音频等各种类型的信息。

    Redis中的哨兵(Sentinel)

    Redis中的哨兵(Sentinel)

     服务器/数据库  2个月前  314

    ​ 上篇文章我们讲述了Redis中的主从复制(Redis分布式系统中的主从复制-CSDN博客),本篇文章针对主从复制中的问题引出Redis中的哨兵,希望本篇文章会对你有所帮助。