A comprehensive payment details form component with card details, billing information, and country selection for secure payment processing.

Payment Details

Enter your payment information to complete the transaction.

Card Details

Name On Card *

Valid Till *

Card Number *

CVV *

Billing Details

First Name *

Middle & Last Name *

Country

State

City

Billing Address *

Pin Code *

Phone Number *

src/components/payment-details-demo.tsx

'use client'

import { useState } from 'react'
import { PaymentDetails, type PaymentFormData } from '@/components/billingsdk/payment-details'

export function PaymentDetailsDemo() {
  const [showConfirmation, setShowConfirmation] = useState(false)

  const handleSubmit = async (_data: PaymentFormData) => {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setShowConfirmation(true)
    
    // Auto-hide confirmation after 3 seconds
    setTimeout(() => {
      setShowConfirmation(false)
    }, 3000)
  }

  const handleDiscard = () => {
    console.log('Form discarded')
  }

  return (
    <div className="w-full flex justify-center">
      <PaymentDetails
        title="Payment Details"
        description="Enter your payment information to complete the transaction."
        onSubmit={handleSubmit}
        onDiscard={handleDiscard}
        showConfirmation={showConfirmation}
        onConfirmationClose={() => setShowConfirmation(false)}
      />
    </div>
  )
}

Installation

Choose your preferred installation method:

npx shadcn@latest add @billingsdk/payment-details

pnpm dlx shadcn@latest add @billingsdk/payment-details

yarn dlx shadcn@latest add @billingsdk/payment-details

bunx shadcn@latest add @billingsdk/payment-details

npx @billingsdk/cli add payment-details

pnpm dlx @billingsdk/cli add payment-details

yarn dlx @billingsdk/cli add payment-details

bunx @billingsdk/cli add payment-details

Usage

Basic Import

import { PaymentDetails, type PaymentFormData } from "@/components/billingsdk/payment-details";

Basic Implementation

import { useState } from "react";

function PaymentForm() {
  const [showConfirmation, setShowConfirmation] = useState(false);
  
  const handleSubmit = async (data: PaymentFormData) => {
    // Process payment data
    console.log('Payment data:', data);
    setShowConfirmation(true);
  };

  return (
    <PaymentDetails
      title="Payment Details"
      description="Enter your payment information to complete the transaction."
      onSubmit={handleSubmit}
      onDiscard={() => console.log('Form discarded')}
      showConfirmation={showConfirmation}
      onConfirmationClose={() => setShowConfirmation(false)}
      countries={["India", "United States", "United Kingdom", "Canada", "Australia"]}
      states={["Bihar", "Karnataka", "Maharashtra"]}
      cities={["Patna", "Bangalore", "Mumbai"]}
    />
  );
}

Props

The PaymentDetails component accepts the following props:

Prop	Type	Required	Description
`className`	`string`	❌	Additional CSS classes for styling
`title`	`string`	❌	Main title for the payment form
`description`	`string`	❌	Description text below the title
`initialData`	`Partial<PaymentFormData>`	❌	Initial form data
`onSubmit`	`(data: PaymentFormData) => void \| Promise<void>`	❌	Callback when form is submitted
`onDiscard`	`() => void`	❌	Callback when discard button is clicked
`submitButtonText`	`string`	❌	Text for submit button (default: "Save Changes")
`discardButtonText`	`string`	❌	Text for discard button (default: "Discard")
`isLoading`	`boolean`	❌	External loading state
`showConfirmation`	`boolean`	❌	Show success confirmation modal
`confirmationTitle`	`string`	❌	Title for confirmation modal
`confirmationMessage`	`string`	❌	Message for confirmation modal
`onConfirmationClose`	`() => void`	❌	Callback when confirmation is closed
`countries`	`string[]`	❌	List of countries for dropdown
`states`	`string[]`	❌	List of states for dropdown
`cities`	`string[]`	❌	List of cities for dropdown

PaymentFormData Interface

The form data structure for the PaymentDetails component:

