Payment

Cards 65

About

Payment Summary A card component to display a breakdown of payment details, such as subtotal, shipping, and total, with support for animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Payment to your project and fits it to your theme.

Code

How Payment is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { PaymentSummary } from "@/components/ui/payment"; // Adjust this import path

// A simple SVG icon for the demo.
const PaypalIcon = () => (
  <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    className="h-6 w-6 fill-current text-[#00457C]"
  >
    <title>PayPal</title>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="7.056000232696533 3 37.35095977783203 45"><g xmlns="http://www.w3.org/2000/svg" clip-path="url(#paypal__a)"><path fill="#002991" d="M38.914 13.35c0 5.574-5.144 12.15-12.927 12.15H18.49l-.368 2.322L16.373 39H7.056l5.605-36h15.095c5.083 0 9.082 2.833 10.555 6.77a9.687 9.687 0 0 1 .603 3.58z"/><path fill="#60CDFF" d="M44.284 23.7A12.894 12.894 0 0 1 31.53 34.5h-5.206L24.157 48H14.89l1.483-9 1.75-11.178.367-2.322h7.497c7.773 0 12.927-6.576 12.927-12.15 3.825 1.974 6.055 5.963 5.37 10.35z"/><path fill="#008CFF" d="M38.914 13.35C37.31 12.511 35.365 12 33.248 12h-12.64L18.49 25.5h7.497c7.773 0 12.927-6.576 12.927-12.15z"/></g></svg>
  </svg>
);

export default function PaymentSummaryDemo() {
  const summaryItems = [
    { label: "Subtotal (1 items)", value: "SAR 40.00" },
    {
      label: "Shipping",
      value: "Free",
      valueClassName: "text-green-600 dark:text-green-500 font-semibold",
    },
  ];

  const totalDetails = {
    label: "Total (with VAT)",
    value: "SAR 330.00",
  };

  const paymentMethodDetails = {
    icon: <PaypalIcon />,
    name: "Paypal",
  };

  return (
    <div className="flex min-h-[450px] w-full items-center justify-center bg-background p-4">
      <PaymentSummary
        title="Payment Details"
        items={summaryItems}
        total={totalDetails}
        paymentMethod={paymentMethodDetails}
      />
    </div>
  );
}