赞
踩
微信微短剧类目虚拟支付全流程注意事项及相关说明一文搞定,如何开通虚拟支付?如何配置?以及虚拟支付代码
uniApp前端微短剧项目开源分享
开源地址:git开源下载地址
添加微短剧类目,根据官方文档提供相应材料后提交审核
点击功能-虚拟支付
点击【开通】按钮进行协议签署及资料上传,开通新的商户号。开通成功之后会自动开通新的专属虚拟支付商户号
进行协议阅读虚拟支付协议,勾选【我已阅读并同意上述条款】后进入下一步
填写企业的营业执照,提现账户及支付管理员之后提交审核等待即可
官方文档直通车:虚拟支付官方文档
基础配置
AppID(小程序ID):微信小程序ID
OfferID(支付应用IcD):虚拟支付支付应用唯一ID
沙箱AppKey:支付测试环境AppKey
现网AppKey:支付正式环境AppKey
代币配置
代币名称:最少两个字,但实际在开发的时候没用到,我们是从自己的平台设置的
兑换比例:建议选择1:100,没啥原因,就是看着自己账户余额还有那么多钱,得劲儿
注意事项:只有一次机会,保存之后就不能再更改了,后续会和充值后获得的账户余额有关,谨慎对待为妙
道具配置
开发版本:可以从这个位置添加到具,添加成功之后可以使用沙箱环境进行测试
线上版本:项目上线要上线前可以将开发版本的道具发布至线上,他们是一一对应的关系,先有开发版本发布上线后就成了上线版本
道具的所有信息都可以通过接口来实现发布上线
// 虚拟支付开通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')
}
})
},
// 虚拟支付
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')
}
})
},
uniApp前端微短剧项目开源分享
感兴趣的小伙伴可以前往git开源地址进行下载完整代码:git开源下载地址
微短剧项目开源文档请查看下方热门微短剧行业盼盼短剧项目交流QQ群名片扫码加入
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。