Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Payment Gateway Configuration Settings Block

Animated React payment gateway settings page for Next.js with Stripe and PayPal API key management, test mode toggle, webhook URL, and transaction summary built with shadcn/ui, Tailwind CSS, and framer-motion

Configure your payment gateway with this React and Next.js settings block. Manage Stripe and PayPal API keys, toggle between test and live modes, set webhook endpoints, and view transaction summaries -- all with smooth staggered entrance animations. Built with TypeScript, shadcn/ui Switch, Input, Badge, and Button, Tailwind CSS, and framer-motion.

React Payment Gateway Configuration Settings Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 17, 2026

Was this page helpful?

Sign in to leave feedback.