root
/
Midtrans-Middleware
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat/payment-link-flow #2

Merged
root merged 2 commits from feat/payment-link-flow into main 2025-11-10 10:02:11 +00:00
Conversation 0 Commits 2 Files Changed 16 +574
6 changed files with 574 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a940fda6b2 - Show all commits

75
docs/qa/payment-link.postman_collection.json Normal file
View File

@ -0,0 +1,75 @@
{
"info": {
"name": "Payment Link QA",
"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json"
},
"variable": [
{ "key": "baseUrl", "value": "http://localhost:8000" },
{ "key": "paymentLinkBase", "value": "http://localhost:5174/pay" },
{ "key": "externalApiKey", "value": "" },
{ "key": "token", "value": "" },
{ "key": "order_id", "value": "" }
],
"item": [
{
"name": "1) Create Transaction",
"request": {
"method": "POST",
"header": [
{ "key": "Content-Type", "value": "application/json" },
{ "key": "X-API-KEY", "value": "{{externalApiKey}}" }
],
"url": { "raw": "{{baseUrl}}/createtransaksi", "host": ["{{baseUrl}}"], "path": ["createtransaksi"] },
"body": {
"mode": "raw",
"raw": "{\n \"item_id\": \"order-demo-1\",\n \"nominal\": 150000,\n \"customer\": { \"name\": \"Demo User\", \"email\": \"demo@example.com\" },\n \"allowed_methods\": [\"bank_transfer\", \"credit_card\", \"gopay\", \"cstore\"]\n}"
}
},
"response": []
},
{
"name": "2) Resolve Token",
"request": {
"method": "GET",
"header": [],
"url": { "raw": "{{baseUrl}}/api/payment-links/{{token}}", "host": ["{{baseUrl}}"], "path": ["api","payment-links","{{token}}"] }
},
"response": []
},
{
"name": "3) Charge - Bank Transfer (BCA)",
"request": {
"method": "POST",
"header": [ { "key": "Content-Type", "value": "application/json" } ],
"url": { "raw": "{{baseUrl}}/api/payments/charge", "host": ["{{baseUrl}}"], "path": ["api","payments","charge"] },
"body": {
"mode": "raw",
"raw": "{\n \"payment_type\": \"bank_transfer\",\n \"transaction_details\": { \"order_id\": \"{{order_id}}\", \"gross_amount\": 150000 },\n \"bank_transfer\": { \"bank\": \"bca\" }\n}"
}
},
"response": []
},
{
"name": "3) Charge - CStore (Indomaret)",
"request": {
"method": "POST",
"header": [ { "key": "Content-Type", "value": "application/json" } ],
"url": { "raw": "{{baseUrl}}/api/payments/charge", "host": ["{{baseUrl}}"], "path": ["api","payments","charge"] },
"body": {
"mode": "raw",
"raw": "{\n \"payment_type\": \"cstore\",\n \"transaction_details\": { \"order_id\": \"{{order_id}}\", \"gross_amount\": 150000 },\n \"cstore\": { \"store\": \"indomaret\" }\n}"
}
},
"response": []
},
{
"name": "4) Payment Status",
"request": {
"method": "GET",
"header": [],
"url": { "raw": "{{baseUrl}}/api/payments/{{order_id}}/status", "host": ["{{baseUrl}}"], "path": ["api","payments","{{order_id}}","status"] }
},
"response": []
}
]
}

146
docs/sprint-change-proposal.md Normal file
View File

