Redsys Component Library

A comprehensive collection of blocks, components and utilities for integrating Redsys payments into your Next.js applications.
Built with shadcn/ui components, Server Actions
and powered by redsys-easy

Explore Components Examples

Available Components

Everything you need to build a complete Redsys payment integration

Backend Services

Core service for signing Redsys requests and configuration.

Payment Service

Service.env vars

Service utilities for Redsys payment flows.

Docs

UI Blocks

Checkout, tokenization, refunds, cancellations, authentication, DCC, and more.

Payment & Checkout

Redirect and inSite checkout forms, payment actions, result blocks, and DCC payment flows.

Create Payment Form Action

Action

Server action to create a payment redirect form for standard checkout.

Docs Examples

Redirect Form Component

Component

Client component for submitting payment forms to Redsys gateway.

Docs Examples

InSite Payment Form

Block

React form block for processing payments with Redsys InSite using the InSite payment server action.

Docs Examples

InSite Independent Elements Form

Block

React form block that composes Redsys InSite independent elements (card, expiry, CVV, button) using the InSite payment server action.

Docs Examples

Payment Result Block

Block

React component to display payment result from Redsys redirect.

Docs

Create InSite Payment Action

Action

Server action to create an InSite payment operation.

Docs Examples

Create DCC Payment Form Action

Action

Server action to create a DCC (Dynamic Currency Conversion) payment form.

Docs Examples

Authentication

Actions and forms for authenticating cards and handling confirmation flows.

Create Authentication Form Action

Action

Server action to create an authentication redirect form (transaction type 7).

Docs Examples

Authentication Confirmation Form

Block

React form block for confirming Redsys authentication operations using the authentication confirmation server action.

Docs Examples

Preauthorization

Actions and forms for creating preauthorizations and confirming them later.

Create Preauthorization Form Action

Action

Server action to create a preauthorization redirect form.

Docs Examples

Preauthorization Confirmation Form

Block

React form block for confirming Redsys preauthorization operations using the preauthorization confirmation server action.

Docs Examples

Tokenization

Components and actions for MIT, CIT, and inSite card tokenization and token-based payments.

MIT (Merchant Initiated Transactions)

Tokenization and payment flows for merchant-initiated transactions.

MIT Tokenization Action

Action

Server action for creating MIT (Merchant Initiated Transactions) tokenization forms. Generates a token during the first payment for future merchant-initiated transactions.

Docs Examples

MIT Token Payment Form

Block

Form block for payments using existing MIT tokens. Includes server action for creating MIT token payment forms.

Docs Examples

CIT (Customer Initiated Transactions)

Tokenization and one-click payment flows for customer-initiated transactions.

CIT Tokenization Action

Action

Server action for creating CIT (Customer Initiated Transactions) tokenization forms. Generates a token during the first payment for future one-click payments.

Docs Examples

CIT Token Payment Form

Block

Form block for payments using existing CIT tokens (one-click payments). Includes server action for creating CIT token payment forms.

Docs Examples

inSite Tokenization

Embedded inSite tokenization forms and actions that request Redsys COF tokens.

Create InSite Tokenization Action

Action

Server action to create an InSite tokenization operation.

Docs Examples

InSite Tokenization Form

Block

React form block for tokenizing cards with Redsys InSite using the InSite tokenization server action.

Docs Examples

Transaction Management

Forms and actions for refunds, cancellations, and other transaction operations.

Refund Form

Block

React form block for processing Redsys refunds using the refund server action.

Docs Examples

Cancellation Form

Block

React form block for processing Redsys cancellations using the cancellation server action.

Docs Examples

Pages & Endpoints

Webhook notification endpoint and post-payment result pages.

Notification Endpoint

API Route

API route for validating Redsys notifications. Includes tokenization utilities for COF (CIT and MIT) tokenized payments.

Docs

Success Page

Page

Page wired to the success redirect that renders the shared PaymentResult component with a confirmed payment state and key transaction details.

Docs

Error Page

Page

Page wired to the error redirect that renders the shared PaymentResult component with a failed payment state and error context.

Docs

Features

Type-Safe

Built with TypeScript and fully typed for a better developer experience.

Next.js Ready

Optimized for Next.js App Router with Server Actions, server and client components.

Easy Integration

Drop-in components that work out of the box with minimal configuration.

shadcn/ui Components

Built with shadcn/ui components for beautiful, accessible, and customizable UI elements.

Powered by redsys-easy

Built on top of the reliable redsys-easy library for secure payment processing.

Tokenization Support

Full support for tokenization, MIT (Merchant Initiated Transactions), and CIT (Customer Initiated Transactions) for one-click payments using Server Actions, following Redsys official documentation.

Authentication Operations

Validate card data without charging the cardholder (transaction type 7) and confirm later (type 8). Valid for 90 days, works with VISA and MasterCard only.

Preauthorization Operations

Reserve amounts without charging immediately (transaction type 1) and confirm later (type 2). Valid for 7-30 days, works with VISA and MasterCard only.

Refunds & Cancellations

Built-in forms and server actions to automate Redsys refunds and annulments (transaction types 3, 9, 45, 46, 47) via REST trataPeticion calls.

Dynamic Currency Conversion (DCC)

Enable currency conversion during checkout for foreign customers. Customers can pay in their local currency while you receive payment in your base currency.