uniapp支付大全

最新推荐文章于 2024-05-19 14:58:37 发布
最新推荐文章于 2024-05-19 14:58:37 发布
阅读量1k 收藏 9
点赞数
分类专栏： uniapp 小程序 公众号
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848576/article/details/112859369
版权
小程序 同时被 3 个专栏收录
55 篇文章 3 订阅
订阅专栏
uniapp
38 篇文章 6 订阅
订阅专栏
公众号
9 篇文章 1 订阅
订阅专栏

在这里插入图片描述

H5微信支付（jsAPI）

bug1：H5的jsAPI需要先授权，获取code，才能获取支付参数，在授权时报redirect_uri参数错误

  • url必须是线上地址

  • url需要编码

  • 需要在公众号后台配置网页授权域名
    在这里插入图片描述
    在这里插入图片描述
    bug2:当前页面的URL未注册https://ddcity.brt999.com/h5/

  • 在微信支付商户平台，jsAPI支付配置添加 url：https://ddcity.brt999.com/h5/

app微信支付

bug：支付失败：签名不对应

  • 微信开放平台关联app，所有app可用一个证书，所以可以用一个签名，证书相同同一个手机只能装一个app，签名修改后需要等一会儿再试才可以
  • 微信支付商户平台支付关联app
  • manifest配置AppID和secret

在这里插入图片描述

代码

