Custom Payment UI

A private React component by TCG that seamlessly integrates Razorpay's custom checkout. Offers a streamlined, customizable payment interface, enhancing user experience and simplifying developer integration.

Features

• 🚀 React 18 & TypeScript: Built with modern standards.
• 📦 Dual Build: ESM and CommonJS support via tsup.
• 🎨 CSS Modules: Automatic style injection (no separate CSS import needed).
• 🌲 Tree-shaking: Optimized for bundle size.
• ⚡ Developer Experience: ESLint, Prettier, and strict TypeScript config.

Installation

npm install custom-payment-ui
# or
yarn add custom-payment-ui
# or
pnpm add custom-payment-ui

Usage

Import components directly:

import { CustomCheckout } from 'custom-payment-ui';

function App() {
  return (
    <CustomCheckout
        {..props}
      />
  );
}

Styling

Styles are automatically injected into the document head when the component is imported. You do not need to import a separate CSS file.

Development

1. Install dependencies:

   npm install

2. Start development mode (watch mode):

   npm run dev

3. Build the library:

   npm run build

4. Lint and Type-check:

   npm run lint
   npm run type-check

Project Structure

• src/components: UI components (colocated styles and tests).
• src/hooks: Custom React hooks.
• src/utils: Helper functions.
• src/styles: Global styles or theme variables.
• dist: Output directory for build artifacts.

License

ISC