更新记录

1.3.0(2025-12-24) 下载此版本

解决已知问题; 优化托管支付流程; 增加银行卡快捷支付/银行卡转账支付方式示例。

1.2.0(2025-11-14) 下载此版本

新增本地函数, 支持本地加签请求

1.1.0(2025-02-08) 下载此版本

  1. 更换新UI
  2. 解决已知问题
  3. 优化用户体验
查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
√ √ √ √ √ - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ × × × × - × × - × ×

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × √ ×

jeepay-uni-pay 组件使用文档

简介

jeepay-uni-pay 是一个基于 Jeepay 支付系统的 uni-app 组件,支持多种支付方式,包括微信、支付宝等多平台支付,适用于 H5、小程序、App 等多种环境。

组件引入

在页面中引入组件:

<template>
  <!-- 其他页面内容 -->
  <jeepay-uni-pay ref="refPayment" autoFindOrderState />
</template>

<script setup>
import { ref } from 'vue';
const refPayment = ref(null);

const orderInfo = {
  amount: 0.01,
  mchOrderNo: '20230721123456789',
  subject: '测试商品',
  body: '测试商品描述',
  payType: 'TG_PAY',
  channelExtra: {
    userPayType: 'wx',
    invokeType: 'app2lite'
  },
  returnUrl: 'https://www.jeequan.com',
  notifyUrl: 'https://www.jeequan.com'
}
// refPayment.value.submitOrderToPayment(orderInfo)
</script>

组件 Props

属性 类型 默认值 说明
autoFindOrderState Boolean false 是否自动查询订单状态
countdown Number 3 自动查询订单间隔时间(秒)
autoPay Boolean true 是否自动发起支付

主要方法

submitOrderToPayment(orderInfo)

发起支付订单的方法,接收订单信息对象作为参数。

参数说明:

  • amount: 支付金额
  • mchOrderNo: 商户订单号
  • subject: 商品标题
  • body: 商品描述
  • payType: 支付类型,使用 TG_PAY 时需要传递 channelExtra 参数
  • channelExtra: 渠道扩展参数(重要)
  • returnUrl: 前端跳转地址(可选)
  • notifyUrl: 异步通知地址(可选)

findOrder(orderInfo)

查询订单状态的方法。

参数说明:

  • payOrderId: 支付订单号
  • mchOrderNo: 商户订单号
  • reqTime: 请求时间戳

payConfig 配置说明

获取参数请联系计全付官方 https://www.jeequan.com

在使用 jeepay-uni-pay 组件前,需要在项目根目录的 [payConfig.js] 文件中配置支付参数:

const payConfig = {
  payUrl: 'https://pay.jeepay.vip',     // 支付网关地址
  mchNo: '',                  // 商户号
  appId: '',    // 应用ID
  key: '', // 密钥
  currency: 'cny',                        // 币种(暂时只支持人民币)
  version: '1.0',                         // API版本(暂时只支持1.0)
  signType: "MD5",                        // 签名方式(暂时只支持MD5)
}

payType 参数说明

payType 参数决定了支付方式和处理逻辑,以下是各种类型说明:

参数 说明
TG_PAY 托管支付,需要配合 channelExtra 参数使用,支持多种支付场景
WEB_CASHIER Web统一收银台,会返回收银台URL地址,用户在收银台页面选择支付方式
BANK_QUICK 银行快捷支付收银台,跳转到银行快捷支付页面
BANK_TRANSFERCASHIER 银行卡转账收银台,跳转到银行卡转账页面

channelExtra 参数详解

当 payType 为 TG_PAY 时,channelExtra 是必填参数,用于指定支付方式和调起方式。它包含以下两个属性:

参数 类型 必填 取值 说明
userPayType String 是 wx, zfb 支付方式:wx - 微信,zfb - 支付宝
invokeType String 是 app2lite, h52lite, h52jsapi, h52qr, lite2lite 调起方式,具体说明见下表

invokeType 调起方式说明

