设为首页收藏本站
开启辅助访问

UniApp H5联调 微信支付/支付宝支付(带详细注释)

 您所在的位置：网站首页 › 公众号支付流程截图 › UniApp H5联调 微信支付/支付宝支付(带详细注释)

UniApp H5联调 微信支付/支付宝支付(带详细注释)

2024-07-10 01:00| 来源: 网络整理| 查看: 265

支付宝支付

1.首先要在HBuilder X 找到 manifest.json  找到App 模块配置 把Payment（支付） 勾选上

2. 因为我做的是H5, 调用支付宝支付的时候, 是通过后端返回的二进制的数据, 前端通过Vue-qrcode 转译成二维码

3. 然后因为这个二维码是微信跟支付宝都可以扫描的, 我们也通常把这个叫做融合支付, 详细的就是说 通过支付宝扫描是直接进入支付宝的环境,通过微信扫描是进入的微信的环境

4 .首先支付宝支付的话,一些基础的数据都是后端给咱们前端返回的

5.  http://192.168.3.63:8080/#/pages/ParkingFee/ParkingFee?app_id=902100013xxxxx1646&source=alipay_wallet&scope=auth_base&state=ZmZjZDk3MDI2OGY2NDY1xxxxQ5NTcxMTdlYzNlYzU%3D&auth_code=3855fa60c6d749219f111b8945xxxX97   这一串是后端给我返回的数据, 前端用到的数据也就没几个, 我来给大家说一下是什么意思

6. http://192.168.3.63:8080/#/pages/ParkingFee/ParkingFee  这个是我页面的路径

7. app_id=902100013xxxxx646   app_id就是获取支付宝授权的唯一标识

8.state=ZmZjZDk3MDI2OGY2xxxMDljNmQ5NTcxMTdlYzNlYzU%3D   商家自定义参数

9.auth_code=3855fa60c6d749219f111bxxxxxx97   用户信息授权的信息

// 首先在onLoad 中接收扫码过后跳转的数据 onLoad(options) { // 将传递过来的支付信息存储到当前实例的alipayInfo属性中 this.alipayInfo = options; // 判断当前用户代理是否为支付宝 if (this.userAgent.indexOf('alipay') !== -1) { // 当用户代理为支付宝时，解析state参数 const encodedString = this.alipayInfo.state; // 转译Base64 if (encodedString) { this.randomId = atob(encodedString); } else { return; // 如果state参数不存在，直接返回 } // 调用支付函数，传入支付宝的app_id和auth_code this.paymentFn(this.alipayInfo.app_id, this.alipayInfo.auth_code); } // 调用获取支付订单信息函数，传入randomId this.getPayOrderInfoFn(this.randomId); } export default { data() { return { userAgent, type: 1, // 订单详细 info: {}, // 支付信息 alipayInfo: {}, // 支付宝token access_token: "", user_id: "", // 支付宝交易码 tradeNO: "", // 订单id randomId: '', }; },

// 首先获取该条订单的信息数据 getPayOrderInfoFn(randomId) { // 调用后端接口 getPayOrderInfo(randomId).then((res) => { this.info = res.data }) } // 获取支付宝授权 paymentFn(app_id, auth_code) { userpay(app_id, auth_code).then((res) => { // 注意这里需要转一下格式 const parsedResponse = JSON.parse(res); const oauthResponse = parsedResponse.alipay_system_oauth_token_response; // 从中取出 access_token 跟 user_id // 想拉起支付宝收银台这两个是必须要有的(详细看支付宝开发文档) this.access_token = oauthResponse.access_token; this.user_id = oauthResponse.user_id; }) }

10. 现在支付字段已经都准备好了,下面开始调用支付宝收银台

// html 部分 立即缴费 // Js 部分 userInfoPayFn() { // 判断是否在支付宝浏览器 if (userAgent.indexOf('alipay') !== -1) { let data = { userId: this.user_id, // 用户id openId: this.user_id, // 用户id topUpAmount: this.info.paycharge, // 支付金额 payType: 'ALIPAYCLIENT', // 支付类型 buyerLogonId: this.user_id, // 用户id orderNo: this.info.id, // 订单号 appAuthToken: this.access_token // 后端返回的token } // 获取支付宝交易码 userInfoPay(data).then((res)=> { // 还是同样的方法 需要转换格式 const parsedResponse = JSON.parse(res.data); const oauthResponse = parsedResponse.alipay_trade_create_response; // 40004 这是支付宝官方定义的失败code码 if (oauthResponse.code == 40004) { uni.showToast({ title: `${oauthResponse.sub_msg}`, icon: 'none', //如果要纯文本，不要icon，将值设为'none' duration: 2000 //持续时间为 2秒 }) } // 拉起支付宝收银台 trade_no = 支付宝交易号 this.callAlipay(oauthResponse.trade_no); }) } }, // 拉取支付宝收银台 callAlipay(id) { // 判断是否存在支付宝的JSBridge if (window.AlipayJSBridge) { // 调用支付宝客户端接口，执行支付操作 AlipayJSBridge.call('tradePay', { tradeNO: id }, function(result) { if (result.resultCode === '9000') { // 支付成功 uni.$u.toast('支付成功！'); setTimeout(() => { uni.reLaunch({ url: '/pages/success/success' }); }, 500); } else { // 支付失败 uni.$u.toast('支付失败'); setTimeout(() => { uni.reLaunch({ url: '/pages/fail/fail' }); }, 500); } }); } else { // 如果支付宝的JSBridge尚未准备好，在文档中添加AlipayJSBridgeReady事件监听器 document.addEventListener('AlipayJSBridgeReady', () => { // 准备就绪后再次调用支付函数，传入支付数据paymentData this.callAlipay(paymentData); }); } }

