49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import React from 'react'
|
|
import type { PaymentMethod } from './PaymentMethodList'
|
|
|
|
export function PaymentInstructions({ method }: { method: PaymentMethod }) {
|
|
const steps = getSteps(method)
|
|
return (
|
|
<div className="mt-2 rounded border border-black/10 dark:border-white/10 p-3 bg-black/2 dark:bg-white/5">
|
|
<div className="text-sm font-medium mb-2">Cara bayar</div>
|
|
<ol className="list-decimal list-inside space-y-1 text-xs text-black/80 dark:text-white/80">
|
|
{steps.map((s, i) => (
|
|
<li key={i}>{s}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function getSteps(method: PaymentMethod): string[] {
|
|
switch (method) {
|
|
case 'bank_transfer':
|
|
return [
|
|
'Pilih bank dan buat nomor VA.',
|
|
'Masuk ke aplikasi/ATM bank dan pilih menu Virtual Account.',
|
|
'Masukkan nomor VA lalu konfirmasi nominal.',
|
|
'Selesaikan pembayaran sebelum waktu habis.'
|
|
]
|
|
case 'credit_card':
|
|
return [
|
|
'Isi nomor kartu, masa berlaku, dan CVV.',
|
|
'Klik Bayar dan lengkapi verifikasi 3D Secure/OTP.',
|
|
'Transaksi akan diproses, tunggu konfirmasi penyelesaian.'
|
|
]
|
|
case 'gopay':
|
|
return [
|
|
'Buka aplikasi GoPay/QRIS dan pilih menu Scan.',
|
|
'Arahkan kamera ke QR di layar.',
|
|
'Konfirmasi pembayaran di aplikasi.'
|
|
]
|
|
case 'cstore':
|
|
return [
|
|
'Pilih toko (Alfamart/Indomaret) dan buat kode pembayaran.',
|
|
'Datang ke kasir dan tunjukkan/sebutkan kode pembayaran.',
|
|
'Konfirmasi nominal lalu selesaikan pembayaran di kasir.',
|
|
'Simpan struk, status akan diperbarui dalam beberapa menit.'
|
|
]
|
|
default:
|
|
return ['Ikuti instruksi yang muncul pada layar pembayaran.']
|
|
}
|
|
} |