Silent 的小站

要使用 Next.js 对接支付宝支付，遵循以下完整流程及代码实现：

核心流程

创建支付宝应用
- 注册支付宝开放平台🔗
- 创建网站应用，获取APP_ID
- 配置RSA2密钥（应用公钥+支付宝公钥）
Next.js服务端支付接口

1// /pages/api/alipay.js
2import AlipaySdk from 'alipay-sdk';
3import { AlipayFormData } from 'alipay-sdk/lib/form';
4
5export default async function handler(req, res) {
6  if (req.method === 'POST') {
7    const { orderId, amount, subject } = req.body;
8
9    // 支付宝SDK配置
10    const alipaySdk = new AlipaySdk({
11      appId: process.env.ALIPAY_APP_ID,
12      privateKey: process.env.ALIPAY_PRIVATE_KEY.replace(/\\n/g, '\n'),
13      alipayPublicKey: process.env.ALIPAY_PUBLIC_KEY.replace(/\\n/g, '\n'),
14      gateway: 'https://openapi.alipaydev.com/gateway.do' // 沙箱环境
15    });
16
17    // 创建支付表单
18    const formData = new AlipayFormData();
19    formData.setMethod('get');
20    formData.addField('returnUrl', `${process.env.BASE_URL}/payment/success`);
21    formData.addField('notifyUrl', `${process.env.BASE_URL}/api/alipay/notify`);
22  
23    // 业务参数
24    formData.addField('bizContent', {
25      out_trade_no: orderId,       // 商户订单号
26      product_code: 'FAST_INSTANT_TRADE_PAY',
27      total_amount: amount,        // 金额(元)
28      subject: subject,            // 订单标题
29      body: '商品描述'
30    });
31
32    try {
33      // 生成支付链接
34      const result = await alipaySdk.exec(
35        'alipay.trade.page.pay',
36        {},
37        { formData }
38      );
39      res.status(200).json({ url: result });
40    } catch (error) {
41      res.status(500).json({ error: '支付创建失败' });
42    }
43  } else {
44    res.setHeader('Allow', 'POST');
45    res.status(405).end('Method Not Allowed');
46  }
47}

支付通知接口

1// /pages/api/alipay/notify.js
2export default async function handler(req, res) {
3  if (req.method === 'POST') {
4    const params = req.body;
5    // 验证签名（需自行实现签名验证逻辑）
6    const signVerified = verifyAlipaySignature(params); 
7  
8    if (signVerified && params.trade_status === 'TRADE_SUCCESS') {
9      // 更新数据库订单状态
10      await updateOrderStatus(params.out_trade_no, 'paid');
11      res.status(200).send('success');
12    } else {
13      res.status(400).send('fail');
14    }
15  } else {
16    res.status(405).end();
17  }
18}

前端支付触发

1// /pages/payment.js
2import { useState } from 'react';
3
4export default function Payment() {
5  const [loading, setLoading] = useState(false);
6
7  const handlePayment = async () => {
8    setLoading(true);
9    try {
10      const response = await fetch('/api/alipay', {
11        method: 'POST',
12        headers: { 'Content-Type': 'application/json' },
13        body: JSON.stringify({
14          orderId: `ORDER_${Date.now()}`,
15          amount: 99.99,
16          subject: 'VIP会员'
17        })
18      });
19
20      const { url } = await response.json();
21      window.location.href = url; // 跳转支付宝支付页
22    } catch (error) {
23      alert('支付失败');
24      setLoading(false);
25    }
26  };
27
28  return (
29    <button 
30      onClick={handlePayment}
31      disabled={loading}
32      className="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700"
33    >
34      {loading ? '处理中...' : '立即支付'}
35    </button>
36  );
37}

环境变量配置（.env.local）

1ALIPAY_APP_ID=您的应用ID
2ALIPAY_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\n...\n-----END RSA PRIVATE KEY-----"
3ALIPAY_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----\n...\n-----END PUBLIC KEY-----"
4BASE_URL=https://yourdomain.com

必备依赖

1npm install alipay-sdk

流程验证步骤

本地测试
- 使用支付宝沙箱环境测试支付流程
- 沙箱账号生成工具🔗
生产部署
- 切换gateway为正式环境：https://openapi.alipay.com/gateway.do
- 配置域名白名单和异步通知URL
- 申请HTTPS证书（支付宝要求全站HTTPS）
支付结果处理
- 同步跳转：通过returnUrl返回支付结果页
- 异步通知：处理订单状态更新（需幂等设计）

注意事项

私钥需保持单行换行符格式（使用\n）

金额单位为元（保留两位小数）

订单号需确保全局唯一性

生产环境必须使用HTTPS

完整实现后，支付流程：用户点击支付 → 生成支付宝订单 → 跳转支付宝支付 → 支付成功返回商户网站 → 异步通知确认订单。

Next对接支付宝

核心流程

环境变量配置（.env.local）

必备依赖

流程验证步骤