Payment ProcessingPayment Method Selector
Payment Method Selector
Interactive selector for Cards, Digital Wallets, UPI (India), and BNPL services with inline forms and smooth motion.
Preview
Payment Methods
Choose your preferred payment method to continue
Cards
Visa, Mastercard, etc.
Digital Wallets
Apple Pay, Google Pay, etc.
UPI
Unified Payments Interface
Buy Now, Pay Later
Klarna, Affirm, Afterpay
"use client"
import { PaymentMethodSelector } from "@/components/billingsdk/payment-method-selector"
export function PaymentMethodSelectorDemo() {
return (
<div className="w-full max-w-md mx-auto min-h-[600px] flex items-center justify-center">
<PaymentMethodSelector
onProceed={(method, data) => {
console.log("Demo: Proceed with:", method, data)
}}
/>
</div>
)
}
Installation
npx shadcn@latest add @billingsdk/payment-method-selectorpnpm dlx shadcn@latest add @billingsdk/payment-method-selectoryarn dlx shadcn@latest add @billingsdk/payment-method-selectorbunx shadcn@latest add @billingsdk/payment-method-selectornpx @billingsdk/cli add payment-method-selectorpnpm dlx @billingsdk/cli add payment-method-selectoryarn dlx @billingsdk/cli add payment-method-selectorbunx @billingsdk/cli add payment-method-selectorUsage
import { PaymentMethodSelector } from "@/components/billingsdk/payment-method-selector"<PaymentMethodSelector
onProceed={(method, data) => {
console.log("Selected method:", method)
console.log("Form data:", data)
}}
/>Props
| Prop | Type | Description |
|---|---|---|
onProceed | (method: PaymentMethod, data: FormData) => void | Fired on “Proceed with Payment”. Receives selected method and collected form data. |
className | string | Optional class names for the root container. |
Types
type PaymentMethod = "cards" | "digital-wallets" | "upi" | "bnpl-services"
type FormData = {
// Cards
cardNumber?: string
expiryDate?: string
cvv?: string
cardholderName?: string
// Wallets
email?: string
phone?: string
// UPI
upiId?: string
// BNPL
income?: string
}Payment Methods
- Cards
- Form: card number, expiry, CVV, name
- Notes: secure card payments with fraud protection
- Digital Wallets (Apple Pay, Google Pay, Cash App, Venmo)
- Form: email, phone
- Notes: quick checkout, biometric auth
- UPI (India) (PhonePe, Google Pay, Paytm, BHIM)
- Form: UPI ID
- Notes: real‑time bank transfers
- BNPL Services (Klarna, Affirm, Afterpay, Sezzle)
- Form: email, phone, income (optional)
- Notes: split payments, flexible terms
Theming
Styled with shadcn/ui. Customize via CSS variables or switch themes in the preview header. See Theming.
Example
"use client"
import { PaymentMethodSelector } from "@/components/billingsdk/payment-method-selector"
export function PaymentMethodSelectorDemo() {
return (
<div className="w-full max-w-md mx-auto min-h-[600px] flex items-center justify-center">
<PaymentMethodSelector
onProceed={(method, data) => {
console.log("Demo: Proceed with:", method, data)
}}
/>
</div>
)
}
Credits
- Created by @rajoninternet