11. 说到这里支付宝支付 已经说完了, 支付宝支付前端可以跟后端调试的话得在支付宝沙箱环境下调试

 微信支付

1. .首先要在HBuilder X 找到 manifest.json 把Payment支付勾上 还有就是一个 appid 需要后台给你.

2. 要调后端的预生成 订单 信息接口 去获取订单信息

3. weix.js 组件

// weix.js // 首先尝试从本地存储中获取，如果不存在则尝试从URL参数中获取code，如果没有code则进行微信授权跳转，最终获取openId。获取过程中使用了getOpenIdBycode接口来获取openId。 import { getOpenIdBycode } from "@/api/mobileCharging.js"; export default { data() { return { openId: "", appId: "" }; }, mounted() { // 获取本地存储的openId和appId let openId = uni.getStorageSync('wx_openid'); let appId = uni.getStorageSync('wx_appId'); console.log('openId', openId); if (openId && appId) { // 如果本地存储中已经存在openId和appId，则直接使用 this.openId = openId; this.appId = appId; return true; } // 如果本地存储中不存在openId和appId，则尝试从URL参数中获取code let code = this.getUrlKey('code'); if (!code) { // 如果URL参数中没有code，则进行微信授权跳转获取code this.appId = 'wx0b3c40b8569affa2'; // 替换成你的公众号的AppID uni.setStorageSync('wx_appId', this.appId); let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appId}&redirect_uri=` + encodeURIComponent(location.href) + "&response_type=code&scope=snsapi_base&state=123#wechat_redirect"; location.href = url; } else { // 如果从URL参数中获取到了code，则调用接口获取openId getOpenIdBycode(code).then(res => { this.openId = res.data.openId; uni.setStorageSync('wx_openid', res.data.openId); }); } }, methods: { getUrlKey(name) { // 辅助函数，从URL中获取指定名称的参数值 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; } } };

4. 主页面

// 首先我是引入了一个组件 (获取微信的openId和appId) import weix from "@/common/weix.js"; // 这一行从浏览器中获取 userAgent 字符串 userAgent 字符串包含有关用户浏览器 设备和操作系统的信息 通过转换为小写 可以更容易地进行大小写不敏感的检查 const userAgent = navigator.userAgent.toLowerCase(); // 插件 npm i jweixin-module --save const wx = require('jweixin-module'); export default { data() { return { userAgent, // 订单详细 info: {}, // 订单id randomId: '', } } }, mixins: userAgent.indexOf('micromessenger') !== -1 ? [weix] : [], // 首先在onLoad 中接收扫码过后跳转的数据 onLoad(options) { // 将传递过来的支付信息存储到当前实例的alipayInfo属性中 this.alipayInfo = options; // 判断当前用户代理是否为微信 if (this.userAgent.indexOf('micromessenger') !== -1) { // 订单id 来获取该条订单的全部数据 this.randomId = this.alipayInfo.randomId; } // 调用获取支付订单信息函数，传入randomId this.getPayOrderInfoFn(this.randomId); }, methods: { // 首先获取该条订单的信息数据 getPayOrderInfoFn(randomId) { // 调用后端接口 getPayOrderInfo(randomId).then((res) => { this.info = res.data }) }, // 点击缴费 userInfoPayFn() { // 获取用户的 User Agent 字符串 const userAgent = navigator.userAgent.toLowerCase(); // 判断是否在微信浏览器 if (userAgent.indexOf('micromessenger') !== -1) { console.log('在微信浏览器'); // 构建支付所需的参数对象 let data = { userId: this.openId, // 用户id openId: this.openId, // 用户id topUpAmount: this.info.paycharge, // 支付金额 payType: 'MICROMESSENGER', // 支付类型 buyerLogonId: this.openId, // 用户id tradeType: 0, // 停车缴费/月卡 orderNo: this.info.id, // 订单号 // appAuthToken: this.access_token // 后端返回的token } // 打印微信支付参数到控制台 console.log('微信支付参数', data); // 获取微信支付信息 userInfoPay(data).then((res) => { // 解析后端返回的支付参数 let payParams = JSON.parse(res.data) // 配置微信支付参数 wx.config({ debug: false, appId: 'wx0b3c40b8569affa2', // 公众号ID // appId: uni.getAppBaseInfo().host.appId, // 公众号ID timestamp: payParams.timestamp, // 时间戳，自1970年以来的秒数 nonceStr: payParams.nonceStr, // 随机串 signature: payParams.sign, // 微信签名方式 jsApiList: ['chooseWXPay'] }); // 初始化微信支付 wx.ready(() => { // 在这里调用微信支付接口 this.callWechatPay(payParams); }); }) } }, // 拉取微信收银台 callWechatPay(params) { // 调用微信支付接口 wx.chooseWXPay({ timestamp: params.timeStamp, // 时间戳 nonceStr: params.nonceStr, // 随机串 package: params.package, // 订单详情扩展字符串 signType: 'MD5', // 签名方式 paySign: params.sign, // 签名 success: function(res) { // 支付成功后的回调函数 console.log('Payment succeeded', res); uni.$u.toast('支付成功！') setTimeout(() => { uni.reLaunch({ url: '/pages/success/success' }) }, 500) }, fail: function(res) { // 支付失败后的回调函数 console.error('Payment failed', res); uni.$u.toast('支付失败') setTimeout(() => { uni.reLaunch({ url: '/pages/fail/fail' }) }, 500) } }); }, }

总结:  这是支付宝跟 微信支付 的全部流程,我写的也有不足的地方,但是对接支付完全够用了,望大家采纳!



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3