与NextJS集成的Redsys介绍15-js教程-PHP中文网

与NextJS集成的Redsys介绍15

DDD

发布： 2025-02-14 20:34:19

原创

459人浏览过

与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<any>(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 (
    <form onSubmit={handleSubmit}>
      <button type="submit">支付</button>
      {paymentForm && (
        <form method="POST" action={paymentForm.action} >
          {Object.entries(paymentForm.body).map(([key, value]) => (
            <input key={key} type="hidden" name={key} value={value} />
          ))}
        </form>
      )}
    </form>
  );
};

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中文网其它相关文章！