当前位置:   article > 正文

微信微短剧类目虚拟支付全流程注意事项及相关说明一文搞定_微信小程序短剧项目支付流程

微信小程序短剧项目支付流程

微信微短剧类目虚拟支付全流程注意事项及相关说明一文搞定,如何开通虚拟支付?如何配置?以及虚拟支付代码
uniApp前端微短剧项目开源分享
开源地址:git开源下载地址

一、前置条件:开通微短剧类目

添加微短剧类目,根据官方文档提供相应材料后提交审核

  1. 腾讯审核1-7个工作日,腾讯审核通过之后会自动提交到广电审核,但不会告诉你提交到广电审核了,哎气不气,但是你可以点击服务类目旁边的联系客服去问进度
  2. 广电审核25个工作日左右,相关政策会越收越紧,如原来在腾讯公众平台可以同一主体下申请10个小程序微短剧类目,但就于6月24日开始内部通知已经调整至同一主体下只能申请2个小程序微短剧类目,惊不惊喜,政策是每天都在变,毕竟是一个全新而且是非常火爆的行业,也由于申请过多,就逐步限制了,在审核时长一般情况顺利的话30个自然日能批下来,各地区不一样,有的三四个月都不一定批的下来,需要有心理准备。
  3. 审核通过之后会发站内信通知如下
    在这里插入图片描述
  4. 微短剧类目审核通过之后会同步显示在功能-虚拟支付,这个时候前往开通

二、开通虚拟支付

  1. 点击功能-虚拟支付
    在这里插入图片描述

  2. 点击【开通】按钮进行协议签署及资料上传,开通新的商户号。开通成功之后会自动开通新的专属虚拟支付商户号
    在这里插入图片描述

  3. 进行协议阅读虚拟支付协议,勾选【我已阅读并同意上述条款】后进入下一步
    在这里插入图片描述

  4. 填写企业的营业执照,提现账户及支付管理员之后提交审核等待即可
    在这里插入图片描述

三、虚拟支付配置

官方文档直通车:虚拟支付官方文档

基础配置
AppID(小程序ID):微信小程序ID
OfferID(支付应用IcD):虚拟支付支付应用唯一ID
沙箱AppKey:支付测试环境AppKey
现网AppKey:支付正式环境AppKey

在这里插入图片描述

代币配置
代币名称:最少两个字,但实际在开发的时候没用到,我们是从自己的平台设置的
兑换比例:建议选择1:100,没啥原因,就是看着自己账户余额还有那么多钱,得劲儿
注意事项:只有一次机会,保存之后就不能再更改了,后续会和充值后获得的账户余额有关,谨慎对待为妙

在这里插入图片描述

道具配置
开发版本:可以从这个位置添加到具,添加成功之后可以使用沙箱环境进行测试
线上版本:项目上线要上线前可以将开发版本的道具发布至线上,他们是一一对应的关系,先有开发版本发布上线后就成了上线版本
道具的所有信息都可以通过接口来实现发布上线

在这里插入图片描述

四、虚拟支付代码示例

开通VIP

