如今，众多企业寻求在线盈利途径，例如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-projectcd my-redsys-project
安装依赖项:
npm install redsys-easy
二、配置环境变量
在项目根目录下创建.env.local文件，并添加以下环境变量（确保这些变量在服务器端保持安全）：
NEXT_PUBLIC_redsys_merchant_code=YOUR_MERCHANT_CODENEXT_PUBLIC_redsys_terminal=YOUR_TERMINALNEXT_PUBLIC_redsys_secret_key=YOUR_SECRET_KEYNEXT_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)
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 ( {paymentForm && ( {Object.entries(paymentForm.body).map(([key, value]) => ( ))} )} );};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的官方文档。 错误处理和安全性措施也需要在生产环境中得到充分考虑。
以上就是与NextJS集成的Redsys介绍15的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501476.html
微信扫一扫 
支付宝扫一扫 
