Loading Payment Methods Demo...
Interactive demonstration of dynamic payment method loading and selection from API data.
Pay when you receive your order
Transfer money to our bank account
Scan QR code to pay instantly
Pay with your credit or debit card
No advance payment required. Pay when you receive your order.
// Dynamic Payment Methods Loading
const { data: paymentMethods } = usePaymentMethods()
// Payment Selection Handler
const handlePaymentChange = (paymentCode: string) => {
setSelectedPayment(paymentCode)
// Trigger payment flow based on method type
}
// Payment Processing Flow
switch (paymentCode.toLowerCase()) {
case 'cod':
// Direct order completion
break
case 'bank':
// Show upload slip UI
break
case 'qr':
case 'card':
// Process through 2C2P gateway
await process2C2PPayment({ invoiceId, data })
break
}Click "Show" to inspect current state