Fix auto-payment trigger: wait for valid orderId before triggering Snap

- Add guard in AutoSnapPayment to only trigger when orderId and amount are valid
- Show loading state while waiting for payment data to resolve
- Prevent premature Snap token creation with empty/invalid data
- Fix PayPage and CheckoutPage auto-payment flow

src/pages/CheckoutPage.tsx

@@ -6,9 +6,6 @@ import { PaymentMethodList } from '../features/payments/components/PaymentMethod
 import type { PaymentMethod } from '../features/payments/components/PaymentMethodList'
 import { SnapPaymentTrigger } from '../features/payments/snap/SnapPaymentTrigger'
 import { usePaymentConfig } from '../features/payments/lib/usePaymentConfig'
-import { Logger } from '../lib/logger'
-import React from 'react'
-
 interface AutoSnapPaymentProps {
   orderId: string
   amount: number
@@ -24,7 +21,8 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
   const hasTriggered = React.useRef(false)
 
   React.useEffect(() => {
-    if (hasTriggered.current) return
+    // Only trigger when we have valid orderId and amount
+    if (!orderId || !amount || hasTriggered.current) return
     hasTriggered.current = true
 
     const triggerPayment = async () => {
@@ -97,6 +95,18 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
     return () => clearTimeout(timer)
   }, [orderId, amount, customer, onChargeInitiated, onSuccess, onError])
 
+  // Don't render anything until we have valid data
+  if (!orderId || !amount) {
+    return (
+      <div className="text-center">
+        <div className="space-y-2">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent mx-auto"></div>
+          <p className="text-sm text-gray-600">Memuat data pembayaran...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-4">
       {error && (

src/pages/PayPage.tsx

@@ -27,7 +27,8 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
   const hasTriggered = React.useRef(false)
 
   React.useEffect(() => {
-    if (hasTriggered.current) return
+    // Only trigger when we have valid orderId and amount
+    if (!orderId || !amount || hasTriggered.current) return
     hasTriggered.current = true
 
     const triggerPayment = async () => {
@@ -100,6 +101,18 @@ function AutoSnapPayment({ orderId, amount, customer, onChargeInitiated, onSucce
     return () => clearTimeout(timer)
   }, [orderId, amount, customer, onChargeInitiated, onSuccess, onError])
 
+  // Don't render anything until we have valid data
+  if (!orderId || !amount) {
+    return (
+      <div className="text-center">
+        <div className="space-y-2">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent mx-auto"></div>
+          <p className="text-sm text-gray-600">Memuat data pembayaran...</p>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-4">
       {error && (