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

作者：天景科技苑 | 2024-07-09 23:27:29

踩

虚拟微信支付操作流程

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

文章目录

一、前置条件：开通微短剧类目
二、开通虚拟支付
三、虚拟支付配置
四、虚拟支付代码示例
- 开通VIP
- 账户充值
五、短剧项目uniApp代码开源下载

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

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

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

二、开通虚拟支付

点击功能-虚拟支付
点击【开通】按钮进行协议签署及资料上传，开通新的商户号。开通成功之后会自动开通新的专属虚拟支付商户号
进行协议阅读虚拟支付协议，勾选【我已阅读并同意上述条款】后进入下一步
填写企业的营业执照，提现账户及支付管理员之后提交审核等待即可

三、虚拟支付配置

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

基础配置
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博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/804088