vk-unicloud 快速开发框架

# 非 uni-app 项目使用支付插件

插件支持非 uni-app 项目中使用，此时需要放弃前端组件 <vk-uni-pay></vk-uni-pay>，直接使用http请求方式请求云函数url化的接口地址，拿到支付参数后直接发起支付，具体操作如下。

# 获取vk-pay云函数的url化地址

进入空间详情页，点击云函数，点击vk-pay云函数的详情按钮，如下图所示。

然后点击复制按钮，如下图所示。这就是云函数url化的接口地址

拿到地址后，通过下面的代码可访问支付接口。

# jquery的ajax请求

假设url化接口地址是 https://xxx.com/http/vk-pay

假设需要请求的云函数路由是 pay/createPayment

# PC扫码支付

$.ajax({
  type: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: JSON.stringify({
    action: "pay/createPayment",
    data: {
      vk_platform: "h5", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      isPC: true, // 是否是电脑扫码支付
      needQRcode: "image", // "image" 代表直接返回二维码图片，true代表返回二维码链接地址
      provider: "alipay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }),
  success: (data) => {
    // 拿到支付参数后自行根据参数发起支付
    console.log("data", data);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 微信小程序支付

$.ajax({
  type: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: JSON.stringify({
    action: "pay/createPayment",
    data: {
      vk_platform: "mp-weixin", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      provider: "wxpay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }),
  success: (data) => {
    // 拿到支付参数后自行根据参数发起支付
    console.log("data", data);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# app支付

$.ajax({
  type: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: JSON.stringify({
    action: "pay/createPayment",
    data: {
      vk_platform: "app-plus", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      provider: "wxpay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }),
  success: (data) => {
    // 拿到支付参数后自行根据参数发起支付
    console.log("data", data);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# axios请求

假设url化接口地址是 https://xxx.com/http/vk-pay

假设需要请求的云函数路由是 pay/createPayment

# PC扫码支付

axios({
  method: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: {
    action: "pay/createPayment",
    data: {
      vk_platform: "h5", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      isPC: true, // 是否是电脑扫码支付
      needQRcode: "image", // "image" 代表直接返回二维码图片，true代表返回二维码链接地址
      provider: "alipay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }
}).then((res) => {
  // 拿到支付参数后自行根据参数发起支付
  console.log("then", res);
})
.catch((err) => {
  console.log("catch", err);
});
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

# 微信小程序支付

axios({
  method: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: {
    action: "pay/createPayment",
    data: {
      vk_platform: "mp-weixin", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      provider: "wxpay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }
}).then((res) => {
  // 拿到支付参数后自行根据参数发起支付
  console.log("then", res);
})
.catch((err) => {
  console.log("catch", err);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# app支付

axios({
  method: 'POST',
  url: "https://xxx.com/http/vk-pay",
  headers:{ 
    'content-type': 'application/json;charset=utf8',
  },
  data: {
    action: "pay/createPayment",
    data: {
      vk_platform: "app-plus", // 对应uniapp编译的平台，如 h5 mp-weixin app-plus等
      provider: "wxpay", // wxpay 微信支付 alipay 支付宝支付，其他值见文档：https://vkdoc.fsq.pub/vk-uni-pay/uniCloud/createPayment.html#params
      out_trade_no: "test202405230001", // 订单号
      total_fee: 1, // 支付金额，单位是分，100 = 1元
      subject: "订单标题", // 订单标题
      type: "recharge" // 支付回调类型
    }
  }
}).then((res) => {
  // 拿到支付参数后自行根据参数发起支付
  console.log("then", res);
})
.catch((err) => {
  console.log("catch", err);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 常见问题

# PC扫码支付成功后，页面上如何知道用户支付成功了？

需要写轮询，每隔2秒请求一次查询支付状态的接口，action地址是 pay/queryPayment，请求参数 (opens new window)

← vk-pay-orders →