interface PaymentFormData {
  nameOnCard?: string;
  cardNumber?: string;
  validTill?: string;
  cvv?: string;
  firstName?: string;
  middleLastName?: string;
  country?: string;
  state?: string;
  city?: string;
  billingAddress?: string;
  pinCode?: string;
  contactNumber?: string;
}

Features

The PaymentDetails component comes with a comprehensive set of features:

Core Functionality

Card Type Detection: Automatically detects and displays card type (Visa, Mastercard, Amex, RuPay, Diners)
Input Formatting: Automatically formats card numbers, expiry dates, and other fields
Validation: Built-in form validation with error messages
Country Selection: Dropdown for country selection with customizable options

Design & UX

Responsive Design: Mobile-friendly layout with responsive grid
Dark Mode Support: Full dark mode compatibility with theme-aware styling
Hover Animations: Smooth hover effects and transitions for better UX
Accessibility: Proper labels, ARIA attributes, and keyboard navigation

Customization

Customizable: Extensive props for customization and theming
Confirmation Modal: Optional success confirmation with customizable messages

Supported Card Types

The component automatically detects and displays the appropriate card type:

Card Type	Pattern	Description
Visa	Starting with 4	Most common international card
Mastercard	Starting with 5 or 2	Global payment network
American Express	Starting with 34 or 37	Premium card with unique format
RuPay	Starting with 6	Indian domestic payment system
Diners Club	Starting with 30, 36, or 38	International charge card

Validation Rules

The component includes comprehensive client-side validation:

Field Requirements

Card Number: Minimum 13 digits, maximum 16 digits
Expiry Date: MM/YY format (e.g., 12/25)
CVV: 3-4 digits depending on card type
PIN Code: Exactly 6 digits
Contact Number: Exactly 10 digits

Required vs Optional Fields

Required: All fields except country, state, and city
Optional: Country, state, and city selections

Theming & Customization

The PaymentDetails component supports comprehensive theming and customization options.

Dark Mode Support

The component automatically adapts to dark mode using theme-aware CSS classes:

Background: Uses bg-background and bg-card for proper dark mode support
Text Colors: Uses text-foreground and text-muted-foreground for theme-aware text
Borders: Uses border-border for consistent theming
Focus States: Uses focus:ring-ring for theme-aware focus indicators
Error States: Uses text-destructive and border-destructive for consistent error styling

Theme Integration

The component integrates seamlessly with the BillingSDK theme system:

import { useTheme } from '@/contexts/theme-context'
import { getThemeStyles } from '@/lib/themes'

// The component automatically applies theme styles
<PaymentDetails 
  // Theme styles are applied automatically
  // ... other props
/>

Custom Styling

You can customize the appearance by passing custom className:

<PaymentDetails 
  className="max-w-2xl mx-auto" 
  // ... other props
/>

Interactive Animations

The component includes smooth hover animations for enhanced user experience:

Save Changes Button: Scale animation (hover:scale-105) with enhanced shadow
Discard Button: Subtle hover effects with background color changes
Form Inputs: Smooth focus transitions with ring effects

Example Implementation

Here's a complete example of how to implement the PaymentDetails component:

src/components/payment-details-demo.tsx

'use client'

import { useState } from 'react'
import { PaymentDetails, type PaymentFormData } from '@/components/billingsdk/payment-details'

export function PaymentDetailsDemo() {
  const [showConfirmation, setShowConfirmation] = useState(false)

  const handleSubmit = async (_data: PaymentFormData) => {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setShowConfirmation(true)
    
    // Auto-hide confirmation after 3 seconds
    setTimeout(() => {
      setShowConfirmation(false)
    }, 3000)
  }

  const handleDiscard = () => {
    console.log('Form discarded')
  }

  return (
    <div className="w-full flex justify-center">
      <PaymentDetails
        title="Payment Details"
        description="Enter your payment information to complete the transaction."
        onSubmit={handleSubmit}
        onDiscard={handleDiscard}
        showConfirmation={showConfirmation}
        onConfirmationClose={() => setShowConfirmation(false)}
      />
    </div>
  )
}

Credits

Created by @saishankar404

Payment DetailsPlaygroundCopy Page

Payment Details

Card Details

Billing Details

Payment Details
Playground