# Payment Card
URL: /docs/components/payment-card

A comprehensive payment interface for processing final transactions with card details, billing information, and visual card preview.

***

title: Payment Card
description: A comprehensive payment interface for processing final transactions with card details, billing information, and visual card preview.
-------------------------------------------------------------------------------------------------------------------------------------------------

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

  <Tab value="Code" className="mt-3">
    ```tsx title="src/components/payment-card-demo.tsx"
    "use client";
    import { PaymentCard } from "@/components/billingsdk/payment-card";

    export function PaymentCardDemo() {
      return (
        <PaymentCard
          title="Final step, make the payment."
          description="To finalize your subscription, kindly complete your payment using a valid credit card."
          price="100"
          finalText={[
            { text: "Automated billing & invoices" },
            { text: "Priority support" },
            { text: "Exclusive member benefits" },
          ]}
          feature="Payment & Invoice"
          featuredescription="Automated billing and invoicing with detailed transaction records. Professional receipts delivered instantly to your email."
          feature2="Priority Support"
          feature2description="Get dedicated customer support with faster response times and direct access to our technical team for any issues."
          onPay={async ({ cardNumber, expiry, cvc }) => {
            console.log(
              `Payment Processed! ${cardNumber}, exp ${expiry}, cvc ${cvc}`,
            );
          }}
        />
      );
    }

    export default PaymentCardDemo;

    ```
  </Tab>
</Tabs>

## Installation

<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-card
        ```
      </Tab>

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

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

      <Tab value="bun">
        ```bash
        bunx shadcn@latest add @billingsdk/payment-card
        ```
      </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-card
        ```
      </Tab>

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

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

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

## Usage

```tsx
import { PaymentCard, type PaymentCardProps } from "@/components/billingsdk/payment-card";
```

```tsx
<PaymentCard
    title="Final step, make the payment."
    description="To finalize your subscription, kindly complete your payment using a valid credit card."
    price="320"
    finalText={[
    { text: "Automated billing & invoices" },
    { text: "Priority support" },
    { text: "Exclusive member benefits" },
    ]}
    onPay={async ({ cardNumber, expiry, cvc }) => {
    alert(`Payment Processed! ${cardNumber}, exp ${expiry}, cvc ${cvc}`);
    }}
/>
```

## Props

| Prop                  | Type                                                                                   | Required | Description                                         |
| --------------------- | -------------------------------------------------------------------------------------- | -------- | --------------------------------------------------- |
| `title`               | `string`                                                                               | ✅        | Main heading shown above the form                   |
| `description`         | `string`                                                                               | ✅        | Short description under the title                   |
| `price`               | `string`                                                                               | ✅        | Amount displayed on the summary card (e.g. `"100"`) |
| `onPay`               | `(data: { cardNumber: string; expiry: string; cvc: string }) => Promise<void> \| void` | ✅        | Callback function called when payment is submitted  |
| `finalText`           | `{ text: string }[]`                                                                   | ❌        | Rotating footer messages shown in the summary       |
| `feature`             | `string`                                                                               | ❌        | Title for the first feature section                 |
| `featuredescription`  | `string`                                                                               | ❌        | Description for the first feature                   |
| `feature2`            | `string`                                                                               | ❌        | Title for the second feature section                |
| `feature2description` | `string`                                                                               | ❌        | Description for the second feature                  |
| `className`           | `string`                                                                               | ❌        | Additional classes to style the root `Card`         |

## Features

* **Animated Interface**: Enhanced user experience with smooth animations powered by Motion for the summary panel and interactive elements
* **Form Validation**: Built-in validation for credit card inputs with real-time feedback and error handling
* **Responsive Design**: Optimized for all screen sizes with mobile-first approach

## Theming

The Payment card component is styled using the `shadcn/ui` library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the [Theming](/docs/theming) page.

### Credits

* Created by [@Turf](https://x.com/PotatoTurf)