Code edited in Lovable Code Editor

Edited UI in Lovable

src/pages/Checkout.tsx

@@ -15,7 +15,7 @@ import { QRCodeSVG } from "qrcode.react";
 
 // Pakasir configuration
 const PAKASIR_PROJECT_SLUG = "dewengoding";
-const PAKASIR_API_KEY = "your-pakasir-api-key"; // TODO: Move to secrets
+const PAKASIR_API_KEY = "iP13osgh7lAzWWIPsj7TbW5M3iGEAQMo";
 
 type PaymentMethod = "qris" | "paypal";
 type CheckoutStep = "cart" | "payment" | "waiting";
@@ -32,7 +32,7 @@ export default function Checkout() {
   const { user } = useAuth();
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  
+
   const [loading, setLoading] = useState(false);
   const [step, setStep] = useState<CheckoutStep>("cart");
   const [paymentMethod, setPaymentMethod] = useState<PaymentMethod>("qris");
@@ -51,12 +51,8 @@ export default function Checkout() {
 
   const checkPaymentStatus = async (oid: string) => {
     setCheckingStatus(true);
-    const { data: order } = await supabase
+    const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();
-      .from("orders")
+
-      .select("payment_status")
-      .eq("id", oid)
-      .single();
-    
     if (order?.payment_status === "paid") {
       toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
       navigate("/access");
@@ -74,7 +70,11 @@ export default function Checkout() {
     }
 
     if (items.length === 0) {
-      toast({ title: "Keranjang kosong", description: "Tambahkan produk ke keranjang terlebih dahulu", variant: "destructive" });
+      toast({
+        title: "Keranjang kosong",
+        description: "Tambahkan produk ke keranjang terlebih dahulu",
+        variant: "destructive",
+      });
       return;
     }
 
@@ -132,7 +132,7 @@ export default function Checkout() {
           });
 
           const result = await response.json();
-          
+
           if (result.qr_string || result.qr) {
             setPaymentData({
               qr_string: result.qr_string || result.qr,
@@ -174,13 +174,9 @@ export default function Checkout() {
   const refreshPaymentStatus = async () => {
     if (!orderId) return;
     setCheckingStatus(true);
-    
+
-    const { data: order } = await supabase
+    const { data: order } = await supabase.from("orders").select("payment_status").eq("id", orderId).single();
-      .from("orders")
+
-      .select("payment_status")
-      .eq("id", orderId)
-      .single();
-    
     if (order?.payment_status === "paid") {
       toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
       navigate("/access");
@@ -212,7 +208,12 @@ export default function Checkout() {
                 )}
               </div>
               <div className="w-full space-y-2">
-                <Button onClick={refreshPaymentStatus} variant="outline" className="w-full border-2" disabled={checkingStatus}>
+                <Button
+                  onClick={refreshPaymentStatus}
+                  variant="outline"
+                  className="w-full border-2"
+                  disabled={checkingStatus}
+                >
                   {checkingStatus ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
                   Cek Status Pembayaran
                 </Button>
@@ -271,14 +272,20 @@ export default function Checkout() {
                   <CardTitle>Metode Pembayaran</CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <RadioGroup value={paymentMethod} onValueChange={(v) => setPaymentMethod(v as PaymentMethod)} className="space-y-3">
+                  <RadioGroup
+                    value={paymentMethod}
+                    onValueChange={(v) => setPaymentMethod(v as PaymentMethod)}
+                    className="space-y-3"
+                  >
                     <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
                       <RadioGroupItem value="qris" id="qris" />
                       <Label htmlFor="qris" className="flex items-center gap-2 cursor-pointer flex-1">
                         <QrCode className="w-5 h-5" />
                         <div>
                           <p className="font-medium">QRIS</p>
-                          <p className="text-sm text-muted-foreground">Scan QR dengan aplikasi e-wallet atau mobile banking</p>
+                          <p className="text-sm text-muted-foreground">
+                            Scan QR dengan aplikasi e-wallet atau mobile banking
+                          </p>
                         </div>
                       </Label>
                     </div>
@@ -322,9 +329,7 @@ export default function Checkout() {
                       "Login untuk Checkout"
                     )}
                   </Button>
-                  <p className="text-xs text-muted-foreground text-center">
+                  <p className="text-xs text-muted-foreground text-center">Pembayaran diproses melalui Pakasir</p>
-                    Pembayaran diproses melalui Pakasir
-                  </p>
                 </CardContent>
               </Card>
             </div>