Redirect Form

Client component for submitting payment forms to Redsys gateway.

Installation

The Redirect Form component is part of the Redsys integration package. It's a client component that handles the submission of payment forms to the Redsys payment gateway.

Usage

import { RedirectForm } from "@/registry/redsys/components/checkout/redirect-form";
import type { RedirectFormData } from "@/registry/redsys/components/checkout/redirect-form";

Basic Example

"use client";
 
import { useState } from "react";
import { RedirectForm } from "@/registry/redsys/components/checkout/redirect-form";
import type { RedirectFormData } from "@/registry/redsys/components/checkout/redirect-form";
import { createPaymentFormAction } from "@/registry/redsys/actions/checkout/create-payment-form";
 
export default function PaymentPage() {
  const [formData, setFormData] = useState<RedirectFormData | null>(null);
 
  const handleCreateForm = async () => {
    const { formData: newFormData } = await createPaymentFormAction({
      amount: 50.0,
      currency: "EUR",
    });
    setFormData(newFormData);
  };
 
  return (
    <div>
      <button onClick={handleCreateForm}>Create Payment Form</button>
      {formData && <RedirectForm formData={formData} buttonText="Pay Now" />}
    </div>
  );
}

Props

RedirectFormProps

The component accepts all standard HTML form props in addition to the following:

Prop	Type	Default	Description
`formData`	`RedirectFormData`	required	The redirect form data containing URL and form body parameters
`buttonText`	`string`	`"Submit"`	The text to display on the submit button
`buttonProps`	`ButtonProps`	-	Additional props to pass to the submit button
`loadingText`	`string`	`"Processing..."`	Text to display when the form is submitting
`onSubmit`	`(e: FormEvent<HTMLFormElement>) => void`	-	Callback fired when the form is submitted

RedirectFormData

interface RedirectFormData {
  url: string;
  body: {
    Ds_SignatureVersion: string;
    Ds_MerchantParameters: string;
    Ds_Signature: string;
  };
}

Customization

Custom Button Text and Styling

<RedirectForm
  formData={formData}
  buttonText="Pay 50.00 EUR"
  buttonProps={{
    variant: "default",
    size: "lg",
    className: "w-full",
  }}
/>

Custom Loading State

<RedirectForm
  formData={formData}
  loadingText="Redirecting to payment gateway..."
  onSubmit={(e) => {
    console.log("Form submitted");
  }}
/>

How It Works

The RedirectForm component creates a POST form that submits to the Redsys payment gateway. It includes:

Hidden form fields: Ds_SignatureVersion, Ds_MerchantParameters, and Ds_Signature required by Redsys
Loading state: Automatically manages loading state during form submission
Button: Uses the shadcn/ui Button component with loading indicator

When the form is submitted, the user is redirected to the Redsys payment gateway to complete the transaction.

The RedirectForm component is typically used with server actions that generate the form data:

createPaymentFormAction - Standard payment redirect form
createDccPaymentFormAction - DCC (Dynamic Currency Conversion) payment form
createTokenPaymentFormAction - Payment using stored token (MIT)
createTokenizationFormAction - Tokenization form for saving cards
createAuthenticationFormAction - 3DS authentication form
createPreauthorizationFormAction - Preauthorization form

Accordion