@ -0,0 +1,146 @@
# Sprint Change Proposal — ERP → Create Transaction → Payment Link Flow
## Summary
- Trigger: Checkout tidak lagi dimulai dari tombol “Buy Now” di frontend. Sistem eksternal (ERP/billing script) mengirim data transaksi ke server dan menerima tautan pembayaran terenkripsi untuk dibagikan ke pengguna.
- Outcome: Backend menjadi titik inisiasi transaksi. Pengguna membuka Payment Page via link (`/pay/:token`), memilih metode (VA/GoPay/Cstore/Kartu), lalu UI mengeksekusi charge seperti biasa. Webhook Midtrans dan ERP callback tetap berjalan.
## Objectives (Sprint)
- Menyediakan endpoint backend `POST /createtransaksi` yang mengeluarkan payment link bertanda-tangan (HMAC‑SHA256) dengan TTL dan anti‑replay.
- Menambahkan rute frontend `"/pay/:token"` (Payment Page) untuk memvalidasi token, menampilkan metode, dan melakukan charge menggunakan `order_id` dari token.
- Menjaga kompatibilitas endpoint yang ada: `POST /api/payments/charge`, `GET /api/payments/:orderId/status`, `POST /api/payments/webhook`.
- Menyelaraskan PRD, Arsitektur UI, dan Story E2E dengan alur baru.
## Scope & Impact
- PRD (`docs/prd.md`): Tambah FR “External Create Transaction & Payment Link”, ubah sumber `order_id` (berasal dari `item_id`), tambahkan ketentuan TTL, signature, dan anti‑replay.
- Arsitektur UI (`docs/ui-architecture.md`): Tambah rute `"/pay/:token"`, alur token‑driven. `CheckoutPage` tetap sebagai demo/QA.
- Story E2E (`docs/stories/midtrans-e2e-checkout-to-webhook.md`): Mulai dari Payment Page via token, bukan dari CheckoutPage langsung.
- Backend (`server/index.cjs`): Tambah endpoint `POST /createtransaksi` dan resolver token (API untuk FE). Env baru: `EXTERNAL_API_KEY`, `PAYMENT_LINK_SECRET`, `PAYMENT_LINK_TTL_MINUTES`.
- Frontend: Tambah halaman `PayPage` (`/pay/:token`), service untuk resolve token. `postCharge/getPaymentStatus` tetap.
## Proposed Design
### 1) Backend — Create Transaction API
- Endpoint: `POST /createtransaksi`
- Auth: Header `X-API-KEY: <EXTERNAL_API_KEY>` (validasi exact match; opsi IP whitelist & rate limit di reverse proxy).
- Body (contoh minimal):
```json
{
"merchant_id": "TKG-250520029803",
"deskripsi": "Pembelian item",
"nominal": 200000,
"nama": "Dwiki Kurnia Sandi",
"no_telepon": "081234567890",
"email": "demo@example.com",
"item": [
{ "item_id": "ITEM-12345", "qty": 1, "price": 200000, "name": "Produk A" }
]
}
```
- Mapping `order_id`: gunakan `item[0].item_id` sebagai `order_id` untuk Midtrans (validasi format/unik per transaksi aktif).
- Idempotensi: jika `order_id` + `nominal` sama dan status transaksi masih `pending`, kembalikan payment link sebelumnya; jika `nominal` berbeda, kembalikan `422 AMOUNT_MISMATCH`.
- Response (sukses):
```json
{
"status_code": "200",
"status_message": "OK",
"url": "https://cifopayment.id/pay/<token>?sig=<signature>",
"exp": 1730000000
}
```
- `token`: opaque base64url berisi klaim minimal (mis. `order_id`, `nominal`, `exp`) yang disimpan server.
- `signature`: `hex(HMAC_SHA256(token, PAYMENT_LINK_SECRET))`.
- `exp`: UNIX epoch seconds (TTL default 30 menit; dapat dikonfigurasi).
### 2) Backend — Payment Link Resolve API
- Endpoint: `GET /api/payment-links/:token` (digunakan frontend untuk bootstrap Payment Page).
- Query: otomatis memverifikasi signature (`sig` di query atau header), TTL/anti‑replay, dan mengembalikan payload:
```json
{
"order_id": "ITEM-12345",
"nominal": 200000,
"customer": { "name": "Dwiki", "phone": "081234567890", "email": "demo@example.com" },
"expire_at": 1730000000,
"allowed_methods": ["bank_transfer", "gopay", "cstore", "credit_card"]
}
```
- Error: `401 INVALID_SIGNATURE`, `410 LINK_EXPIRED`, `409 LINK_USED` (opsional jika anti‑replay menandai sekali pakai).
### 3) Frontend — Payment Page (`/pay/:token`)
- Flow:
- Ambil `token` dari URL → panggil `GET /api/payment-links/:token`.
- Set lokal `orderId`, `amount`, `expireAt`, dan info pelanggan.
- Render komponen metode (VA/GoPay/Cstore/Kartu) seperti di Checkout, tetapi `orderId` berasal dari token.
- Setelah charge, navigasi ke `"/payments/:orderId/status"` (polling status tetap).
- Catatan: `CheckoutPage` tetap ada untuk demo/QA; jalur produksi menggunakan Payment Page via link.
### 4) Webhook & ERP Callback
- Tetap: `POST /api/payments/webhook` memverifikasi signature Midtrans dan memperbarui status.
- ERP Callback: kirim `POST` ke `https://apibackend.erpskrip.id/paymentnotification/` pada status sukses, signature `sha512(mercant_id + status_code + nominal + client_id)` seperti implementasi saat ini.
### 5) Security & Config
- Secrets:
- `EXTERNAL_API_KEY`: memvalidasi `X-API-KEY` dari ERP.
- `PAYMENT_LINK_SECRET`: kunci HMAC untuk signature token.
- `PAYMENT_LINK_TTL_MINUTES`: default 30.
- Praktik:
- Rate‑limit `POST /createtransaksi` dan audit log.
- Anti‑replay: tandai token sebagai “used” setelah berhasil charge (opsional; atau izinkan reuse sampai status final).
- Rotasi secret terjadwal; invalidasi token lama secara bertahap bila diperlukan.
## Acceptance Criteria (Sprint)
- Backend mengeluarkan payment link dengan `token` + `signature`, valid hingga TTL.
- Resolve API mengembalikan `order_id` dan `nominal` yang konsisten; invalid jika signature/TTL gagal.
- Frontend Payment Page (`/pay/:token`) dapat:
- Memvalidasi token dan menampilkan metode pembayaran.
- Melakukan charge via endpoint yang ada menggunakan `order_id` dari token.
- Menavigasi ke halaman status dan menampilkan detail (VA/QR/payment code/kartu) sesuai metode.
- Webhook menerima notifikasi Midtrans dan ERP callback tetap terkirim saat sukses.
- Dokumentasi PRD, Arsitektur UI, dan Story E2E diperbarui mencerminkan alur baru.
## Non‑Functional Requirements
- Observability: logging request ID, event penting (`link.create`, `link.resolve`, `charge.start/success`, `webhook.receive`).
- Idempotensi: kembalikan link lama untuk transaksi `pending` dengan `order_id` + `nominal` yang sama.
- Keamanan: tidak mengekspos server key; signature Midtrans diverifikasi; token link ditandatangani HMAC‑SHA256.
- Kinerja: endpoint create/resolver respon <200ms p95 (lokal dev).
## Risks & Mitigations
- Replay/penyalahgunaan link: enforce TTL, anti‑replay flag, rate‑limit.
- Konflik `order_id`: validasi unik; strategy untuk recurring (suffix waktu/sequence bila diperlukan).
- Ketidaksesuaian nominal: `422 AMOUNT_MISMATCH` untuk `order_id` sama namun nominal beda.
- Gangguan ERP: retry callback dengan backoff, feature flag `ERP_ENABLE_NOTIF` untuk mematikan sementara.
## Rollback Plan
- Nonaktifkan konsumsi resolver token (feature flag) dan kembalikan ke alur Checkout demo.
- Pertahankan endpoint status & webhook agar UI tetap dapat polling status.
## Deliverables (Sprint)
- Backend: `POST /createtransaksi`, `GET /api/payment-links/:token` (validator signature/TTL), konfigurasi env baru.
- Frontend: halaman `PayPage` (`/pay/:token`) dengan integrasi panel metode yang ada.
- Docs: update PRD, Arsitektur UI, dan Story E2E sesuai token‑driven flow.
## Timeline & Tasking (5 hari)
- Day 1: Skeleton endpoint `createtransaksi` + HMAC signing + env wiring.
- Day 2: Resolver API + idempotensi + anti‑replay dasar.
- Day 3: FE `PayPage` + service `getPaymentLinkPayload(token)` + navigasi.
- Day 4: QA manual (sandbox) + webhook/ERP callback sanity.
- Day 5: Dokumentasi & polish (error codes, logging, runbook).
## Decisions Confirmed
- TTL payment link: 30 menit (konfigurabel; default 30) — disetujui.
- Token: HMAC‑SHA256 signature (tanpa enkripsi payload; confidentiality tidak diwajibkan saat ini).
- Recurring transaksi: tidak didukung. Kebijakan:
- Satu transaksi aktif per `item_id` pada satu waktu.
- Jika status sukses (`settlement` atau `capture + fraud_status=accept`), permintaan baru untuk `item_id` yang sama ditolak (`409 ORDER_COMPLETED`).
- Re-attempt diperbolehkan hanya jika transaksi sebelumnya tidak sukses dan sudah berakhir (`expire/cancel/deny`), menggunakan kebijakan unik `order_id` sesuai kebutuhan implementasi Midtrans.
## Appendix — Example
- Request `POST /createtransaksi` (ringkas): lihat contoh pada bagian Backend di atas.
- Response sukses:
```json
{
"status_code": "200",
"status_message": "OK",
"url": "https://cifopayment.id/pay/eyJvcmRlcl9pZCI6IklURU0tMTIzNDUiLCJub21pbmFsIjoyMDAwMDAsImV4cCI6MTczMDAwMDAwMH0?sig=4c7f...",
"exp": 1730000000
}
```

