赞
踩
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 部分
-
- <u-button type="primary" @click="userInfoPayFn">立即缴费</u-button>
-
- // 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 © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。