如今，众多企业寻求在线盈利途径，例如SaaS、电商或其他网络应用。虽然Stripe和PayPal等全球支付平台普及，但不同国家/地区偏好各有不同。在西班牙，Redsys几乎主导所有在线银行交易。Redsys是一个基于SOAP API的平台，旨在简化和保障西班牙银行网络的数字支付。尽管功能强大，但其独特的集成需求也带来挑战。本教程将指导您如何使用Next.js 15和服务器端操作，快速有效地构建基于重定向的Redsys支付流程。
一、设置Next.js 15和安装Redsys-Easy
- 创建Next.js 15项目:
npx create-next-app@latest my-redsys-project cd my-redsys-project
- 安装依赖项:
npm install redsys-easy
二、配置环境变量
在项目根目录下创建.env.local文件，并添加以下环境变量（确保这些变量在服务器端保持安全）：
NEXT_PUBLIC_redsys_merchant_code=YOUR_MERCHANT_CODE NEXT_PUBLIC_redsys_terminal=YOUR_TERMINAL NEXT_PUBLIC_redsys_secret_key=YOUR_SECRET_KEY NEXT_PUBLIC_url=YOUR_APP_URL //你的应用URL
三、创建Redsys客户端 (src/lib/redsys.ts)
import { createredsysapi, sandbox_urls } from 'redsys-easy';
export const { createredirectform, processrestnotification } = createredsysapi({
secretkey: process.env.NEXT_PUBLIC_redsys_secret_key!,
urls: sandbox_urls
});
createredirectform 用于生成重定向表单；processrestnotification 用于处理Redsys的支付通知（后续步骤）。
四、创建支付服务器操作 (src/app/api/pay/route.ts)
'use server';
import { currencies, transaction_types, randomtransactionid } from 'redsys-easy';
import { createredirectform } from '@/lib/redsys';
import Decimal from 'decimal.js';
const merchantInfo = {
ds_merchant_merchantcode: process.env.NEXT_PUBLIC_redsys_merchant_code!,
ds_merchant_terminal: process.env.NEXT_PUBLIC_redsys_terminal!,
ds_merchant_transactiontype: transaction_types.authorization
};
export async function POST(req: Request) {
try {
const { orderId, amount } = await req.json();
const currencyInfo = currencies['eur'];
const redsysAmount = new Decimal(amount).mul(10 ** currencyInfo.decimals).toFixed(0);
const redsysCurrency = currencyInfo.num;
const form = createredirectform({
...merchantInfo,
ds_merchant_order: orderId,
ds_merchant_amount: redsysAmount,
ds_merchant_currency: redsysCurrency,
ds_merchant_urlok: `${process.env.NEXT_PUBLIC_url}/success`,
ds_merchant_urlko: `${process.env.NEXT_PUBLIC_url}/failure`,
ds_merchant_transactiondate: new Date().toISOString()
});
return new Response(JSON.stringify(form));
} catch (error) {
console.error("Error initiating payment:", error);
return new Response(JSON.stringify({ error: 'Payment initiation failed' }), { status: 500 });
}
}
五、前端实现 (pages/checkout.tsx)
CWMS 2.0功能介绍：一、 员工考勤系统，国内首创CWMS2.0的企业员工在线考勤系统。二、 自定义URL Rewrite重写，友好的搜索引擎 URL优化。三、 代码与模板分离技术，支持超过5种类型的模板类型。包括：文章、图文、产品、单页、留言板。四、 购物车功能，CWMS2.0集成国内主流支付接口。如：淘宝、易趣、快钱等。完全可媲美专业网上商城系统。五、 多语言自动切换 中英文的说明。六、
import React, { useState } from 'react';
const CheckoutForm = () => {
const [paymentForm, setPaymentForm] = useState(null);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const response = await fetch('/api/pay', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ orderId: '123', amount: 10 }) // Replace with your order ID and amount
});
const data = await response.json();
setPaymentForm(data);
};
return (
)}
);
};
export default CheckoutForm;
六、成功/失败页面 (pages/success.tsx, pages/failure.tsx) 这部分需要根据实际需求添加处理逻辑。
七、结论
本教程演示了如何使用Redsys-Easy库在Next.js 15中集成Redsys支付网关。 请记住替换占位符值为您自己的商户信息和URL。 生产环境部署时，请将sandbox_urls更改为production_urls，并确保正确处理支付通知。
八、致谢
感谢Javier Tury开发的redsys-easy包。
注意: 本代码示例仅供参考，实际应用中可能需要根据Redsys API规范和您的具体需求进行调整。 请仔细阅读Redsys的官方文档。 错误处理和安全性措施也需要在生产环境中得到充分考虑。
