Payment Method Selector

Copy Page

import { PaymentMethodSelector } from "@/components/billingsdk/payment-method-selector"

<PaymentMethodSelector
  onProceed={(method, data) => {
    console.log("Selected method:", method)
    console.log("Form data:", data)
  }}
/>

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
}

"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>
    )
}