微信小程序实现云闪付支付（代码和注释很详细）

最新推荐文章于 2025-03-21 15:55:39 发布

如夜了我衣衫太薄便归家靠路灯°

最新推荐文章于 2025-03-21 15:55:39 发布

阅读量3.2k

点赞数 3

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_42487883/article/details/140519985

版权

要在微信小程序中实现云闪付支付功能，需要完成以下几个步骤：

注册云闪付商户：首先需要在云闪付平台上注册成为商户，并获取相关的商户ID、API密钥等信息。
集成云闪付SDK：在微信小程序中集成云闪付的SDK，以便能够调用云闪付的支付接口。
创建支付订单：在服务器端生成支付订单，并调用云闪付的支付接口获取支付参数。
调用微信支付接口：在小程序中使用获取到的支付参数调用微信支付接口完成支付。

以下是详细的实现步骤和代码示例：

1. 注册云闪付商户

访问云闪付官方网站，按照流程注册成为商户，并获取相关的商户ID和API密钥。

2. 集成云闪付SDK

在微信小程序中无法直接集成云闪付的SDK，因此需要通过服务器端来处理云闪付的支付请求。

服务器端

首先，需要在服务器端集成云闪付的SDK，并编写支付请求的接口。

服务器端代码示例（Node.js）

const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

// 云闪付商户配置
const merchantConfig = {
    merchantId: 'your_merchant_id',
    apiKey: 'your_api_key',
    notifyUrl: 'your_notify_url',
};

// 创建支付订单
app.post('/createOrder', async (req, res) => {
    const { amount, orderId } = req.body;

    // 云闪付支付请求参数
    const params = {
        merchantId: merchantConfig.merchantId,
        orderId: orderId,
        txnAmt: amount,
        txnTime: new Date().toISOString().replace(/[-:T]/g, '').slice(0, 14),
        notifyUrl: merchantConfig.notifyUrl,
    };

    // 生成签名
    const sign = generateSign(params, merchantConfig.apiKey);
    params['signature'] = sign;

    try {
        // 发送支付请求
        const response = await axios.post('https://gateway.95516.com/gateway/api/appTransReq.do', params);
        res.json(response.data);
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

// 生成签名函数
function generateSign(params, apiKey) {
    // 对参数进行排序
    const sortedParams = Object.keys(params).sort().reduce((result, key) => {
        result[key] = params[key];
        return result;
    }, {});

    // 拼接参数字符串
    const paramString = Object.keys(sortedParams).map(key => `${key}=${sortedParams[key]}`).join('&');

    // 生成签名
    const crypto = require('crypto');
    return crypto.createHash('sha256').update(paramString + apiKey).digest('hex').toUpperCase();
}

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

小程序端

在微信小程序中，调用服务器端创建订单的接口，并使用返回的支付参数进行支付。

小程序端代码示例

// app.js
App({
    globalData: {
        apiBaseUrl: 'http://localhost:3000',
    },
});

// pages/payment/payment.js
Page({
    data: {
        amount: 0,
        orderId: '',
    },

    // 创建订单并发起支付
    async createOrderAndPay() {
        const { amount, orderId } = this.data;

        try {
            // 调用服务器端创建订单接口
            const response = await wx.request({
                url: `${getApp().globalData.apiBaseUrl}/createOrder`,
                method: 'POST',
                data: {
                    amount: amount,
                    orderId: orderId,
                },
            });

            const paymentParams = response.data;

            // 调用微信支付接口
            wx.requestPayment({
                timeStamp: paymentParams.timeStamp,
                nonceStr: paymentParams.nonceStr,
                package: paymentParams.package,
                signType: 'MD5',
                paySign: paymentParams.paySign,
                success(res) {
                    wx.showToast({
                        title: '支付成功',
                    });
                },
                fail(err) {
                    wx.showToast({
                        title: '支付失败',
                        icon: 'none',
                    });
                },
            });
        } catch (error) {
            wx.showToast({
                title: '支付请求失败',
                icon: 'none',
            });
        }
    },

    // 监听输入框的变化
    onInputChange(event) {
        this.setData({
            [event.target.dataset.field]: event.detail.value,
        });
    },
});

页面结构

创建一个页面来进行支付操作，页面结构如下：

`pages/payment/payment.wxml`

<view class="container">
    <input placeholder="请输入金额" data-field="amount" bindinput="onInputChange" />
    <input placeholder="请输入订单ID" data-field="orderId" bindinput="onInputChange" />
    <button bindtap="createOrderAndPay">支付</button>
</view>

pages/payment/payment.wxss

.container {
    padding: 20px;
}
input {
    display: block;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
}
button {
    padding: 10px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
}