uni-app：使用HBuilderX引入uni-pay系统并初步使用

大前端 uni-app uni-cloud HBuilderX uni-pay

发布时间 : 2026-03-01 00:00

字数:3.2k 阅读 :

uni-pay的使用

uni-pay的使用

uni-pay的官方文档
uni-pay插件下载
- 客户端需要下载，后台管理也需要下载
- 因为uni-model在客户端，但是所有配置都在后台管理系统
下载uni-pay的官方示例，里面有相关的配置
找到配置，并复制到相应位置
- 复制到admin的uniCloud/cloudfunctions/common/uni-config-center/uni-pay
- 下面的只是快捷键，对应的是/uni_modules/uni-config-center/uniCloud/cloudfunctions/common/uni-config-center/uni-pay)
首先上传uniCloud/cloudfunctions/common/uni-config-center
接着上传uniCloud/cloudfunctions/common/uni-pay

其次上传uniCloud/cloudfunctions/uni-pay-co。上传顺序不能错。否则会报下面错误

上传失败：The common module uni-pay on which the cloud function uni-pay-co depends does not exist or is not uploaded to the cloud.

config.js的配置如下：

主要配置服务空间-支付回调地址，也就是notifyUrl
服务空间
支付回调地址
notifyKey也需要修改，保持32位就可以
配置wxpay--> mp--> appId，去微信小程序平台复制即可。
配置wxpay--> mp--> secret，去微信小程序平台复制即可。
配置wxpay--> mp--> mchId。这个需要去微信支付申请商户号。
配置wxpay--> mp--> v3Key。这个是在微信支付 --> API安全 --> APIv3密钥
配置wxpay--> mp--> appCertPath,appPrivateKeyPath，证书。这个是在微信支付 --> API安全 --> 商户API证书 。默认的是v3版本的证书。v2版本的是商户APIv2证书。这个证书需要下载下来，然后复制到uniCloud/cloudfunctions/common/uni-config-center/uni-pay/wxpay。这个路径不要修改。一共3个文件。
- apiclient_cert.p12
- apiclient_cert.pem
- apiclient_key.pem
配置wxpay--> mp--> wxpayPublicKeyId，公钥。这个是在微信支付 --> API安全 --> 微信支付公钥。下载下来，然后放入uniCloud/cloudfunctions/common/uni-config-center/uni-pay/wxpay。这个路径不要修改。

