当前位置：首页 > 文章列表 > 文章 > 前端 > 与NextJS集成的Redsys介绍15

与NextJS集成的Redsys介绍15

2025-02-19 10:37:04 0浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《与NextJS集成的Redsys介绍15》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

如今，众多企业寻求在线盈利途径，例如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)

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》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！