在uniapp中使用unipay实现微信支付

unipay为uniCloud开发者提供了简单、易用、统一的支付能力封装。让开发者无需研究支付宝、微信等支付平台的后端开发、无需为它们编写不同代码,拿来即用,屏蔽差异。
uni-app前端已经封装的全端支付 api uni.requestPayment,现在服务端也封装好了unipay for uniCloud,从此开发者可以极快的完成前后一体的支付业务。
目前已封装 App 端(微信支付和支付宝支付)、微信小程序、支付宝小程序的支付能力。
unipay是开源 sdk,可放心使用。本插件还包含示例工程,配置自己在微信和支付宝申请的相关配置后即可运行。
为了更好的体验支付流程可以在插件市场导入unipay的示例项目快速体验,插件市场 unipay (opens new window)。

1.首先使用uniCloud配置云函数(云函数的创建请参考官网)
请添加图片描述

2.从插件市场导入uni-pay,导入后,右键云函数getOrderInfo管理公共模块,勾选uni-pay
请添加图片描述

3.getOrderInfo函数的配置,记得引入unipay,下面是配置支付的配置信息请添加图片描述

4.在业户逻辑调用云函数获取微信的预订单号等信息

uniCloud.callFunction({
					name: 'getOrderInfo',
					data: {
						openId: this.GetUserInfor.openId,
						mchId: '',//商户号
						key: '',//商户平台key
						orderId: this.orderId,
						timestamp: this.timestamp
					}
				})
				.then(res => {
				//res为微信预订单信息
					console.log('209', res);
					uni.requestPayment({
						// #ifdef APP-PLUS
						provider: selectedProvider, // App端此参数必填,可以通过uni.getProvider获取
						// #endif
						// #ifdef MP-WEIXIN
						...res.result.orderInfo,
						// #endif
						// #ifdef APP-PLUS || MP-ALIPAY
						orderInfo: res.result.orderInfo,
						// #endif
						...res.result.orderInfo,
						success: (success)=>  {
							
							let time = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd hh:MM:ss');
							//支付成功后调用后端api
							this.$api.postInsertWeChatPayInfo({})
								.then(res => {
									console.log(res);
								});
						},
						fail: (err)=>  {
							console.log(err);
							
						}
					});
				})
				.catch(err => {
					console.log(err);
				});
			// wx.requestPayment()
		}

请添加图片描述

  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
对于在uniapp使用微信支付V2,你可以按照以下步骤进行操作: 1. 在uniapp项目的根目录使用命令行安装`uni-pay`插件: ```bash npm install uni-pay --save ``` 2. 在`manifest.json`文件添加以下配置: ```json "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序支付" } } ``` 3. 在需要支付的页面,引入并初始化`uni-pay`插件: ```javascript import uniPay from 'uni-pay' export default { data() { return { payParams: {}, // 支付参数 payProvider: '', // 支付提供商,例如:'wxpay' } }, onReady() { uniPay.init({ provider: this.payProvider, options: { appId: '微信小程序的AppID', mchId: '商户号', apiKey: 'API密钥', }, success: (res) => { // 支付成功回调 console.log('支付成功', res) }, fail: (err) => { // 支付失败回调 console.error('支付失败', err) }, }) }, methods: { // 发起支付 pay() { uniPay.requestPayment({ provider: this.payProvider, orderInfo: this.payParams, success: (res) => { // 支付成功回调 console.log('支付成功', res) }, fail: (err) => { // 支付失败回调 console.error('支付失败', err) }, }) }, }, } ``` 4. 在调用支付接口前,需要先获取支付参数,可以通过与后端服务器交互获取。获取到支付参数后,将其赋值给`payParams`和`payProvider`,然后调用`pay()`方法即可发起支付。 请注意,以上步骤微信支付相关参数(AppID、商户号、API密钥)需要根据你的实际情况进行替换。另外,如果你的uniapp支持多端编译,需要根据当前运行的平台选择不同的支付提供商,如微信小程序使用'wxpay',H5使用'wxpayH5'等。 希望以上信息对你有帮助!如有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值