调起方式 说明 支持的支付方式
app2lite SDK调用方式,返回调起小程序所需参数 wx, zfb
h52lite H5跳小程序支付,返回跳转URL地址 wx, zfb
h52jsapi H5跳支付宝内浏览器打开网页收银台支付,返回跳转URL地址 zfb
h52qr H5跳支付宝内打开当面付收银台支付,返回跳转URL地址 zfb
lite2lite 小程序跳转小程序支付,返回跳转小程序所需参数 wx, zfb

不同调起方式的使用示例

1. App跳转微信小程序

{
  "userPayType": "wx",
  "invokeType": "app2lite"
}

2. App跳转支付宝小程序

{
  "userPayType": "zfb",
  "invokeType": "app2lite"
}

3. H5跳转微信小程序

{
  "userPayType": "wx",
  "invokeType": "h52lite"
}

4. H5跳转支付宝小程序

{
  "userPayType": "zfb",
  "invokeType": "h52lite"
}

5. H5跳转支付宝JSAPI支付

{
  "userPayType": "zfb",
  "invokeType": "h52jsapi"
}

6. H5跳转支付宝当面付

{
  "userPayType": "zfb",
  "invokeType": "h52qr"
}

7. 小程序跳转小程序

{
  "userPayType": "wx",
  "invokeType": "lite2lite"
}

paymentConfig.js 配置说明

[paymentConfig.js]文件集成了支付请求的加签方法,主要功能包括:

  • 参数提取:从订单信息中提取必要的支付参数
  • 参数校验:对必填参数进行校验,确保支付请求的完整性
  • 签名生成:使用 MD5 算法对支付参数进行签名,确保数据传输的安全性
  • 支付请求:向 Jeepay 支付网关发送支付请求
  • 订单查询:向 Jeepay 支付网关发送订单查询请求

加签方法会自动处理以下参数:

  • 金额(amount)
  • 商品标题(subject)
  • 商品描述(body)
  • 商户订单号(mchOrderNo)
  • 支付方式(wayCode)
  • 货币类型(currency)
  • 客户IP(clientIp)
  • 通知地址(notifyUrl)
  • 返回地址(returnUrl)
  • 过期时间(expiredTime)
  • 渠道扩展参数(channelExtra)
  • 请求时间(reqTime)

支付流程说明

计全支付的支付流程包括以下步骤:

  1. 发起支付请求:调用 [submitOrderToPayment]方法,将订单信息和支付参数发送到计全支付网关。

  2. 处理支付返回参数:计全支付网关根据支付类型返回相应的支付参数,这些参数会被传递给 [pay.js] 中的处理函数。

  3. 调起支付方式:根据不同的调起方式,执行对应的支付流程:

    • app转小程序:通过 [appToAliLite] 或 [openWeiChatLiteFromSdk]函数实现App跳转到小程序进行支付。

    • H5转小程序:通过 [openH5Pay] 函数实现H5跳转到小程序进行支付。

    • 小程序转小程序:通过 [openLitePay]函数实现小程序之间跳转进行支付。

  4. 完成支付:用户在相应支付环境中完成支付操作。

  5. 查询订单状态:通过 [findOrder]方法查询支付结果并更新订单状态。

注意事项

  1. 当 payType 为 TG_PAY 时,channelExtra 参数是必填的,用于指定支付方式和调起方式。
  2. channelExtra 参数包含 userPayType 和 invokeType 两个属性,它们共同决定了支付的具体实现方式。
  3. 不同平台(H5、小程序、App)支持的支付方式可能不同,需要使用条件编译来处理。
  4. 支付金额单位为元,内部会自动转换为分。
  5. 需要配置好 payConfig.js 文件中的商户信息。
  6. 订单查询功能需要配合 autoFindOrderState 属性使用,可以自动查询订单状态。
  7. 计全托管支付文档:https://doc.jeequan.com/#/integrate/jqf/guide/402
  8. 计全付官方网站:https://www.jeequan.com

隐私、权限声明

1. 本插件需要申请的系统权限列表:

网络

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

uni云空间

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

无

许可协议

MIT协议