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

feat/payment-ux-story-1-1 #14

Merged
root merged 7 commits from feat/payment-ux-story-1-1 into dev 2025-11-28 01:14:26 +00:00
Conversation 0 Commits 7 Files Changed 107 +53 -39
13 changed files with 53 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9a0f6d85f8 - Show all commits

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/png" href="/simaya.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>core-midtrans-cifo</title>
<title>Simaya Midtrans | Retail Payment</title>
</head>
<body>
<div id="root"></div>

BIN
public/simaya.png Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 98 KiB

6
server/index.cjs
View File

@ -124,7 +124,7 @@ const ENABLE = {
// --- 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_TTL_MINUTES = parseInt(process.env.PAYMENT_LINK_TTL_MINUTES || '1440', 10)
const PAYMENT_LINK_BASE = process.env.PAYMENT_LINK_BASE || 'http://localhost:5174/pay'
const activeOrders = new Map() // order_id -> expire_at
// Map untuk menyimpan mercant_id per order_id agar notifikasi ERP bisa dinamis
@ -234,7 +234,7 @@ app.get('/api/payment-links/:token', (req, res) => {
if (result.error) {
logWarn('paymentlink.invalid', { error: result.error })
if (isDevEnv()) {
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 30
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 1440
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)
@ -386,7 +386,7 @@ app.post('/createtransaksi', async (req, res) => {
}
const nominal = Number(nominalRaw)
const now = Date.now()
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 30
const ttlMin = PAYMENT_LINK_TTL_MINUTES > 0 ? PAYMENT_LINK_TTL_MINUTES : 1440
const expire_at = now + ttlMin * 60 * 1000
// Block jika sudah selesai

9
src/app/router.tsx
View File

@ -1,10 +1,11 @@
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { AppLayout } from './AppLayout'
import { CheckoutPage } from '../pages/CheckoutPage'
// import { CheckoutPage } from '../pages/CheckoutPage'
import { PaymentStatusPage } from '../pages/PaymentStatusPage'
import { PaymentHistoryPage } from '../pages/PaymentHistoryPage'
import { NotFoundPage } from '../pages/NotFoundPage'
import { DemoStorePage } from '../pages/DemoStorePage'
// import { DemoStorePage } from '../pages/DemoStorePage'
import { InitPage } from '../pages/InitialPage'
import { PayPage } from '../pages/PayPage'
const router = createBrowserRouter([
@ -13,8 +14,8 @@ const router = createBrowserRouter([
element: <AppLayout />,
errorElement: <div role="alert">Terjadi kesalahan. Coba muat ulang.</div>,
children: [
{ index: true, element: <DemoStorePage /> },
{ path: 'checkout', element: <CheckoutPage /> },
{ index: true, element: <InitPage /> },
// { path: 'checkout', element: <CheckoutPage /> },
{ path: 'pay/:token', element: <PayPage /> },
{ path: 'payments/:orderId/status', element: <PaymentStatusPage /> },
{ path: 'history', element: <PaymentHistoryPage /> },

2
src/features/payments/components/PaymentLogos.tsx
View File

@ -103,7 +103,7 @@ export function CStoreLogosRow({ compact = false, size }: { compact?: boolean; s
return (
<div className="flex items-center gap-2">
<LogoAlfamart compact={compact} size={size} />
<LogoIndomaret compact={compact} size={size} />
{/* <LogoIndomaret compact={compact} size={size} /> */}
</div>
)
}

12
src/features/payments/components/PaymentSheet.tsx
View File

@ -14,9 +14,10 @@ function useCountdown(expireAt: number) {
}, [])
const remainMs = Math.max(0, expireAt - now)
const totalSec = Math.floor(remainMs / 1000)
const mm = String(Math.floor(totalSec / 60)).padStart(2, '0')
const hh = String(Math.floor(totalSec / 3600)).padStart(2, '0')
const mm = String(Math.floor((totalSec % 3600) / 60)).padStart(2, '0')
const ss = String(totalSec % 60).padStart(2, '0')
return `${mm}:${ss}`
return `${hh}:${mm}:${ss}`
}
export interface PaymentSheetProps {
@ -63,22 +64,21 @@ export function PaymentSheet({ merchantName = 'Simaya', orderId, amount, expireA
</button>
</div>
</div>
{/* Amount panel */}
{expanded && (
<div className="p-4 border-b border-black/10 flex items-start justify-between">
<div>
<div className="text-xs text-black/60">Total</div>
<div className="text-xs text-black">Total</div>
<div className="text-xl font-semibold">{formatCurrencyIDR(amount)}</div>
<div className="text-xs text-black/60">Order ID #{orderId}</div>
</div>
</div>
)}
{/* Body */}
<div className="p-4">
{children}
<TrustStrip location="sheet" />
</div>
{/* Sticky CTA (mobile-friendly) */}
{showStatusCTA && (
<div className="sticky bottom-0 bg-white/95 backdrop-blur border-t border-black/10 p-3 pb-[env(safe-area-inset-bottom)]">
<Link

2
src/features/payments/lib/navigation.ts
View File

@ -4,7 +4,7 @@ export function usePaymentNavigation() {
const navigate = useNavigate()
return {
toCheckout() {
navigate('/checkout')
window.location.assign('https://erpskrip.id/pembayaran-pelanggan')
},
toStatus(orderId: string, method?: string) {
const qs = method ? `?m=${encodeURIComponent(method)}` : ''

4
src/main.tsx
View File

@ -1,7 +1,7 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './styles/globals.css'
// Force light theme in case hosting injects a global 'dark' class
(() => {
const html = document.documentElement
try {
@ -9,11 +9,9 @@ import './styles/globals.css'
html.classList.remove('dark')
}
document.body.classList.remove('dark')
// Hint browsers to prefer light color scheme
html.style.colorScheme = 'light'
html.setAttribute('data-theme', 'light')
} catch {
// noop
}
})()
import { AppRouter } from './app/router'

13
src/pages/InitialPage.tsx Normal file
View File

@ -0,0 +1,13 @@
export function InitPage() {
return (
<div className="fixed inset-0 bg-white overflow-hidden flex items-center justify-center p-6">
<div className="flex items-center gap-3">
<img src="/simaya.png" alt="Simaya" className="h-12 w-12 md:h-16 md:w-16" />
<div className="text-black">
<div className="text-xl font-semibold leading-none">Simaya Midtrans</div>
<div className="text-sm leading-none">Payment Service</div>
</div>
</div>
</div>
)
}

3
src/pages/NotFoundPage.tsx
View File

@ -5,7 +5,8 @@ export function NotFoundPage() {
<div className="space-y-3">
<h1 className="text-xl font-semibold">Halaman tidak ditemukan</h1>
<p className="text-sm text-black/70">Periksa URL atau kembali ke checkout.</p>
<Link to="/checkout" className="text-brand-600 underline">Kembali ke Checkout</Link>
{/* <Link to="/checkout" className="text-brand-600 underline">Kembali ke Checkout</Link> */}
<Link to="/" className="text-brand-600 underline">Kembali</Link>
</div>
)
}

21
src/pages/PayPage.tsx
View File

@ -19,7 +19,7 @@ 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 [expireAt, setExpireAt] = useState<number>(Date.now() + 24 * 60 * 60 * 1000)
const [selectedMethod, setSelectedMethod] = useState<Method>(null)
const [locked, setLocked] = useState<boolean>(false)
const [selectedBank, setSelectedBank] = useState<BankKey | null>(null)
@ -39,7 +39,7 @@ export function PayPage() {
if (cancelled) return
setOrderId(payload.order_id)
setAmount(payload.nominal)
setExpireAt(payload.expire_at ?? Date.now() + 30 * 60 * 1000)
setExpireAt(payload.expire_at ?? Date.now() + 24 * 60 * 60 * 1000)
setAllowedMethods(payload.allowed_methods)
setError(null)
} catch (err) {
@ -53,7 +53,7 @@ export function PayPage() {
}
}, [token])
const merchantName = useMemo(() => 'Simaya Retail', [])
const merchantName = useMemo(() => '', [])
const isExpired = expireAt ? Date.now() > expireAt : false
const enabledMap: Record<PaymentMethod, boolean> = useMemo(() => {
@ -88,16 +88,17 @@ export function PayPage() {
>
<div className="space-y-4 px-4 py-6">
<Alert title={title}>{msg}</Alert>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Button
variant="secondary"
onClick={() => { try { window.location.reload() } catch { } }}
className="w-full sm:w-auto"
>
Muat ulang
</Button>
<a
href="mailto:retailimaya@gmail.com?subject=Permintaan%20Link%20Pembayaran&body=Order%20ID:%20"
className="inline-flex items-center px-3 py-2 rounded border bg-gray-800 !text-white hover:!text-white focus:!text-white visited:!text-white active:!text-white"
className="inline-flex items-center px-3 py-2 rounded border bg-gray-800 !text-white hover:!text-white focus:!text-white visited:!text-white active:!text-white w-full sm:w-auto justify-center"
>
Hubungi Admin
</a>
@ -123,7 +124,6 @@ export function PayPage() {
onSelect={(m) => {
setSelectedMethod(m as Method)
if (m === 'bank_transfer' || m === 'cstore') {
// Panel pemilihan bank/toko akan muncul di bawah item, dan lanjut ke step 3 setelah memilih
} else if (m === 'cpay') {
try {
window.open('https://play.google.com/store/apps/details?id=com.cifo.walanja', '_blank')
@ -148,7 +148,7 @@ export function PayPage() {
return (
<div className="space-y-2" aria-live="polite">
<div className="text-xs text-gray-600">Pilih bank untuk membuat Virtual Account</div>
<div className={`grid grid-cols-3 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
<div className={`grid grid-cols-2 md:grid-cols-3 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
{(['bca', 'bni', 'bri', 'cimb', 'mandiri', 'permata'] as BankKey[]).map((bk) => (
<button
key={bk}
@ -158,7 +158,7 @@ export function PayPage() {
setIsBusy(true)
setTimeout(() => { setCurrentStep(3); setIsBusy(false) }, 300)
}}
className="rounded border border-gray-300 bg-white p-2 flex items-center justify-center overflow-hidden hover:bg-gray-100"
className="rounded border border-gray-300 bg-white p-3 md:p-2 w-full flex items-center justify-center overflow-hidden hover:bg-gray-100"
aria-label={`Pilih bank ${bk.toUpperCase()}`}
>
<BankLogo bank={bk} />
@ -179,7 +179,8 @@ export function PayPage() {
<div className="space-y-2" aria-live="polite">
<div className="text-xs text-gray-600">Pilih toko untuk membuat kode pembayaran</div>
<div className={`grid grid-cols-2 gap-2 ${isBusy ? 'pointer-events-none opacity-60' : ''}`}>
{(['alfamart', 'indomaret'] as const).map((st) => (
{/* {(['alfamart', 'indomaret'] as const).map((st) => ( */}
{(['alfamart'] as const).map((st) => (
<button
key={st}
type="button"
@ -188,7 +189,7 @@ export function PayPage() {
setIsBusy(true)
setTimeout(() => { setCurrentStep(3); setIsBusy(false) }, 300)
}}
className="rounded border border-gray-300 bg-white p-2 flex items-center justify-center hover:bg-gray-100"
className="rounded border border-gray-300 bg-white p-3 md:p-2 w-full flex items-center justify-center hover:bg-gray-100"
aria-label={`Pilih toko ${st.toUpperCase()}`}
>
{st === 'alfamart' ? <LogoAlfamart /> : <LogoIndomaret />}

2
src/pages/PaymentStatusPage.tsx
View File

@ -112,7 +112,7 @@ export function PaymentStatusPage() {
) : null}
<div className="mt-4 flex gap-2">
<Button onClick={() => nav.toHistory()}>Lihat Riwayat</Button>
<Button variant="secondary" onClick={() => nav.toCheckout()}>Kembali ke Checkout</Button>
<Button variant="secondary" onClick={() => nav.toCheckout()}>Kembali</Button>
</div>
</div>
{!Env.API_BASE_URL && (

8
src/services/api.ts
View File

@ -129,22 +129,22 @@ export async function getPaymentLinkPayload(token: string): Promise<PaymentLinkP
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,
expire_at: json.expire_at || Date.now() + 24 * 60 * 60 * 1000
,
allowed_methods: json.allowed_methods || undefined,
}
} catch {
return {
order_id: token,
nominal: 150000,
expire_at: Date.now() + 30 * 60 * 1000,
expire_at: Date.now() + 24 * 60 * 60 * 1000
,
}
}
}