更新记录
1.1.1(2026-05-12)
更新插件信息
1.1.0(2026-05-09)
更新插件信息
1.0.9(2026-02-24)
修复已知问题
查看更多平台兼容性
uni-app(4.36)
| Vue2 | Vue2插件版本 | Vue3 | Vue3插件版本 | Chrome | Safari | app-vue | app-vue插件版本 | app-nvue | app-nvue插件版本 | Android | Android插件版本 | iOS | iOS插件版本 | 鸿蒙 | 鸿蒙插件版本 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| √ | 1.0.0 | √ | 1.0.0 | × | × | √ | 1.0.0 | √ | 1.0.0 | 5.0 | 1.0.0 | 12 | 1.0.0 | 12.0 | 1.0.0 |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 小红书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| × | × | × | × | × | × | × | × | × | × | × | × |
uni-app x(4.36)
| Chrome | Safari | Android | Android插件版本 | iOS | iOS插件版本 | 鸿蒙 | 鸿蒙插件版本 | 微信小程序 |
|---|---|---|---|---|---|---|---|---|
| × | × | 5.0 | 1.0.0 | 12 | 1.0.0 | 12.0 | 1.0.0 | × |
tt-alipay-pro
🚀 完整版支付宝SDK插件,为 uni-app x & uni-app 提供支付宝授权登录和支付解决方案
📱 支持平台:uni-app x (TypeScript) 和 uni-app (JavaScript)
🎉 专业版:专为需要支付宝支付功能的项目设计,与官方支付宝支付插件完美兼容!
📖 目录
功能支持矩阵
| 功能 | iOS | Android | HarmonyOS |
|---|---|---|---|
| 支付宝授权登录 | ✅ 完整版 SDK | ✅ 完整版 SDK | ✅ 极简版 SDK* |
| 支付宝支付功能 | ✅ | ✅ | ✅ |
* 鸿蒙端说明:因当前支付宝在 HarmonyOS 上不提供与 iOS/Android 相同的「完整版 App 授权」能力,本插件在鸿蒙上授权登录实际走的是极简版 OAuth(PURE_OAUTH_SDK)链路,与 authweb.alipay.com 授权页及官方「极简版」文档一致,不是 alipays://platformapi/startapp 那一套参数。调用 login 时 params 必须按极简版规则拼接(见下文「鸿蒙极简授权登录」),若误用完整版 URL,授权会失败。
📚 推荐阅读
- iOS / Android(完整版):支付宝完整版授权使用说明、完整版授权请求参数和返回说明
- HarmonyOS(极简版,与插件实现一致):极简版授权说明、极简版授权请求参数
- App 支付(
orderString/alipay.trade.app.pay,服务端加签):App 支付 · 产品与接口说明、App 支付 · 接入准备与开发、App 支付 · 请求参数与加签
🚨 重要提示
⚠️ 必须使用自定义基座运行,否则无法找到插件方法
环境配置
前置条件
- 在支付宝开放平台申请移动应用
- 获取
AppID - 配置应用包名和签名
Android平台配置
✅ 无需额外配置:Android 平台无需修改 AndroidManifest.xml 文件,插件已自动处理相关配置。
HarmonyOS平台配置
⚠️ 重要授权说明:
- uni-app 项目: 由于官方目前不支持试用以及普通授权,建议通过示例中的 uni-app x 项目测通后购买源码授权使用
- uni-app x 项目: 可直接使用
配置项目module.json5
在项目根目录的 harmony-configs/entry/src/main/module.json5 文件中添加支付宝相关配置:
{
"module": {
"name": "entry",
"type": "entry",
"description": "$string:module_desc",
"mainElement": "EntryAbility",
"deviceTypes": [
"phone",
"tablet",
"2in1"
],
"deliveryWithInstall": true,
"installationFree": false,
"pages": "$profile:main_pages",
"querySchemes": [
"apmqpdispatch" // 支付宝回调scheme,必须添加
],
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:layered_image",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
]
}
],
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
}
重要说明:
- 必须在
querySchemes中添加"apmqpdispatch",这是支付宝回调的必要配置 - 确保网络权限已正确配置
- 支付宝授权通过系统服务调用,需要正确的 scheme 配置
- HarmonyOS 端授权登录为极简版(
PURE_OAUTH_SDK):与 iOS/Android 的完整版login入参不同,请务必阅读下文「鸿蒙极简授权登录」并按 极简版授权说明、极简版授权请求参数 拼接params - HarmonyOS 平台仅支持上述极简授权登录,不支持完整版里的电子发票、代扣等其它授权形态(与支付宝鸿蒙 SDK 能力一致)
iOS平台配置
配置插件Info.plist
直接修改插件根目录的 uni_modules/tt-alipay-pro/utssdk/app-ios/Info.plist 文件:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>alipay</string>
<key>CFBundleURLSchemes</key>
<array>
<!-- 建议设置为 ali + appid的md5值,确保唯一性 -->
<string>tt-alipay-pro</string>
</array>
</dict>
</array>
</dict>
</plist>
重要说明:
- 将
tt-alipay-pro替换为您的实际scheme - 建议使用
ali+appid的md5值作为scheme,确保唯一性 - scheme必须与代码中使用的完全一致
- 确保在支付宝开放平台配置中保持一致
快速开始
1. 导入插件
uni-app x 平台(推荐使用 Composition API)
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
onMounted(() => {
// 获取支付宝SDK实例
alipayImpl.value = alipay.getTTAliOpenSDK();
});
onUnmounted(() => {
alipayImpl.value = null;
});
return {
alipayImpl
};
}
}
uni-app x 平台(Options API)
import * as alipay from "@/uni_modules/tt-alipay-pro";
export default {
data() {
return {
alipayImpl: null as alipay.TTAliOpenSDK | null,
}
},
onLoad() {
// 初始化支付宝SDK实例
this.alipayImpl = alipay.getTTAliOpenSDK();
}
}
uni-app 平台
// 在页面中引入插件
import * as alipay from "@/uni_modules/tt-alipay-pro";
export default {
data() {
return {
alipayImpl: null
}
},
onLoad() {
// 初始化支付宝SDK实例
this.alipayImpl = alipay.getTTAliOpenSDK();
}
}
功能介绍
支付宝授权登录
💡 支付宝登录是一个两步过程:先获取
authCode,再通过后端接口换取用户信息。
登录 params 与官方文档(按平台区分)
| 平台 | params 应传入的内容 |
官方文档 |
|---|---|---|
| iOS / Android | 完整版 App 授权串:alipays://platformapi/startapp?saId=10000007&apiname=com.alipay.account.auth&method=alipay.open.auth.sdk.code.get&...(需包含 apiname、method、app_id、pid、product_id、scope 等,见完整版说明) |
完整版授权请求参数和返回说明 |
| HarmonyOS | 极简版 HTTPS 授权页完整 URL:https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=...&scope=...&state=...(不要使用完整版 alipays:// 拼接方式) |
极简版授权说明、极简版授权请求参数 |
鸿蒙端实现说明:插件在 HarmonyOS 上会把你传入的 未做整体 URL 编码的 极简授权链接,在原生侧执行一次 encodeURIComponent 后再交给支付宝鸿蒙 SDK(与极简版「url 业务参数」约定一致)。请直接拼接可读查询串即可,不要对整段 params 手动 encodeURIComponent,以免双重编码。
第一步:获取授权码 (authCode)
参数说明
TTAliLoginOptions
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| scheme | string | ✅ | 授权业务回跳当前 App 的 URL Scheme。HarmonyOS 必填;Android 可传 "";iOS 建议传入与 Info.plist 中 CFBundleURLSchemes、开放平台配置一致的 scheme(用于 auth_V2 回跳),勿与鸿蒙混用同一套「全平台写死空串」的写法。 |
| params | string | ✅ | iOS / Android:完整版授权请求串,见上表及 105327。HarmonyOS:极简版 https://authweb.alipay.com/auth?... 整串,见上表及 sxc60m、105325。 |
scheme 参数说明:
- HarmonyOS:必须传入实际 scheme(如
"tt-alipay-pro"),并与harmony-configs/.../module.json5中querySchemes、开放平台配置保持一致 - Android:可传空字符串
"" - iOS:建议传入与插件
Info.plist、开放平台一致的 scheme;若传空导致无法回调,请改为显式传入
params 参数说明(iOS / Android,完整版):
params 需为完整版授权请求串,且包含例如:
apiname:com.alipay.account.authmethod:alipay.open.auth.sdk.code.getapp_id、app_name、biz_type、pid、product_id、scope等
📖 完整字段以 完整版授权请求参数和返回说明 为准。
params 参数说明(HarmonyOS,极简版):
须使用 https://authweb.alipay.com/auth 为前缀的 HTTPS 地址,且 auth_type 必须为 PURE_OAUTH_SDK,并包含官方要求的 app_id、scope、state 等,含义与取值见 极简版授权请求参数。极简版 不需要 完整版里的 apiname / method / pid / product_id 等参数。
极简版 params 示例(仅鸿蒙登录时按此拼接):
https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=你的APPID&scope=auth_user&state=你的state
📖 字段说明、安全与
scope取值等请以 极简版授权说明 为准。
| success | function | ❌ | 成功回调 | | fail | function | ❌ | 失败回调 | | complete | function | ❌ | 完成回调 |
返回值 TTAliLoginSuccess
| 参数 | 类型 | 说明 |
|---|---|---|
| authCode | string | 用于换取access_token的授权码 |
示例代码
uni-app x 平台(Composition API)— iOS / Android(完整版 params)
请勿在鸿蒙端使用本段
alipays://拼接方式。鸿蒙请使用下方「极简版 params」示例。
<script setup>
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';
const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
const loginResult = ref<string>('');
onMounted(() => {
// 获取支付宝SDK实例
alipayImpl.value = alipay.getTTAliOpenSDK();
});
onUnmounted(() => {
alipayImpl.value = null;
});
// 支付宝授权登录(完整版,仅 iOS / Android)
const handleAlipayLogin = () => {
// 完整版授权串,须包含 apiname、method、app_id、pid、product_id、scope 等
// 文档:https://opendocs.alipay.com/open/218/105327
const authUrl = 'alipays://platformapi/startapp?saId=10000007&' +
'apiname=com.alipay.account.auth&' +
'method=alipay.open.auth.sdk.code.get&' +
'app_id=YOUR_APP_ID&' +
'app_name=mc&' +
'biz_type=openservice&' +
'pid=YOUR_PID&' +
'product_id=APP_FAST_LOGIN&' +
'scope=kuajjie&' +
'state=' + Date.now().toString();
alipayImpl.value?.login({
// Android 可传 '';iOS 建议传与 Info.plist、开放平台一致的 scheme
scheme: '',
params: authUrl,
success: (result) => {
console.log("✅ 获取授权码成功:", result.authCode);
loginResult.value = `授权成功,授权码: ${result.authCode}`;
sendAuthCodeToServer(result.authCode);
},
fail: (error) => {
console.error("❌ 支付宝授权失败:", error);
loginResult.value = `授权失败: ${error.errMsg}`;
uni.showToast({
title: '授权失败',
icon: 'error'
});
},
complete: (result) => {
console.log("📱 授权流程完成:", result);
}
} as alipay.TTAliLoginOptions);
};
// 发送authCode到后端服务器
const sendAuthCodeToServer = (authCode: string) => {
uni.request({
url: 'https://your-server.com/api/alipay/login',
method: 'POST',
data: {
authCode: authCode
},
success: (res) => {
console.log('登录成功:', res.data);
uni.showToast({
title: '登录成功',
icon: 'success'
});
},
fail: (err) => {
console.error('登录请求失败:', err);
uni.showToast({
title: '登录失败',
icon: 'error'
});
}
});
};
</script>
uni-app x 平台(Composition API)— HarmonyOS(极简版 params)
<script setup>
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';
const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
const loginResult = ref<string>('');
onMounted(() => {
alipayImpl.value = alipay.getTTAliOpenSDK();
});
onUnmounted(() => {
alipayImpl.value = null;
});
// 仅 HarmonyOS:极简版 HTTPS 授权 URL(勿使用 alipays:// 完整版串)
const handleAlipayLoginHarmony = () => {
const appId = 'YOUR_APP_ID';
const state = btoa(String(Date.now()));
const authUrl =
`https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=${appId}&scope=auth_user&state=${encodeURIComponent(state)}`;
alipayImpl.value?.login({
scheme: 'tt-alipay-pro',
params: authUrl,
success: (result) => {
console.log('✅ 获取授权码成功:', result.authCode);
loginResult.value = `授权成功,授权码: ${result.authCode}`;
sendAuthCodeToServer(result.authCode);
},
fail: (error) => {
console.error('❌ 支付宝授权失败:', error);
loginResult.value = `授权失败: ${error.errMsg}`;
uni.showToast({ title: '授权失败', icon: 'error' });
},
complete: (result) => {
console.log('📱 授权流程完成:', result);
}
} as alipay.TTAliLoginOptions);
};
const sendAuthCodeToServer = (authCode: string) => {
uni.request({
url: 'https://your-server.com/api/alipay/login',
method: 'POST',
data: { authCode },
success: (res) => {
console.log('登录成功:', res.data);
uni.showToast({ title: '登录成功', icon: 'success' });
},
fail: (err) => {
console.error('登录请求失败:', err);
uni.showToast({ title: '登录失败', icon: 'error' });
}
});
};
</script>
uni-app x 平台(Options API)
import * as alipay from "@/uni_modules/tt-alipay-pro";
export default {
data() {
return {
alipayImpl: null as alipay.TTAliOpenSDK | null,
loginResult: ''
}
},
onLoad() {
// 初始化支付宝SDK实例
this.alipayImpl = alipay.getTTAliOpenSDK();
},
methods: {
// 支付宝授权登录(完整版:iOS / Android;鸿蒙请用极简 URL,见上文 Composition 鸿蒙示例)
handleAlipayLogin() {
const authUrl = 'alipays://platformapi/startapp?saId=10000007&' +
'apiname=com.alipay.account.auth&' +
'method=alipay.open.auth.sdk.code.get&' +
'app_id=YOUR_APP_ID&' +
'app_name=mc&' +
'biz_type=openservice&' +
'pid=YOUR_PID&' +
'product_id=APP_FAST_LOGIN&' +
'scope=kuajjie&' +
'state=' + Date.now().toString();
this.alipayImpl?.login({
scheme: '',
params: authUrl,
success: (result) => {
console.log("✅ 获取授权码成功:", result.authCode);
this.loginResult = `授权成功,授权码: ${result.authCode}`;
// 将authCode发送到后端服务器
this.sendAuthCodeToServer(result.authCode);
},
fail: (error) => {
console.error("❌ 支付宝授权失败:", error);
this.loginResult = `授权失败: ${error.errMsg}`;
uni.showToast({
title: '授权失败',
icon: 'error'
});
},
complete: (result) => {
console.log("📱 授权流程完成:", result);
}
} as alipay.TTAliLoginOptions);
},
// HarmonyOS:极简版 HTTPS 授权 URL(文档:https://opendocs.alipay.com/open/218/sxc60m?pathHash=49b31754 )
handleAlipayLoginHarmony() {
const appId = 'YOUR_APP_ID';
const state = btoa(String(Date.now()));
const authUrl =
`https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=${appId}&scope=auth_user&state=${encodeURIComponent(state)}`;
this.alipayImpl?.login({
scheme: 'tt-alipay-pro',
params: authUrl,
success: (result) => {
console.log("✅ 获取授权码成功:", result.authCode);
this.loginResult = `授权成功,授权码: ${result.authCode}`;
this.sendAuthCodeToServer(result.authCode);
},
fail: (error) => {
console.error("❌ 支付宝授权失败:", error);
this.loginResult = `授权失败: ${error.errMsg}`;
uni.showToast({ title: '授权失败', icon: 'error' });
},
complete: (result) => {
console.log("📱 授权流程完成:", result);
}
} as alipay.TTAliLoginOptions);
},
// 发送authCode到后端服务器
sendAuthCodeToServer(authCode: string) {
uni.request({
url: 'https://your-server.com/api/alipay/login',
method: 'POST',
data: {
authCode: authCode
},
success: (res) => {
console.log('登录成功:', res.data);
uni.showToast({
title: '登录成功',
icon: 'success'
});
},
fail: (err) => {
console.error('登录请求失败:', err);
uni.showToast({
title: '登录失败',
icon: 'error'
});
}
});
}
}
}
uni-app 平台
// 支付宝授权登录(完整版:iOS / Android;鸿蒙勿用本函数的 alipays:// 串,请用 handleAlipayLoginHarmony)
handleAlipayLogin() {
const authUrl = 'alipays://platformapi/startapp?saId=10000007&' +
'apiname=com.alipay.account.auth&' +
'method=alipay.open.auth.sdk.code.get&' +
'app_id=YOUR_APP_ID&' +
'app_name=mc&' +
'biz_type=openservice&' +
'pid=YOUR_PID&' +
'product_id=APP_FAST_LOGIN&' +
'scope=kuajjie&' +
'state=' + Date.now().toString();
this.alipay.login({
scheme: '',
params: authUrl,
success: (result) => {
console.log("✅ 获取授权码成功:", result.authCode);
// 将authCode发送到后端服务器
this.sendAuthCodeToServer(result.authCode)
},
fail: (error) => {
console.error("❌ 支付宝授权失败:", error);
this.handleAlipayError(error, '支付宝登录');
},
complete: (result) => {
console.log("📱 授权流程完成:", result);
}
})
}
// 鸿蒙极简版授权(PURE_OAUTH_SDK),见 https://opendocs.alipay.com/open/218/sxc60m?pathHash=49b31754
handleAlipayLoginHarmony() {
const appId = 'YOUR_APP_ID'
const state = btoa(String(Date.now()))
const authUrl = 'https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&app_id=' + appId +
'&scope=auth_user&state=' + encodeURIComponent(state)
this.alipay.login({
scheme: 'tt-alipay-pro',
params: authUrl,
success: (result) => {
console.log("✅ 获取授权码成功:", result.authCode)
this.sendAuthCodeToServer(result.authCode)
},
fail: (error) => {
console.error("❌ 支付宝授权失败:", error)
this.handleAlipayError(error, '支付宝登录')
},
complete: (result) => {
console.log("📱 授权流程完成:", result)
}
})
}
// 发送authCode到后端服务器
// uni-app x 平台
sendAuthCodeToServer(authCode: string) {
uni.request({
url: 'https://your-server.com/api/alipay/login',
method: 'POST',
data: {
authCode: authCode
},
success: (res) => {
// 处理登录成功逻辑
console.log('登录成功:', res.data)
uni.showToast({
title: '登录成功',
icon: 'success'
})
},
fail: (err) => {
console.error('登录请求失败:', err)
uni.showToast({
title: '登录失败',
icon: 'error'
})
}
})
}
// uni-app 平台
sendAuthCodeToServer(authCode) {
uni.request({
url: 'https://your-server.com/api/alipay/login',
method: 'POST',
data: {
authCode: authCode
},
success: (res) => {
// 处理登录成功逻辑
console.log('登录成功:', res.data)
uni.showToast({
title: '登录成功',
icon: 'success'
})
},
fail: (err) => {
console.error('登录请求失败:', err)
uni.showToast({
title: '登录失败',
icon: 'error'
})
}
})
}
第二步:后端换取用户信息
📖 详细流程请参考: 支付宝授权服务端接入
前端无论是 iOS / Android 完整版 还是 鸿蒙极简版 拿到的均为 authCode,后端一般仍按开放平台「用授权码换 token、再取用户信息」流程处理;若你同时支持多种端,请以 极简版授权说明 与 完整版文档 核对接口与参数是否完全一致。
后端需要完成的步骤:
- 使用
authCode换取access_token - 使用
access_token获取用户信息 - 返回用户信息给前端
支付宝支付
💡 支付宝支付功能,支持 iOS、Android 和 HarmonyOS 平台。客户端只负责调用
pay()唤起支付宝;订单信息串orderString必须由服务端按开放平台规则生成并完成加签(对应alipay.trade.app.pay等),请勿在 App 内拼单或持有私钥。
官方文档(App 支付)
以下文档与开放平台「App 支付」接入一致,以后台实现 orderString、对账与验签为主;具体章节标题以官网为准。
| 说明 | 链接 |
|---|---|
产品 / 接口侧说明(与 App 支付、alipay.trade.app.pay 等对应) |
opendocs.alipay.com/open/00dn76 |
| 接入准备与开发指引 | opendocs.alipay.com/open/00dn75 |
| 请求参数、订单与加签相关说明 | opendocs.alipay.com/open/0f71b5 |
补充索引(历史文档入口,可作对照):移动支付 · 文档中心。
参数说明
TTAliPayOptions
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| orderString | string | ✅ | 支付订单信息字串,由后端服务器生成并返回 |
| scheme | string | ✅ | 授权业务回跳当前app的scheme(与登录时使用的scheme一致) |
| success | function | ❌ | 支付成功回调 |
| fail | function | ❌ | 支付失败回调 |
| complete | function | ❌ | 完成回调(无论成功或失败) |
返回值 TTAliPaySuccess
空对象,表示支付成功
重要提示
⚠️ 安全提示:
orderString必须从服务器端获取,绝不可在客户端生成- 订单字符串的生成和签名必须在后端完成(参数含义与加签规则见上文 0f71b5 及 00dn75、00dn76)
- 支付前建议先检测支付宝是否安装(iOS/Android平台)
示例代码
uni-app x 平台(Composition API - 推荐)
<script setup>
import * as alipay from "@/uni_modules/tt-alipay-pro";
import { ref, onMounted, onUnmounted } from 'vue';
const alipayImpl = ref<alipay.TTAliOpenSDK | null>(null);
const payResult = ref<string>('');
onMounted(() => {
// 获取支付宝SDK实例
alipayImpl.value = alipay.getTTAliOpenSDK();
});
onUnmounted(() => {
alipayImpl.value = null;
});
// 支付宝支付
const handleAlipayPay = () => {
// 从后端获取支付订单字符串
getPaymentOrderString().then(orderString => {
alipayImpl.value?.pay({
orderString: orderString, // 后端返回的订单字符串
scheme: '', // iOS/Android平台传空字符串,HarmonyOS平台需要传入scheme
success: (result) => {
console.log("✅ 支付成功");
payResult.value = '支付成功';
uni.showToast({
title: '支付成功',
icon: 'success'
});
// 处理支付成功逻辑
handlePaymentSuccess(result);
},
fail: (error) => {
console.error("❌ 支付失败:", error);
payResult.value = `支付失败: ${error.errMsg}`;
uni.showToast({
title: error.errMsg || '支付失败',
icon: 'error'
});
},
complete: (res) => {
console.log("📱 支付流程完成:", res);
}
} as alipay.TTAliPayOptions);
}).catch(err => {
console.error("获取支付订单失败:", err);
uni.showToast({
title: '获取订单失败',
icon: 'error'
});
});
};
// 从后端获取支付订单字符串
const getPaymentOrderString = (): Promise<string> => {
return new Promise<string>((resolve, reject) => {
uni.request({
url: 'https://your-server.com/api/alipay/pay',
method: 'POST',
data: {
orderId: 'your_order_id',
amount: 0.01, // 支付金额(元)
},
success: (res) => {
if (res.data.success && res.data.orderString) {
resolve(res.data.orderString);
} else {
reject(res.data.message || '获取订单失败');
}
},
fail: (err) => {
reject(err);
}
});
});
};
// 处理支付成功
const handlePaymentSuccess = (result: alipay.TTAliPaySuccess) => {
// 可以在这里调用后端接口确认支付结果
uni.request({
url: 'https://your-server.com/api/alipay/verify',
method: 'POST',
data: {
orderId: 'your_order_id'
},
success: (res) => {
console.log('支付确认成功:', res.data);
}
});
};
</script>
uni-app x 平台(Options API)
import * as alipay from "@/uni_modules/tt-alipay-pro";
export default {
data() {
return {
alipayImpl: null as alipay.TTAliOpenSDK | null,
payResult: ''
}
},
onLoad() {
// 初始化支付宝SDK实例
this.alipayImpl = alipay.getTTAliOpenSDK();
},
methods: {
// 支付宝支付
handleAlipayPay() {
// 从后端获取支付订单字符串
this.getPaymentOrderString().then(orderString => {
this.alipayImpl?.pay({
orderString: orderString, // 后端返回的订单字符串
scheme: '', // iOS/Android平台传空字符串,HarmonyOS平台需要传入scheme
success: (result) => {
console.log("✅ 支付成功");
this.payResult = '支付成功';
uni.showToast({
title: '支付成功',
icon: 'success'
});
// 处理支付成功逻辑
this.handlePaymentSuccess(result);
},
fail: (error) => {
console.error("❌ 支付失败:", error);
this.payResult = `支付失败: ${error.errMsg}`;
uni.showToast({
title: error.errMsg || '支付失败',
icon: 'error'
});
},
complete: (res) => {
console.log("📱 支付流程完成:", res);
}
} as alipay.TTAliPayOptions);
}).catch(err => {
console.error("获取支付订单失败:", err);
uni.showToast({
title: '获取订单失败',
icon: 'error'
});
});
},
// 从后端获取支付订单字符串
getPaymentOrderString(): Promise<string> {
return new Promise<string>((resolve, reject) => {
uni.request({
url: 'https://your-server.com/api/alipay/pay',
method: 'POST',
data: {
orderId: 'your_order_id',
amount: 0.01, // 支付金额(元)
},
success: (res) => {
if (res.data.success && res.data.orderString) {
resolve(res.data.orderString);
} else {
reject(res.data.message || '获取订单失败');
}
},
fail: (err) => {
reject(err);
}
});
});
},
// 处理支付成功
handlePaymentSuccess(result: alipay.TTAliPaySuccess) {
// 可以在这里调用后端接口确认支付结果
uni.request({
url: 'https://your-server.com/api/alipay/verify',
method: 'POST',
data: {
orderId: 'your_order_id'
},
success: (res) => {
console.log('支付确认成功:', res.data);
}
});
}
}
}
uni-app 平台
// 支付宝支付
handleAlipayPay() {
// 从后端获取支付订单字符串
this.getPaymentOrderString().then(orderString => {
this.alipay.pay({
orderString: orderString, // 后端返回的订单字符串
scheme: '', // iOS/Android平台传空字符串,HarmonyOS平台需要传入scheme(与登录时使用的scheme一致)
success: (result) => {
console.log("✅ 支付成功");
uni.showToast({
title: '支付成功',
icon: 'success'
})
// 处理支付成功逻辑
this.handlePaymentSuccess(result)
},
fail: (error) => {
console.error("❌ 支付失败:", error);
uni.showToast({
title: error.errMsg || '支付失败',
icon: 'error'
})
// 处理支付失败逻辑
this.handlePaymentFail(error)
},
complete: (res) => {
console.log("📱 支付流程完成:", res);
}
})
}).catch(err => {
console.error("获取支付订单失败:", err);
uni.showToast({
title: '获取订单失败',
icon: 'error'
})
})
}
// 从后端获取支付订单字符串
getPaymentOrderString() {
return new Promise((resolve, reject) => {
uni.request({
url: 'https://your-server.com/api/alipay/pay',
method: 'POST',
data: {
orderId: 'your_order_id',
amount: 0.01, // 支付金额(元)
},
success: (res) => {
if (res.data.success && res.data.orderString) {
resolve(res.data.orderString)
} else {
reject(res.data.message || '获取订单失败')
}
},
fail: (err) => {
reject(err)
}
})
})
}
// 处理支付成功
handlePaymentSuccess(result) {
// 可以在这里调用后端接口确认支付结果
uni.request({
url: 'https://your-server.com/api/alipay/verify',
method: 'POST',
data: {
orderId: 'your_order_id'
},
success: (res) => {
console.log('支付确认成功:', res.data)
}
})
}
支付流程说明
- 前端发起支付请求:调用后端接口,传入订单信息(订单ID、金额等)
- 后端生成订单字符串:后端根据订单信息,使用支付宝SDK生成签名的订单字符串
- 前端调用支付:使用后端返回的订单字符串调用
pay方法 - 跳转支付宝:SDK会跳转到支付宝客户端完成支付
- 支付结果回调:支付完成后,通过
success或fail回调返回结果 - 后端确认支付:建议在支付成功后,调用后端接口确认支付结果
错误处理
错误码说明
| 错误码 | 错误信息 | 适用场景 | 解决方案 |
|---|---|---|---|
| 登录相关错误 | |||
| 101 | 未安装支付宝客户端 | 登录/支付功能 | 提示用户安装支付宝客户端 |
| 102 | 授权服务返回值异常 | 登录功能 | 检查网络连接和授权参数 |
| 106 | 跳转授权失败 | 登录功能 | 检查scheme配置和网络连接 |
| 支付相关错误 | |||
| 107 | 支付服务返回值异常 | 支付功能 | 检查订单字符串格式和网络连接 |
| 108 | 跳转支付失败 | 支付功能 | 检查scheme配置和支付宝客户端版本 |
| 其他错误 | |||
| 999 | 其他错误 | 所有功能 | 查看支付宝原始错误码和详细信息 |
| 1000 | 当前平台暂不支持 | 所有功能 | 当前平台不支持此功能 |
常见问题
1. 找不到插件方法?
解决方案: 确保使用自定义基座运行,标准基座不包含原生插件。
2. iOS平台登录无响应?
解决方案:
- 检查插件 Info.plist 中的 URL Scheme 配置
- 验证支付宝开放平台的应用配置
- 确保scheme与代码中使用的完全一致
3. Android平台授权无响应?
解决方案:
- 验证支付宝开放平台的应用配置
- 确保应用签名与开放平台配置一致
- 检查网络连接是否正常
4. 平台scheme配置问题?
解决方案:
- iOS: 修改
uni_modules/tt-alipay-pro/utssdk/app-ios/Info.plist文件 - HarmonyOS: 修改
harmony-configs/entry/src/main/module.json5文件 - 建议使用
ali+appid的md5值作为scheme,确保唯一性 - 确保支付宝开放平台配置的scheme与代码中一致
5. HarmonyOS平台授权无响应?
解决方案:
- 确认
login的params为极简版 HTTPS 链接(https://authweb.alipay.com/auth?auth_type=PURE_OAUTH_SDK&...),不要误用 iOS/Android 的alipays://platformapi/startapp完整版串(见 极简版说明) - 检查
harmony-configs/entry/src/main/module.json5中是否添加了"apmqpdispatch" - 确保
querySchemes数组中包含应用回调 scheme(与代码里login({ scheme })一致) - 验证网络权限配置是否正确
- 检查支付宝开放平台的应用配置
6. 支付时提示"订单信息不能为空"?
解决方案:
- 确保
orderString参数不为空 - 检查后端是否正确返回了订单字符串
- 验证订单字符串格式是否正确
7. 支付失败,状态码 4000?
解决方案:
- 检查订单字符串是否过期(订单字符串有时效性)
- 验证订单金额是否正确
- 检查支付宝商户配置是否正确
- 确认订单状态是否允许支付
8. 与官方支付插件冲突?
解决方案:
- 本插件专为与官方支付宝支付插件兼容设计
- 可以安全地与官方支付插件同时使用
- 避免同时使用
tt-alipay-lite插件,防止打包冲突
版本对比
| 特性 | tt-alipay-lite | tt-alipay-pro |
|---|---|---|
| 定位 | 轻量级授权登录 | 完整版授权登录+支付 |
| 授权登录 | ✅(多端极简链路) | ✅ iOS/Android 完整版;鸿蒙为极简版(与本文档「鸿蒙极简」一致) |
| 支付功能 | ❌ | ✅ |
| 官方支付插件兼容 | ❌ 会冲突 | ✅ 完美兼容 |
| HarmonyOS支持 | ✅ | ✅(登录 params 与 iOS/Android 不同) |
| 包大小 | 更小 | 更大 |
| 适用场景 | 纯登录场景 | 登录+支付场景 |
📞 技术支持
如果在使用过程中遇到问题,请:
- 查阅上方常见问题
- 参考支付宝官方开发文档
- 检查配置是否正确
- 确认支付宝客户端版本
- 联系技术支持获取帮助
祝您开发愉快! 🎉

收藏人数:
购买源码授权版(
试用
使用 HBuilderX 导入示例项目
赞赏(1)
下载 792
赞赏 4
下载 12158228
赞赏 1918
赞赏
京公网安备:11010802035340号