Louis Innovations has released a dedicated SADAD Payment Gateway package for Next.js, purpose-built for Qatar e-commerce and payment applications. Unlike generic React libraries, this package leverages Next.js 14 and 15-specific features including Server Actions, Server Components, and API Routes for optimal performance and developer experience.

Why a Dedicated Next.js Package?

Next.js introduces unique capabilities that require purpose-built payment integrations. Server Actions process payments without exposing API endpoints. React Server Components render payment UI without client-side JavaScript overhead. API Routes handle webhooks with zero additional infrastructure. Generic React payment components miss these opportunities entirely.

Package Features

Server Actions -- Process payments, create invoices, and handle refunds directly in Server Actions. No separate API route is needed. Type-safe form handling with automatic revalidation keeps your codebase clean and secure.

Client Components -- Pre-built checkout button, payment status display, and refund request form. Styled with CSS modules for easy customization. Zero layout shift during loading states ensures a smooth user experience for customers in Qatar.

API Route Handlers -- Webhook verification endpoint that validates SADAD signatures. Payment status polling endpoint with built-in caching. Works with both Pages Router and App Router for maximum compatibility.

Middleware Integration -- SADAD webhook signature verification as Next.js middleware. Automatic request logging for all payment operations gives you full audit trail visibility.

TypeScript Support -- Full type definitions for all components, actions, and handlers. Exported types for building custom integrations on top of the package. Catch configuration errors at build time, not in production.

Use Cases

  • E-commerce stores built with Next.js can integrate SADAD payments in under an hour
  • SaaS platforms can add subscription billing with recurring payment support
  • Service businesses can generate payment links for clients directly from their dashboard
  • Restaurants and hotels can process booking deposits through Server Actions

Repository

The package is open source and available on GitHub: louisinnovationsqatar/sadad-nextjs

Licensed under MIT. Contributions from the Qatar developer community are welcome.

Frequently Asked Questions

QDoes this package work with Next.js 14 and 15? A: Yes. The package supports both Next.js 14 (App Router) and Next.js 15 (stable). It also works with Next.js 13.4+ with some feature limitations around Server Actions.

QCan I use this without Server Actions? A: Yes. The package includes API route handlers that work with both Pages Router and App Router. You can use traditional API routes or the new Route Handlers depending on your project setup.

QDoes it integrate with SADAD sandbox for testing? A: Yes. Set NEXT_PUBLIC_SADAD_ENV=sandbox in your environment variables. The package uses the QNB test merchant credentials to simulate transactions. All SADAD API endpoints are supported in sandbox mode.

QHow do I get support for the package? A: Open an issue on the GitHub repository or contact Louis Innovations through our contact page for priority support. We also offer custom integration services through our enterprise software division.