Uniapp 集成第三方支付插件的详细步骤

注册微信支付商户号：登录微信支付商户平台（微信支付 - 中国领先的第三方支付平台｜微信支付提供安全快捷的支付方式）进行注册，完成企业或个体工商户的实名认证等相关操作，获取商户号（MCHID）、API 密钥等关键信息。
申请微信开放平台应用：访问微信开放平台（微信开放平台），创建移动应用并完成开发者资质认证，获取 AppID。同时，在开放平台中关联微信支付商户号。
设置支付回调地址：在微信支付商户平台中设置支付结果回调地址，用于接收微信支付的支付结果通知。

2.2 安装微信支付插件

在 HBuilderX 中，打开项目的 manifest.json 文件，切换到 “App 原生插件配置”，点击 “添加插件”，搜索 “微信支付” 并安装对应的插件。

2.3 配置插件

在 manifest.json 中，找到微信支付插件的配置项，填写之前获取的 AppID 和商户号等信息：

{
    "app-plus": {
        "distribute": {
            "sdkConfigs": {
                "wxpay": {
                    "appid": "your_appid",
                    "mch_id": "your_mch_id",
                    "api_key": "your_api_key"
                }
            }
        }
    }
}

将 your_appid、your_mch_id 和 your_api_key 替换为实际的值。

2.4 调用支付接口

在需要发起支付的页面，引入微信支付插件并调用支付接口：

<template>
    <button @click="wxPay">微信支付</button>
</template>

<script>
export default {
    methods: {
        wxPay() {
            // 调用后端接口获取微信支付所需的参数（如 prepay_id 等）
            uni.request({
                url: 'your_backend_api_url',
                method: 'POST',
                data: {
                    // 传递订单信息等参数
                    order_id: '123456',
                    amount: 100
                },
                success: (res) => {
                    const payParams = res.data.payParams;
                    uni.requireNativePlugin('WXPay').payOrder({
                        appid: payParams.appid,
                        partnerid: payParams.partnerid,
                        prepayid: payParams.prepayid,
                        noncestr: payParams.noncestr,
                        timestamp: payParams.timestamp,
                        sign: payParams.sign
                    }, (result) => {
                        if (result.errCode === 0) {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'success'
                            });
                        } else {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.error('获取支付参数失败', err);
                }
            });
        }
    }
};
</script>

注意：支付参数（如 prepay_id 等）需要通过后端接口调用微信支付统一下单 API 来获取，以确保支付安全。

2.5 处理支付回调

在后端服务器中，根据之前设置的支付回调地址，接收微信支付的支付结果通知。对通知进行验证和处理，更新订单状态等信息。

{
    "app-plus": {
        "distribute": {
            "sdkConfigs": {
                "alipay": {
                    "appid": "your_appid",
                    "private_key": "your_private_key",
                    "public_key": "your_public_key"
                }
            }
        }
    }
}

三、集成支付宝支付插件

3.1 前期准备

注册支付宝开发者账号：访问支付宝开放平台（支付宝开放平台），注册开发者账号并完成实名认证。
创建应用：在开放平台中创建应用，获取 AppID。同时，配置应用的密钥，包括应用公钥、应用私钥和支付宝公钥。
设置回调地址：在应用管理中设置支付结果回调地址，用于接收支付宝的支付结果通知。

3.2 安装支付宝支付插件

在 HBuilderX 的 manifest.json 文件中，进入 “App 原生插件配置”，添加 “支付宝支付” 插件。

3.3 配置插件

在 manifest.json 中配置支付宝支付插件的相关信息：

{
    "app-plus": {
        "distribute": {
            "sdkConfigs": {
                "alipay": {
                    "appid": "your_appid",
                    "private_key": "your_private_key",
                    "public_key": "your_public_key"
                }
            }
        }
    }
}

将 your_appid、your_private_key 和 your_public_key 替换为实际的值。

3.4 调用支付接口

在页面中调用支付宝支付接口：

<template>
    <button @click="aliPay">支付宝支付</button>
</template>

<script>
export default {
    methods: {
        aliPay() {
            // 调用后端接口获取支付宝支付所需的订单信息
            uni.request({
                url: 'your_backend_api_url',
                method: 'POST',
                data: {
                    // 传递订单信息等参数
                    order_id: '123456',
                    amount: 100
                },
                success: (res) => {
                    const orderInfo = res.data.orderInfo;
                    uni.requireNativePlugin('Alipay').payOrder({
                        orderInfo: orderInfo
                    }, (result) => {
                        if (result.resultStatus === '9000') {
                            uni.showToast({
                                title: '支付成功',
                                icon: 'success'
                            });
                        } else {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    });
                },
                fail: (err) => {
                    console.error('获取支付参数失败', err);
                }
            });
        }
    }
};
</script>

同样，支付所需的订单信息需要通过后端接口调用支付宝的统一收单交易创建接口来获取。