Components
Loading preview...
Payment Selection A sleek, user-friendly payment card selector with multiple options. Perfect for checkout flows to simplify and speed up transactions.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/payment-1import * as React from 'react';
import { PaymentMethodSelector } from "@/components/ui/payment-1"; // Adjust path as needed
export default function PaymentMethodSelectorDemo() {
const [selectedMethod, setSelectedMethod] = React.useState<string | number>(1);
// --- Updated paymentMethods array with image URLs ---
const paymentMethods = [
{
id: 1,
icon: (
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png"
alt="Visa"
className="h-8 w-12 object-contain"
/>
),
label: "Visa **** 0912",
description: "Pay with your Visa card",
},
{
id: 2,
icon: (
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Mastercard_2019_logo.svg/1200px-Mastercard_2019_logo.svg.png"
alt="Mastercard"
className="h-8 w-12 object-contain"
/>
),
label: "Mastercard **** 0912",
description: "Pay with your Mastercard",
},
{
id: 3,
icon: (
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b7/PayPal_Logo_Icon_2014.svg"
alt="Paypal"
className="h-8 w-12 object-contain"
/>
),
label: "Pay with Paypal",
description: "Split into 4 interest-free payments",
},
];
return (
<div className="flex min-h-[450px] w-full items-center justify-center bg-muted/30 p-4">
<PaymentMethodSelector
title="Choose how to pay"
actionText="Add new method"
methods={paymentMethods}
defaultSelectedId={selectedMethod}
onActionClick={() => alert("Add new method clicked!")}
onSelectionChange={(id) => {
console.log("Selected payment method ID:", id);
setSelectedMethod(id);
}}
/>
</div>
);
}