<template>
	<view class="box">
		<view class="mt-85 text-center size-26">
			<text class="mr-10">支付剩余时间</text>
			<u-count-down :timestamp="time" font-size="26"></u-count-down>
		</view>
		<view class="yellow bold mt-15 text-center">
			<text>￥</text>
			<text class="size-40">{{price}}</text>
		</view>
		<view class="bg-white pt-30 mt-80">
			<view class="size-34 bold plr-36 mb-20">
				支付方式
			</view>
			<u-radio-group v-model="value" class="plr-36" active-color="#ff9900">
				<u-radio name="1" class="w100 bb ptb-30">
					<view class="flex_l">
						<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wx.png" mode=""></image>
						微信支付
					</view>
				</u-radio>
				<!-- #ifdef APP-PLUS -->
				<u-radio name="2" class="w100 ptb-30">
					<view class="flex_l">
						<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/zfb.png" mode=""></image>
						支付宝支付
					</view>
				</u-radio>
				<!-- #endif -->
				<u-radio name="3" class="w100 ptb-30">
					<view class="flex_l">
						<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wallet.png" mode=""></image>
						余额支付
					</view>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="fixed-bottom pb-100">
			<u-button type="warning" @click="pay">确认支付</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				order_id: '',
				price: '',
				time: 0,
				value: 1,
				code: '',
			};
		},
		computed: {
			...mapState(['url'])
		},
		onLoad(option) {
			this.order_id = option.order_id
			this.init()
			// #ifdef H5
			console.log(location.href);
			// 回调回来接收code，然后调取支付
			if (location.href.includes('code')) {
				this.code = location.href.split('?')[1].split('&')[0].split('=')[1]
				this.payAPI()
			} else {
			//url要存起来，不然取消支付重新支付，url就变了
				this.$store.commit('getUrl', encodeURIComponent(location.href))
			}
			// #endif
		},
		methods: {
			init() {
				this.$http('/addons/ddshop/order/info', {
					order_id: this.order_id
				}).then(data => {
					this.price = data.discount_price
					this.time = data.createtime + 15 * 60 - (new Date()).getTime() / 1000
					console.log(this.time);
				})
			},
			pay() {
				// value  1 微信  2 支付宝  3 余额
				// 如果是H5的微信支付，需要先授权，授权回调回来获取code，再调取支付
				if (this.value == 1) {
					// #ifdef H5
					// 每一次都要重新授权获取code，因为code只能使用一次
					location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxaeef47f194907497&redirect_uri=${this.url}&response_type=code&scope=snsapi_base&state=STATE#wechat_re`
					// #endif
					// #ifdef MP-WEIXIN
					let _this = this
					uni.login({
					  provider: 'weixin',
					  success(loginRes) {
					    console.log(loginRes);
							_this.code = loginRes.code
							_this.payAPI()
					  }
					});
					// #endif
					// #ifdef APP-PLUS
					this.payAPI()
					// #endif
				} else {
					this.payAPI()
				}
			},
			payAPI() {
				this.$http('/addons/ddshop/order/pay', {
					order_id: this.order_id,
					type: this.value,
					// #ifdef APP-PLUS
					method: 'app',
					// #endif
					// #ifdef MP-WEIXIN
					method: 'miniapp',
					code: this.code,
					// #endif
					// #ifdef H5
					method: 'mp',
					code: this.code,
					// #endif
				}, "POST").then(data => {
					console.log('支付参数1', data, this.value);
					//{
					//	appid: "wxd5cdb23fa8a8a8a4"
					//	noncestr: "ElHzMeZUqs676yRK"
					//	package: "Sign=WXPay"
					//	partnerid: "1601210852"
					//	prepayid: "wx271544341817098433edb8b12397d20000"
					//	sign: "5E26B16FE8B6995D333F09A44A5C7EC3"
					//	timestamp: "1603784674"
					//}
					// 调取支付接口获取支付参数
					// 1、余额支付直接支付成功
					// 2、微信支付：则判断支付环境，分别走app支付、小程序支付和H5支付
					// 3、支付宝支付：走app支付
					if (this.value == 3) {
						uni.showToast({
							title: '支付成功'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/home/pay-success'
							})
						}, 1000)
					} else if (this.value == 1) {
						// #ifdef APP-PLUS
						console.log(999999);
						let _this = this
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: data, //微信、支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/pay-success'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败，请重新支付',
									icon: 'none'
								})
							}
						});
						// #endif
						// #ifdef MP-WEIXIN
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/pay-success'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败，请重新支付',
									icon: 'none'
								})
							}
						});
						// #endif
						// #ifdef H5
						WeixinJSBridge.invoke(
							'getBrandWCPayRequest', {
								appId: data.appId, //公众号名称，由商户传入
								nonceStr: data.nonceStr, //随机串
								package: data.package,
								signType: data.signType, //微信签名方式：
								timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
								paySign: data.paySign //微信签名
							},
							function(res) {
								if (res.err_msg == "get_brand_wcpay_request:ok") {
									// 使用以上方式判断前端返回,微信团队郑重提示：
									//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
									uni.showToast({
										title: '支付成功'
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '/pages/home/pay-success'
										})
									}, 1000)
								} else {
									uni.showToast({
										title: '支付失败，请重新支付',
										icon: 'none'
									})
								}
							});
						// #endif
					} else if (this.value == 2) {
						// #ifdef APP-PLUS
						let _this = this
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: data, //微信、支付宝订单数据
							success: function(res) {
								console.log('success:' + JSON.stringify(res));
								uni.showToast({
									title: '支付成功'
								})
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/pay-success'
									})
								}, 1000)
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast({
									title: '支付失败，请重新支付',
									icon: 'none'
								})
							}
						});
						// #endif
					}
				})
			},
			radioChange(e) {
				this.value = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-radio {
		display: flex;
		flex-direction: row-reverse;
	}

	/deep/.u-radio-group {
		width: 100% !important;
	}

	/deep/.u-radio__label {
		width: 100%;
	}
</style>
小曲曲
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
uniapp无法使用substr_「uniapp」 慢慢趟雷记~Radio单选组件
weixin_30915487的博客
01-06 230
L 先生：大 boosM 先生：全栈技术一枚最近呢，M 先生上线了一个支付功能，支付功能大家都知道吧，不知道的可以打开某东啊、某团啊，尽情的消费一把就看到了，在支付之前是需要选择支付平台的，什么微信支付啦、银行卡支付啦，不拉不拉的一大堆。对于一个 NB Plus 的全栈 M 先生，首先想到的是使用 单选框(radio)，于是打开 uniapp 的官方文档，使用的是uview-ui，找到 radio...
UNIPAY.AI--系统商30分钟即可快速接入聚合支付
hzchuangjiang的博客
10-18 1098
系统商接入聚合支付痛点，开发、对接、设计成本等因素，决定了传统系统商接入移动支付的门槛很高。 具体如下： 1、开发成本高 交易系统开发涉及支付接口、订单、账务系统等多个模块，开发投入大、门槛高，且后期需要开发团队不断进行维护升级。 2、支付通道多,对接难 直连通道安全稳定，缺少专业的服务商与系统商服务对接；间联通道对接需要技术联调，流程繁琐、操作麻烦，银行一般不愿投入大量资源对接一般规模的系统商。...
uniapp前端实现微信支付（小程序、公众号H5、app）
最新发布
阿Q
05-19 5347
通过uniapp开发一个三端合一的项目，涉及到不同平台（小程序、h5、app）的微信支付方式，完整支付流程，这里为大家简单介绍一下，希望能有所帮助；
uni-app开发过程的一些问题
Jackpot_ABC的博客
11-01 369
/
微信小程序——修改radio组件的大小
热门推荐
袁竹茜
05-29 2万+
radio组件的样式大小太大了，和我的文字大小不匹配，看起来很难看 于是给radio设置了width和 height ，然而并不起作用
Uniapp支付链转二维码
07-31
【标题】"Uniapp支付链转二维码"涉及的是在移动应用开发中，使用Uniapp框架实现将支付链接转化为二维码的功能。这个过程对于提高用户体验、简化支付流程尤其重要，因为用户可以直接扫描二维码完成支付，而无需手动...
uniapp APP端支付宝登录+人脸认证
05-16
- **合规性检查**：在发布前，确保你的应用符合各个平台的审核规则，尤其是对于支付和认证这类敏感功能。 通过以上步骤，开发者可以在uniapp应用中实现支付宝登录和人脸认证功能，为用户提供便捷且安全的登录体验...
uniapp jsapi 微信支付
12-15
uni-app框架下，开发H5，集成微信JS API支付，调用之前需要安装jweixin-module。代码已经封装好，下载就能用
uniapp H5集成微信JS支付
03-26
uni-app框架下，开发H5，集成微信JS API支付，安装指定的，jweixin-module之后调用方法关键代码，搞了一星期，终于都搞明白，很简单，一看就懂了。
uniapp 微信公众号支付demo
11-24
uniapp 微信公众号支付demo
uni-app将radio-group元素分列展示（七）
A_nanda的博客
05-17 458
点检类型:</view></view>--复选框改成下拉列表--><view class="title driverdata">设备类型:
uniapp uView表单校验中 单选框 Radio不管是否添加必填校验都会被校验！
xuelong的博客
09-22 1287
最近项目做一个微信小程序，在开发过程中遇到了一些问题，关于uniapp uView表单校验已经单选框 Radio的bug，记录一下。
自定义添加多列多行radioGroup
Vegetable的博客
12-22 873
通过源码发下RadioGroup继承自LinearLayout，所以他默认只能实现单行或者单列的，要想进行多行多列，只能对其进行改写。 1. 如果不结合其他布局，例如LinearLayout,RelativeLayout。 则只能实现单行多个按钮组，或者单列多个按钮组。  2. 如果结合其他布局， 虽然可以实现多行多列的RadioButton布局，但是，如果不通过一些互斥算法，也无法实现按钮组
uni-app开发微信小程序时u-view自定义样式不生效
郭宝的博客
08-11 2314
在使用uni-app开发微信小程序时，设置原生样式后无效test1.vue文件在chrome浏览器中运行时，样式有效，截图如下：在微信小程序中运行时，样式失效，如下截图：1、使用style和class选择器设置样式无效，只能通过已有的class选择器来设置样式。...
uniapp uview循环子表单验证组件实现
luck332的专栏
04-02 1977
uniapp uview循环子表单验证组件实现,比如果我们最常见的简历功能实现，一个人会多个工作经验。
uniapp循环遍历多个radio
技术不够，加班来凑
03-24 2475
uniapp使用uview 实现表单遍历多个radio 页面代码实现： data中定义radioList 表单进入之后的默认数据回填： 查接口获取数据 然后进行对应字段的赋值 this.radioList.forEach(item => { item.value = this.form[item.text] }) 保存数据的时候，就是提交表单 this.radioList.forEach(item => { this.form[item.text] = item.value }).
redirect_uri 参数错误 公众号H5授权登录原理
u011913330的专栏
10-27 2663
公众号H5授权登录 在微信公众号里获取微信用户信息分两种方式 注意：以下所有操作，都需要再公众号配置网页授权配置域名授权 1.以snsapi_base为scope发起的网页授权 这种方式是静默获取， 使用场景，只能获取到openid，调用微信支付使用，无法获取头像昵称等数据 $wxurl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的APPID&redirect_uri={$url}&respons
uniapp微信支付、支付宝支付、银联支付经验总结
m0_56307415的博客
06-23 6009
uniapp项目开发支付功能
uniapp支付宝支付
08-03
在uniapp中实现支付宝支付的功能，可以通过以下步骤进行操作。首先，需要在移动应用中引入支付宝支付的功能，而使用uniapp框架是一个很好的选择。具体的实现步骤如下： 1. 准备工作：在uniapp项目中，需要进行一些准备工作，包括引入支付宝支付的相关代码和配置。 2. 调用支付宝支付：在uniapp中，可以通过调用支付宝支付的函数来实现支付功能。可以使用以下代码来调起支付宝支付： ``` function callAlipay(orderInfo) { Alipay.pay({ orderStr: orderInfo //支付请求参数字符串 }, function(result) { //支付成功回调函数 uni.showToast({ title: '支付成功', icon: 'success' }); }, function(error) { //支付失败回调函数 uni.showToast({ title: '支付失败' }); }); } ``` 3. 配置支付宝支付：在uniapp的manifest.json文件中，需要进行一些配置来启用支付宝支付功能。具体的配置包括在App模块权限选择中勾选支付权限，在App SDK配置中勾选支付宝支付，并填写支付宝的相关信息。 4. 打包和测试：完成以上配置后，可以进行打包并在真机上进行测试。可以使用uni.getProvider函数来获取支付配置的结果列表。 需要注意的是，以上步骤是基于uniapp框架实现支付宝支付的一般流程，具体的实现细节还需要参考支付宝官方文档和uniapp的相关文档进行配置和开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小曲曲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值