Payment Card | Billing SDK

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

Order Summary

Subtotal$100.00

Total$100.00

What's Included

Payment & Invoice

Automated billing and invoicing with detailed transaction records. Professional receipts delivered instantly to your email.

Priority Support

Get dedicated customer support with faster response times and direct access to our technical team for any issues.

Final step, make the payment.

To finalize your subscription, kindly complete your payment using a valid credit card.

Card number

Expiry date

CVC

Discount code (optional)

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;

Installation

npx shadcn@latest add @billingsdk/payment-card

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

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

bunx shadcn@latest add @billingsdk/payment-card

npx @billingsdk/cli add payment-card

pnpm dlx @billingsdk/cli add payment-card

yarn dlx @billingsdk/cli add payment-card

bunx @billingsdk/cli add payment-card

Usage

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

<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 page.

Credits

Created by @Turf