更新记录

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 那一套参数。调用 loginparams 必须按极简版规则拼接(见下文「鸿蒙极简授权登录」),若误用完整版 URL,授权会失败。

📚 推荐阅读

🚨 重要提示

⚠️ 必须使用自定义基座运行,否则无法找到插件方法

环境配置

前置条件

  1. 支付宝开放平台申请移动应用
  2. 获取 AppID
  3. 配置应用包名和签名

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&...(需包含 apinamemethodapp_idpidproduct_idscope 等,见完整版说明) 完整版授权请求参数和返回说明
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.plistCFBundleURLSchemes、开放平台配置一致的 scheme(用于 auth_V2 回跳),勿与鸿蒙混用同一套「全平台写死空串」的写法。
params string iOS / Android:完整版授权请求串,见上表及 105327HarmonyOS:极简版 https://authweb.alipay.com/auth?... 整串,见上表及 sxc60m105325

scheme 参数说明:

  • HarmonyOS:必须传入实际 scheme(如 "tt-alipay-pro"),并与 harmony-configs/.../module.json5querySchemes、开放平台配置保持一致
  • Android:可传空字符串 ""
  • iOS:建议传入与插件 Info.plist、开放平台一致的 scheme;若传空导致无法回调,请改为显式传入

params 参数说明(iOS / Android,完整版):
params 需为完整版授权请求串,且包含例如:

  • apiname: com.alipay.account.auth
  • method: alipay.open.auth.sdk.code.get
  • app_idapp_namebiz_typepidproduct_idscope

📖 完整字段以 完整版授权请求参数和返回说明 为准。

params 参数说明(HarmonyOS,极简版):
须使用 https://authweb.alipay.com/auth 为前缀的 HTTPS 地址,且 auth_type 必须为 PURE_OAUTH_SDK,并包含官方要求的 app_idscopestate 等,含义与取值见 极简版授权请求参数。极简版 不需要 完整版里的 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

极简版授权说明极简版授权请求参数 一致;state 等字段请按官方要求生成(防 CSRF)。

<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、再取用户信息」流程处理;若你同时支持多种端,请以 极简版授权说明完整版文档 核对接口与参数是否完全一致。

后端需要完成的步骤:

  1. 使用 authCode 换取 access_token
  2. 使用 access_token 获取用户信息
  3. 返回用户信息给前端

支付宝支付

💡 支付宝支付功能,支持 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 必须从服务器端获取,绝不可在客户端生成
  • 订单字符串的生成和签名必须在后端完成(参数含义与加签规则见上文 0f71b500dn7500dn76
  • 支付前建议先检测支付宝是否安装(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)
        }
    })
}

支付流程说明

  1. 前端发起支付请求:调用后端接口,传入订单信息(订单ID、金额等)
  2. 后端生成订单字符串:后端根据订单信息,使用支付宝SDK生成签名的订单字符串
  3. 前端调用支付:使用后端返回的订单字符串调用 pay 方法
  4. 跳转支付宝:SDK会跳转到支付宝客户端完成支付
  5. 支付结果回调:支付完成后,通过 successfail 回调返回结果
  6. 后端确认支付:建议在支付成功后,调用后端接口确认支付结果

📖 详细文档(App 支付)产品与接口说明接入准备与开发请求参数与加签;索引入口亦可参考 移动支付文档

错误处理

错误码说明

错误码 错误信息 适用场景 解决方案
登录相关错误
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平台授权无响应?

解决方案:

  • 确认 loginparams 为极简版 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 不同)
包大小 更小 更大
适用场景 纯登录场景 登录+支付场景

📞 技术支持

如果在使用过程中遇到问题,请:

  1. 查阅上方常见问题
  2. 参考支付宝官方开发文档
  3. 检查配置是否正确
  4. 确认支付宝客户端版本
  5. 联系技术支持获取帮助

祝您开发愉快! 🎉

隐私、权限声明

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

暂无

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

暂无

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

暂无