// 虚拟支付开通VIP代码示例
			async handleToActive(index, item) {
				const userCode = await new Promise((resolve, reject) => {
					this.getWxCode((userCode) => {
						resolve(userCode); // 将 userCode 传递给 Promise 的 resolve 函数
					});
				});
				this.activeIndex = index;
				// 目前只有 >= v2.19.2 的基础库支持该接口,后续将对更多低版本基础库支持该接口。因此建议开发者这样判断:当前用户的基础库版本 >= v2.19.2 时可以直接用 wx.requestVirtualPayment,小于 v2.19.2 时,用 wx.canIUse('requestVirtualPayment') 来判断接口是否可用。
				function compareVersion(_v1, _v2) {
					if (typeof _v1 !== 'string' || typeof _v2 !== 'string') return 0
					const v1 = _v1.split('.')
					const v2 = _v2.split('.')
					const len = Math.max(v1.length, v2.length)
					while (v1.length < len) {
						v1.push('0')
					}
					while (v2.length < len) {
						v2.push('0')
					}
					for (let i = 0; i < len; i++) {
						const num1 = parseInt(v1[i], 10)
						const num2 = parseInt(v2[i], 10)

						if (num1 > num2) {
							return 1
						} else if (num1 < num2) {
							return -1
						}
					}
					return 0
				}

				const SDKVersion = wx.getSystemInfoSync().SDKVersion
				const self = this; // 在外部保存正确的上下文
				var data = {
					buyQuantity: 1, //购买数量
					goodsPrice: item.packageMoney, //充值金额
					productId: item.id, //充值会员id 即是套餐id
					memberId: uni.getStorageSync('id'), //会员id
					sysOrgCode: uni.getStorageSync('sysOrgCode'), //小程序id
					tenantId: this.tenantId, //运营主体公司id
					code: userCode
				}
				this.$request('virtualPayment.virtualPaymentVip', data).then(res => {
					console.log('充值会员', res)
					if (compareVersion(SDKVersion, '2.19.2') >= 0 || wx.canIUse('requestVirtualPayment')) {
						wx.requestVirtualPayment({
							signData: JSON.stringify(res.result.signData),
							// signData: JSON.stringify({
							// 	offerId: '123', //在米大师侧申请的应用 id, mp-支付基础配置中的offerid
							// 	buyQuantity: 1, //购买数量
							// 	env: 1, //环境配置, 0 米大师正式环境, 1 米大师沙箱环境, 默认为 0
							// 	currencyType: 'CNY', //人民币
							// 	productId: 'testproductId', //道具ID
							// 	goodsPrice: 10, //道具单价(分)
							// 	outTradeNo: 'xxxxxx', //业务订单号
							// 	attach: 'testdata', //透传数据, 发货通知时会透传给开发者
							// }),
							paySig: res.result.paySig, //支付签名
							signature: res.result.signature, // 用户态签名
							mode: res.result.mode, //支付类型 道具直购:short_series_goods	代币充值:short_series_coin	
							success() {
								console.log('会员开通成功,准备支付回调', res)
								console.log('会员开通成功,准备支付回调', res.result.signData.outTradeNo)
								// return
								// const outTradeNo = res.result.signData.outTradeNo
								var dataToSend = {
								    attach: res.result.signData.attach,
								    buyQuantity: res.result.signData.buyQuantity,
								    currencyType: res.result.signData.currencyType,
								    env: res.result.signData.env,
								    goodsPrice: res.result.signData.goodsPrice,
								    offerId: res.result.signData.offerId,
								    outTradeNo: res.result.signData.outTradeNo,
								    productId: res.result.signData.productId
								};
								// 支付成功回调
								self.$request('virtualPayment.virtualPaymentNotifyUrl',dataToSend).then(res => {
									console.log('支付回调数据', res.code)
									if (res.success) {
										uni.showToast({
											icon: 'success',
											title: '会员开通成功'
										})
									}else{
										uni.showToast({
											icon: 'error',
											title: '支付失败,请联系管理员'
										})
									}
								})
								// 刷新列表
							},
							fail({
								errMsg,
								errCode
							}) {
								console.error(errMsg, errCode)
								uni.showToast({
									icon: 'error',
									title: '支付取消'
								})
							},
						})
					} else {
						console.log('当前用户的客户端版本不支持 wx.requestVirtualPayment')
					}
				})
			},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110

账户充值

