# Payment Details
URL: /docs/components/payment-details

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

***

title: Payment Details
description: A comprehensive payment details form component with card details, billing information, and country selection for secure payment processing.
--------------------------------------------------------------------------------------------------------------------------------------------------------

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
  <Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
    <PreviewComponents registryName="payment-details">
      <PaymentDetailsDemo />
    </PreviewComponents>
  </Tab>

  <Tab value="Code" className="mt-3">
    ```tsx title="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="flex w-full 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>
      );
    }

    ```
  </Tab>
</Tabs>

## Installation

Choose your preferred installation method:

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none">
  <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs">
      <Tab value="npx">
        ```bash
        npx shadcn@latest add @billingsdk/payment-details
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @billingsdk/payment-details
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @billingsdk/payment-details
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/payment-details
        ```
      </Tab>
    </Tabs>
  </Tab>

  <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3">
    <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs">
      <Tab value="npx">
        ```bash
        npx @billingsdk/cli add payment-details
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm dlx @billingsdk/cli add payment-details
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn dlx @billingsdk/cli add payment-details
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bunx @billingsdk/cli add payment-details
        ```
      </Tab>
    </Tabs>
  </Tab>
</Tabs>

## Usage

### Basic Import

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

### Basic Implementation

```tsx
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:

```ts
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:

```tsx
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:

```tsx
<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:

```tsx title="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="flex w-full 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](https://github.com/saishankar404)