Components
Loading preview...
Payment Summary A card component to display a breakdown of payment details, such as subtotal, shipping, and total, with support for animations.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/paymentimport { 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>
);
}