116
server/index.cjs
View File

@ -98,6 +98,53 @@ const ENABLE = {
cstore: parseEnable(process.env.ENABLE_CSTORE),
}
// --- Payment Link Config
const EXTERNAL_API_KEY = process.env.EXTERNAL_API_KEY || ''
const PAYMENT_LINK_SECRET = process.env.PAYMENT_LINK_SECRET || ''
const PAYMENT_LINK_TTL_MINUTES = parseInt(process.env.PAYMENT_LINK_TTL_MINUTES || '30', 10)
const PAYMENT_LINK_BASE = process.env.PAYMENT_LINK_BASE || 'http://localhost:5174/pay'
const activeOrders = new Map() // order_id -> expire_at
function isDevEnv() { return (process.env.NODE_ENV || '').toLowerCase() !== 'production' }
function verifyExternalKey(req) {
const key = (req.headers['x-api-key'] || req.headers['X-API-KEY'] || '').toString()
if (EXTERNAL_API_KEY) return key === EXTERNAL_API_KEY
// Allow if not configured only in dev for easier local testing
return isDevEnv()
}
function base64UrlEncode(buf) {
return Buffer.from(buf).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')
}
function base64UrlDecode(str) {
const pad = str.length % 4 === 0 ? '' : '='.repeat(4 - (str.length % 4))
const s = str.replace(/-/g, '+').replace(/_/g, '/') + pad
return Buffer.from(s, 'base64').toString('utf8')
}
function computeTokenSignature(orderId, nominal, expireAt) {
const canonical = `${String(orderId)}|${String(nominal)}|${String(expireAt)}`
return crypto.createHmac('sha256', PAYMENT_LINK_SECRET || 'dev-secret').update(canonical).digest('hex')
}
function createPaymentLinkToken({ order_id, nominal, expire_at, customer, allowed_methods }) {
const v = 1
const sig = computeTokenSignature(order_id, nominal, expire_at)
const payload = { v, order_id, nominal, expire_at, sig, customer, allowed_methods }
return base64UrlEncode(JSON.stringify(payload))
}
function resolvePaymentLinkToken(token) {
try {
const json = JSON.parse(base64UrlDecode(token))
const { order_id, nominal, expire_at, sig } = json || {}
if (!order_id || !nominal || !expire_at || !sig) return { error: 'INVALID_TOKEN' }
const expected = computeTokenSignature(order_id, nominal, expire_at)
if (String(sig) !== String(expected)) return { error: 'INVALID_SIGNATURE' }
if (Date.now() > Number(expire_at)) return { error: 'TOKEN_EXPIRED', payload: { order_id, nominal, expire_at } }
return { payload: json }
} catch (e) {
return { error: 'TOKEN_PARSE_ERROR', message: e?.message }
}
}
// Health check
app.get('/api/health', (_req, res) => {
logDebug('health.check', { isProduction, hasServerKey: !!serverKey, hasClientKey: !!clientKey })
@ -131,6 +178,29 @@ app.post('/api/config', (req, res) => {
res.json(result)
})
// Payment Link Resolver: GET /api/payment-links/:token
app.get('/api/payment-links/:token', (req, res) => {
const { token } = req.params
const result = resolvePaymentLinkToken(token)
if (result.error === 'TOKEN_EXPIRED') {
logWarn('paymentlink.expired', { order_id: result.payload?.order_id })
return res.status(410).json({ error: result.error, ...result.payload })
}
if (result.error) {
logWarn('paymentlink.invalid', { error: result.error })
if (isDevEnv()) {
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 30
const fallback = { order_id: token, nominal: 150000, expire_at: Date.now() + ttlMin * 60 * 1000 }
logInfo('paymentlink.dev.fallback', { order_id: fallback.order_id })
return res.json(fallback)
}
return res.status(400).json({ error: result.error })
}
const p = result.payload
logInfo('paymentlink.resolve.success', { order_id: p.order_id, expire_at: p.expire_at })
res.json({ order_id: p.order_id, nominal: p.nominal, customer: p.customer, expire_at: p.expire_at, allowed_methods: p.allowed_methods })
})
// Charge endpoint (pass-through to Midtrans Core API)
app.post('/api/payments/charge', async (req, res) => {
try {
@ -180,6 +250,50 @@ app.get('/api/payments/:orderId/status', async (req, res) => {
}
})
// External ERP Create Transaction → issue payment link
app.post('/createtransaksi', (req, res) => {
try {
if (!verifyExternalKey(req)) {
logWarn('createtransaksi.unauthorized', { id: req.id })
return res.status(401).json({ error: 'UNAUTHORIZED', message: 'X-API-KEY invalid' })
}
const itemId = req?.body?.item_id || req?.body?.order_id
const nominalRaw = req?.body?.nominal
const customer = req?.body?.customer
const allowed_methods = req?.body?.allowed_methods
if (!itemId || typeof nominalRaw === 'undefined') {
logWarn('createtransaksi.bad_request', { id: req.id })
return res.status(400).json({ error: 'BAD_REQUEST', message: 'item_id and nominal are required' })
}
const order_id = String(itemId)
const nominal = Number(nominalRaw)
const now = Date.now()
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 30
const expire_at = now + ttlMin * 60 * 1000
// Block if already completed
if (notifiedOrders.has(order_id)) {
logWarn('createtransaksi.completed', { order_id })
return res.status(409).json({ error: 'ORDER_COMPLETED', message: 'Order already completed' })
}
// Block if active link exists and not expired yet
const existing = activeOrders.get(order_id)
if (existing && existing > now) {
logWarn('createtransaksi.active_exists', { order_id })
return res.status(409).json({ error: 'ORDER_ACTIVE', message: 'Active payment link exists' })
}
const token = createPaymentLinkToken({ order_id, nominal, expire_at, customer, allowed_methods })
const url = `${PAYMENT_LINK_BASE}/${token}`
activeOrders.set(order_id, expire_at)
logInfo('createtransaksi.issued', { order_id, expire_at })
res.json({ url, token, order_id, nominal, expire_at })
} catch (e) {
logError('createtransaksi.error', { id: req.id, message: e?.message })
res.status(500).json({ error: 'CREATE_ERROR', message: e?.message || 'Internal error' })
}
})
// --- Helpers: Midtrans signature verification & ERP notify
function computeMidtransSignature(orderId, statusCode, grossAmount, secretKey) {
try {
@ -294,6 +408,8 @@ app.post('/api/payments/webhook', async (req, res) => {
const nominal = String(grossAmount)
if (!notifiedOrders.has(orderId)) {
notifiedOrders.add(orderId)
// Mark order inactive upon completion
activeOrders.delete(orderId)
await notifyERP({ orderId, nominal })
} else {
logInfo('erp.notify.skip', { orderId, reason: 'already_notified' })

2
src/app/router.tsx
View File

@ -5,6 +5,7 @@ import { PaymentStatusPage } from '../pages/PaymentStatusPage'
import { PaymentHistoryPage } from '../pages/PaymentHistoryPage'
import { NotFoundPage } from '../pages/NotFoundPage'
import { DemoStorePage } from '../pages/DemoStorePage'
import { PayPage } from '../pages/PayPage'
const router = createBrowserRouter([
{
@ -14,6 +15,7 @@ const router = createBrowserRouter([
children: [
{ index: true, element: <DemoStorePage /> },
{ path: 'checkout', element: <CheckoutPage /> },
{ path: 'pay/:token', element: <PayPage /> },
{ path: 'payments/:orderId/status', element: <PaymentStatusPage /> },
{ path: 'history', element: <PaymentHistoryPage /> },
{ path: '*', element: <NotFoundPage /> },

201
src/pages/PayPage.tsx Normal file
View File

@ -0,0 +1,201 @@
import { useEffect, useMemo, useState } from 'react'
import { useParams } from 'react-router-dom'
import { PaymentSheet } from '../features/payments/components/PaymentSheet'
import { PaymentMethodList } from '../features/payments/components/PaymentMethodList'
import type { PaymentMethod } from '../features/payments/components/PaymentMethodList'
import { BankTransferPanel } from '../features/payments/components/BankTransferPanel'
import { CardPanel } from '../features/payments/components/CardPanel'
import { GoPayPanel } from '../features/payments/components/GoPayPanel'
import { CStorePanel } from '../features/payments/components/CStorePanel'
import { usePaymentConfig } from '../features/payments/lib/usePaymentConfig'
import { Alert } from '../components/alert/Alert'
import { Button } from '../components/ui/button'
import { getPaymentLinkPayload } from '../services/api'
type Method = PaymentMethod | null
export function PayPage() {
const { token } = useParams()
const [orderId, setOrderId] = useState<string>('')
const [amount, setAmount] = useState<number>(0)
const [expireAt, setExpireAt] = useState<number>(Date.now() + 30 * 60 * 1000)
const [selectedMethod, setSelectedMethod] = useState<Method>(null)
const [locked, setLocked] = useState<boolean>(false)
const [selectedBank, setSelectedBank] = useState<string>('bca')
const [selectedStore, setSelectedStore] = useState<string>('indomaret')
const [allowedMethods, setAllowedMethods] = useState<string[] | undefined>(undefined)
const [error, setError] = useState<{ code?: string; message?: string } | null>(null)
const { data: runtimeCfg } = usePaymentConfig()
useEffect(() => {
let cancelled = false
async function resolve() {
if (!token) return
try {
const payload = await getPaymentLinkPayload(token)
if (cancelled) return
setOrderId(payload.order_id)
setAmount(payload.nominal)
setExpireAt(payload.expire_at ?? Date.now() + 30 * 60 * 1000)
setAllowedMethods(payload.allowed_methods)
setError(null)
} catch (err) {
if (cancelled) return
setError({ code: 'TOKEN_RESOLVE_ERROR' })
}
}
resolve()
return () => {
cancelled = true
}
}, [token])
const merchantName = useMemo(() => 'Demo Merchant', [])
const isExpired = expireAt ? Date.now() > expireAt : false
const enabledMap: Record<PaymentMethod, boolean> = useMemo(() => {
const base = runtimeCfg?.paymentToggles
const allow = allowedMethods
const all: Record<PaymentMethod, boolean> = {
bank_transfer: base?.bank_transfer ?? true,
credit_card: base?.credit_card ?? true,
gopay: base?.gopay ?? true,
cstore: base?.cstore ?? true,
cpay: base?.cpay ?? false,
}
if (allow && Array.isArray(allow)) {
for (const k of (Object.keys(all) as PaymentMethod[])) {
if (k === 'cpay') continue
all[k] = allow.includes(k) && all[k]
}
}
return all
}, [runtimeCfg, allowedMethods])
if (error || isExpired) {
const title = isExpired ? 'Link pembayaran telah kedaluwarsa' : 'Link pembayaran tidak valid'
const msg = isExpired ? 'Silakan minta link baru dari admin atau ERP.' : 'Token tidak dapat diverifikasi. Hubungi admin untuk bantuan.'
return (
<PaymentSheet
merchantName={merchantName}
orderId={orderId || (token ?? '')}
amount={amount}
expireAt={expireAt}
showStatusCTA={false}
>
<div className="space-y-4">
<Alert title={title}>{msg}</Alert>
<div className="flex gap-2">
<Button
variant="primary"
onClick={() => { try { window.location.reload() } catch {} }}
>
Muat ulang
</Button>
<a
href="mailto:support@example.com?subject=Permintaan%20Link%20Pembayaran&body=Order%20ID:%20"
className="inline-flex items-center px-3 py-2 rounded border bg-black text-white dark:bg-white dark:text-black"
>
Hubungi admin
</a>
</div>
</div>
</PaymentSheet>
)
}
return (
<PaymentSheet
merchantName={merchantName}
orderId={orderId}
amount={amount}
expireAt={expireAt}
showStatusCTA={false}
>
<div className="space-y-4">
<h2 className="text-lg font-semibold">Pilih metode pembayaran</h2>
<PaymentMethodList
selected={selectedMethod ?? undefined}
onSelect={(m) => setSelectedMethod(m as Method)}
disabled={locked}
enabled={enabledMap}
renderPanel={(m) => {
if (m === 'bank_transfer') return (
<div className="mt-2">
<p className="text-sm text-slate-600">Pilih bank</p>
<div className="mt-2 flex gap-2">
{['bca', 'bni', 'bri', 'permata'].map((bank) => (
<button
key={bank}
className={`px-3 py-2 rounded border ${selectedBank === bank ? 'border-blue-600' : 'border-slate-300'}`}
onClick={() => setSelectedBank(bank)}
>
{bank.toUpperCase()}
</button>
))}
</div>
</div>
)
if (m === 'cstore') return (
<div className="mt-2">
<p className="text-sm text-slate-600">Pilih gerai</p>
<div className="mt-2 flex gap-2">
{['indomaret', 'alfamart'].map((store) => (
<button
key={store}
className={`px-3 py-2 rounded border ${selectedStore === store ? 'border-blue-600' : 'border-slate-300'}`}
onClick={() => setSelectedStore(store)}
>
{store}
</button>
))}
</div>
</div>
)
return null
}}
/>
<div className="mt-6">
{selectedMethod === 'bank_transfer' && (
<BankTransferPanel
locked={locked}
onChargeInitiated={() => setLocked(true)}
orderId={orderId}
amount={amount}
defaultBank={selectedBank as any}
/>
)}
{selectedMethod === 'credit_card' && (
<CardPanel
locked={locked}
onChargeInitiated={() => setLocked(true)}
orderId={orderId}
amount={amount}
/>
)}
{selectedMethod === 'gopay' && (
<GoPayPanel
locked={locked}
onChargeInitiated={() => setLocked(true)}
orderId={orderId}
amount={amount}
/>
)}
{selectedMethod === 'cstore' && (
<CStorePanel
locked={locked}
onChargeInitiated={() => setLocked(true)}
orderId={orderId}
amount={amount}
defaultStore={selectedStore as any}
/>
)}
</div>
</div>
</PaymentSheet>
)
}

34
src/services/api.ts
View File

@ -112,3 +112,37 @@ export async function getRuntimeConfig(): Promise<RuntimeConfigResponse> {
clientKey: Env.MIDTRANS_CLIENT_KEY,
}
}
export type PaymentLinkPayload = {
order_id: string
nominal: number
customer?: { name?: string; phone?: string; email?: string }
expire_at?: number
allowed_methods?: string[]
}
export async function getPaymentLinkPayload(token: string): Promise<PaymentLinkPayload> {
if (apiBase) {
const { data } = await api.get(`/payment-links/${encodeURIComponent(token)}`)
Logger.info('paymentlink.resolve', { tokenLen: token.length })
return data as PaymentLinkPayload
}
// Fallback when API base not set or resolver unavailable
// Try a best-effort decode of base64(JSON) payload; if fails, use defaults
try {
const json = JSON.parse(atob(token))
return {
order_id: json.order_id || token,
nominal: Number(json.nominal) || 150000,
customer: json.customer || {},
expire_at: json.expire_at || Date.now() + 30 * 60 * 1000,
allowed_methods: json.allowed_methods || undefined,
}
} catch {
return {
order_id: token,
nominal: 150000,
expire_at: Date.now() + 30 * 60 * 1000,
}
}
}