const fs = require('fs');
const path = require('path')
module.exports = {
    // 统一 - 支付回调地址,格式为 "服务空间ID":"URL化地址"
    "notifyUrl": {
        // 测试环境服务空间-支付回调地址
        "mp-b267e273-19a7-4288-99c7-f6f27f9c5b77": "https://fc-mp-b267e273-19a7-4288-99c7-f6f27f9c5b77.next.bspapp.com/uni-pay-co",
        // 线上环境服务空间-支付回调地址（如果只有一个服务空间，则只需要配置线上环境服务空间即可）
        "mp-499e2a37-0c77-418a-82aa-3e5820ecb057": "https://fc-mp-499e2a37-0c77-418a-82aa-3e5820ecb057.next.bspapp.com/uni-pay-co",
    },
    "notifyKey": "5FB2CD73C7B53918728417C50762E6D4", // 跨云函数通信时的加密密钥，建议手动改下，不要使用默认的密钥，长度保持在32位即可
    // 微信支付相关
    "wxpay": {
        "enable": true, // 是否启用微信支付
        // 微信 - 小程序支付
        "mp": {
            "appId": "", // 小程序的appid
            "secret": "", // 小程序的secret
            "mchId": "", // 商户id
            "key": "", // v2的api key
            "pfx": fs.readFileSync(__dirname + '/wxpay/apiclient_cert.p12'), // v2需要用到的证书
            "v3Key": "", // v3的api key
            "appCertPath": path.join(__dirname, 'wxpay/apiclient_cert.pem'), // v3需要用到的证书
            "appPrivateKeyPath": path.join(__dirname, 'wxpay/apiclient_key.pem'), // v3需要用到的证书
            "wxpayPublicKeyPath": path.join(__dirname, 'wxpay/pub_key.pem'), // v3需要用到的证书 - 微信支付公钥证书（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数）
            "wxpayPublicKeyId": "", // v3需要用到的微信支付公钥ID，值为以PUB_KEY_ID_开头的一串字符串（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数或注释掉此参数）
            "version": 3, // 启用支付的版本 2代表v2版本 3 代表v3版本
        },
        // 微信 - APP支付
        "app": {
            "appId": "", // app开放平台下的应用的appid
            "secret": "", // app开放平台下的应用的secret
            "mchId": "", // 商户id
            "key": "", // v2的api key
            "pfx": fs.readFileSync(__dirname + '/wxpay/apiclient_cert.p12'), // v2需要用到的证书
            "v3Key": "", // v3的api key
            "appCertPath": path.join(__dirname, 'wxpay/apiclient_cert.pem'), // v3需要用到的证书
            "appPrivateKeyPath": path.join(__dirname, 'wxpay/apiclient_key.pem'), // v3需要用到的证书
            "wxpayPublicKeyPath": path.join(__dirname, 'wxpay/pub_key.pem'), // v3需要用到的证书 - 微信支付公钥证书（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数）
            "wxpayPublicKeyId": "", // v3需要用到的微信支付公钥ID，值为以PUB_KEY_ID_开头的一串字符串（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数或注释掉此参数）
            "version": 3, // 启用支付的版本 2代表v2版本 3 代表v3版本
        },
        // 微信 - 扫码支付
        "native": {
            "appId": "", // 可以是小程序或公众号或app开放平台下的应用的任意一个appid
            "secret": "", // secret
            "mchId": "", // 商户id
            "key": "", // v2的api key
            "pfx": fs.readFileSync(__dirname + '/wxpay/apiclient_cert.p12'), // v2需要用到的证书
            "v3Key": "", // v3的api key
            "appCertPath": path.join(__dirname, 'wxpay/apiclient_cert.pem'), // v3需要用到的证书
            "appPrivateKeyPath": path.join(__dirname, 'wxpay/apiclient_key.pem'), // v3需要用到的证书
            "wxpayPublicKeyPath": path.join(__dirname, 'wxpay/pub_key.pem'), // v3需要用到的证书 - 微信支付公钥证书（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数）
            "wxpayPublicKeyId": "", // v3需要用到的微信支付公钥ID，值为以PUB_KEY_ID_开头的一串字符串（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数或注释掉此参数）
            "version": 3, // 启用支付的版本 2代表v2版本 3 代表v3版本
        },
        // 微信 - 公众号支付
        "jsapi": {
            "appId": "", // 公众号的appid
            "secret": "", // 公众号的secret
            "mchId": "", // 商户id
            "key": "", // v2的api key
            "pfx": fs.readFileSync(__dirname + '/wxpay/apiclient_cert.p12'), // v2需要用到的证书
            "v3Key": "", // v3的api key
            "appCertPath": path.join(__dirname, 'wxpay/apiclient_cert.pem'), // v3需要用到的证书
            "appPrivateKeyPath": path.join(__dirname, 'wxpay/apiclient_key.pem'), // v3需要用到的证书
            "wxpayPublicKeyPath": path.join(__dirname, 'wxpay/pub_key.pem'), // v3需要用到的证书 - 微信支付公钥证书（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数）
            "wxpayPublicKeyId": "", // v3需要用到的微信支付公钥ID，值为以PUB_KEY_ID_开头的一串字符串（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数或注释掉此参数）
            "version": 3, // 启用支付的版本 2代表v2版本 3 代表v3版本
        },
        // 微信 - 手机外部浏览器H5支付
        "mweb": {
            "appId": "", // 可以是小程序或公众号或app开放平台下的应用的任意一个appid
            "secret": "", // secret
            "mchId": "", // 商户id
            "key": "", // v2的api key
            "pfx": fs.readFileSync(__dirname + '/wxpay/apiclient_cert.p12'), // v2需要用到的证书
            "v3Key": "", // v3的api key
            "appCertPath": path.join(__dirname, 'wxpay/apiclient_cert.pem'), // v3需要用到的证书
            "appPrivateKeyPath": path.join(__dirname, 'wxpay/apiclient_key.pem'), // v3需要用到的证书
            "wxpayPublicKeyPath": path.join(__dirname, 'wxpay/pub_key.pem'), // v3需要用到的证书 - 微信支付公钥证书（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数）
            "wxpayPublicKeyId": "", // v3需要用到的微信支付公钥ID，值为以PUB_KEY_ID_开头的一串字符串（仅限开启了微信支付公钥的商户，若已开通微信支付平台证书的商户可无视此参数或注释掉此参数）
            "version": 3, // 启用支付的版本 2代表v2版本 3 代表v3版本
            // 场景信息，必填
            "sceneInfo": {
                "h5_info": {
                    "type": "Wap", // 此值固定Wap
                    "wap_url": "", // 你的H5首页地址，必须和你发起支付的页面的域名一致。
                    "wap_name": "", // 你的H5网站名称
                }
            }
        },
    },
    // 支付宝相关（加签方式选证书模式，加密算法选RSA2）
    "alipay": {
        "enable": true, // 是否启用支付宝支付
        // 支付宝 - 小程序支付配置（由于uni-id目前只支持密钥模式，所以小程序支付的配置默认也是密钥模式的配置）
        "mp": {
            "appId": "", // 支付宝小程序appid
            "privateKey": "", // 支付宝商户私钥
            "alipayPublicKey": "", // 支付宝公钥字符串
            "sandbox": false
        },
        // 支付宝 - APP支付配置
        "app": {
            "appId": "", // 支付宝开放平台下应用的appid
            "privateKey": "", // 支付宝商户私钥
            "appCertPath": path.join(__dirname, 'alipay/appCertPublicKey.crt'), // 支付宝商户公钥路径
            "alipayPublicCertPath": path.join(__dirname, 'alipay/alipayCertPublicKey_RSA2.crt'), // 支付宝公钥路径
            "alipayRootCertPath": path.join(__dirname, 'alipay/alipayRootCert.crt'), // 支付宝根证书路径
        },
        // 支付宝 - H5支付配置（包含：网站二维码、手机H5，需申请支付宝当面付接口权限）
        "native": {
            "appId": "", // 支付宝开放平台下应用的appid
            "privateKey": "", // 支付宝商户私钥
            "appCertPath": path.join(__dirname, 'alipay/appCertPublicKey.crt'), // 支付宝商户公钥路径
            "alipayPublicCertPath": path.join(__dirname, 'alipay/alipayCertPublicKey_RSA2.crt'), // 支付宝公钥路径
            "alipayRootCertPath": path.join(__dirname, 'alipay/alipayRootCert.crt'), // 支付宝根证书路径
        }
    },
    // ios内购相关
    "appleiap": {
        // ios内购支付
        "app": {
            "password": "", // App 专用共享密钥，App 专用共享密钥是用于接收此 App 自动续期订阅收据的唯一代码。如果您要将此 App 转让给其他开发者或不想公开主共享密钥，建议使用 App 专用共享密钥。非自动续订场景不需要此参数
            "timeout": 10000, // 请求超时时间，单位：毫秒
            "sandbox": true, // 是否是沙箱环境
        },
    },
    // 微信虚拟支付
    "wxpay-virtual": {
        // 微信 - 小程序支付
        "mp": {
            "appId": "", // 小程序的appid
            "secret": "",
            "mchId": "", // 商户id
            "offerId": "", // 支付应用ID
            "appKey": "", // 现网AppKey（正式环境）
            "sandboxAppKey": "", // 沙箱AppKey
            "rate": 100, // 代币兑换比例，比如1元兑换100代币，那么这里就是100（需要开通虚拟支付的时候也设置成 1 人民币 = 100 代币）
            "token": "", // 微信小程序通信的token，在开发 - 开发管理 - 消息推送 - Token(令牌)
            "encodingAESKey": "", // 必须43位，微信小程序消息加密密钥，在开发 - 开发管理 - 消息推送 - EncodingAESKey(消息加解密密钥)
            "sandbox": false, // 是否是沙箱环境（注意：沙箱环境异步回调可能有延迟，建议直接正式环境测试）
        }
    },
    // 华为支付
    "huawei": {
        // 华为 - 元服务支付
        "mp": {
            "appId": "", // 应用的appId
            "mchId": "", // 商户号
            "mchAuthId": "", // 商户证书编号
            "mchPrivateKey": "", // 商户私钥内容
            "platformPublicKey": "", // 华为支付公钥
            "clientType": "mp-harmony" // 固定 mp-harmony 请勿修改
        },
        // 华为 - APP支付
        "app": {
            "appId": "", // 应用的appId
            "mchId": "", // 商户号
            "mchAuthId": "", // 商户证书编号
            "mchPrivateKey": "", // 商户私钥内容
            "platformPublicKey": "", // 华为支付公钥
            "clientType": "app-harmony" // 固定 app-harmony 请勿修改
        }
    }
}

修改完成之后，再次上传公共模块：uni-config-center，uni-pay，uni-pay-co

在 template 内放一个 uni-pay 组件标签，集成前端

const payRef = ref(null);
<uni-pay ref="payRef"></uni-pay>

创建支付：

// open和createOrder参数是一致的，唯一区别是open会打开收银台，而createOrder不带收银台，直接调用支付。
// open如果只有一种支付方式，比如微信小程序内只能用微信支付，则不会弹收银台，而是直接调用支付。
return payRef.value.createOrder({
            provider: 'wxpay', // 支付供应商 如 wxpay alipay
            total_fee: 1, // 订单总金额，单位为分，100等于1元
            type: 'test', // 订单类型: goods：订单付款 recharge：余额充值付款 等等，可自定义
            order_no: 'test'+Date.now(), // 业务系统订单号 建议控制在20-28位
            description: "测试支付" // 支付描述
        });

删除重复的schema