// 虚拟支付
			async handleToActive(index, item) {
				const userCode = await new Promise((resolve, reject) => {
					this.getWxCode((userCode) => {
						resolve(userCode); // 将 userCode 传递给 Promise 的 resolve 函数
					});
				});
				this.activeIndex = index;
				// 目前只有 >= v2.19.2 的基础库支持该接口,后续将对更多低版本基础库支持该接口。因此建议开发者这样判断:当前用户的基础库版本 >= v2.19.2 时可以直接用 wx.requestVirtualPayment,小于 v2.19.2 时,用 wx.canIUse('requestVirtualPayment') 来判断接口是否可用。
				function compareVersion(_v1, _v2) {
					if (typeof _v1 !== 'string' || typeof _v2 !== 'string') return 0
					const v1 = _v1.split('.')
					const v2 = _v2.split('.')
					const len = Math.max(v1.length, v2.length)
					while (v1.length < len) {
						v1.push('0')
					}
					while (v2.length < len) {
						v2.push('0')
					}
					for (let i = 0; i < len; i++) {
						const num1 = parseInt(v1[i], 10)
						const num2 = parseInt(v2[i], 10)
			
						if (num1 > num2) {
							return 1
						} else if (num1 < num2) {
							return -1
						}
					}
					return 0
				}
			
				const SDKVersion = wx.getSystemInfoSync().SDKVersion
				const self = this; // 在外部保存正确的上下文
				var data = {
					// buyQuantity: item.packageMoney, //购买数量
					// buyQuantity: 5, //购买数量
					goodsPrice: item.packageMoney, //充值金额
					productId: item.id, //即是套餐id
					memberId: uni.getStorageSync('id'), //会员id
					sysOrgCode: uni.getStorageSync('sysOrgCode'), //小程序id
					tenantId: this.tenantId, //运营主体公司id
					code: userCode
				}
				this.$request('virtualPayment.virtualPaymentPackage', data).then(res => {
					console.log('充值会员', res)
					if (compareVersion(SDKVersion, '2.19.2') >= 0 || wx.canIUse('requestVirtualPayment')) {
						wx.requestVirtualPayment({
							signData: JSON.stringify(res.result.signData),
							// signData: JSON.stringify({
							// 	offerId: '123', //在米大师侧申请的应用 id, mp-支付基础配置中的offerid
							// 	buyQuantity: 1, //购买数量
							// 	env: 1, //环境配置, 0 米大师正式环境, 1 米大师沙箱环境, 默认为 0
							// 	currencyType: 'CNY', //人民币
							// 	productId: 'testproductId', //道具ID
							// 	goodsPrice: 10, //道具单价(分)
							// 	outTradeNo: 'xxxxxx', //业务订单号
							// 	attach: 'testdata', //透传数据, 发货通知时会透传给开发者
							// }),
							paySig: res.result.paySig, //支付签名
							signature: res.result.signature, // 用户态签名
							mode: res.result.mode, //支付类型 道具直购:short_series_goods	代币充值:short_series_coin	
							success() {
								console.log('会员开通成功,准备支付回调', res)
								console.log('会员开通成功,准备支付回调', res.result.signData.outTradeNo)
								// return
								// const outTradeNo = res.result.signData.outTradeNo
								var dataToSend = {
								    attach: res.result.signData.attach,
								    buyQuantity: res.result.signData.buyQuantity,
								    currencyType: res.result.signData.currencyType,
								    env: res.result.signData.env,
								    goodsPrice: res.result.signData.goodsPrice,
								    offerId: res.result.signData.offerId,
								    outTradeNo: res.result.signData.outTradeNo,
								    productId: res.result.signData.productId
								};
								// 支付成功回调
								self.$request('virtualPayment.virtualPaymentNotifyUrl',dataToSend).then(res => {
									console.log('支付回调数据', res.code)
									if (res.success) {
										uni.showToast({
											icon: 'success',
											title: '充值成功'
										})
									}else{
										uni.showToast({
											icon: 'error',
											title: '支付失败,请联系管理员'
										})
									}
								})
								// 刷新列表
							},
							fail({
								errMsg,
								errCode
							}) {
								console.error(errMsg, errCode)
								uni.showToast({
									icon: 'error',
									title: '支付取消'
								})
							},
						})
					} else {
						console.log('当前用户的客户端版本不支持 wx.requestVirtualPayment')
					}
				})
			},
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111

五、短剧项目uniApp代码开源下载

uniApp前端微短剧项目开源分享
感兴趣的小伙伴可以前往git开源地址进行下载完整代码:git开源下载地址
微短剧项目开源文档请查看下方热门微短剧行业盼盼短剧项目交流QQ群名片扫码加入

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号