与NextJS集成的Redsys介绍15

PHP中文网 • 2025年3月7日 06:19:20 • 编程技术 • 阅读 2

如今，众多企业寻求在线盈利途径，例如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的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2640507.html