Changes

src/pages/Checkout.tsx

@@ -15,7 +15,15 @@ import { QRCodeSVG } from "qrcode.react";
 
 // Pakasir configuration
 const PAKASIR_PROJECT_SLUG = "dewengoding";
-const PAKASIR_API_KEY = "iP13osgh7lAzWWIPsj7TbW5M3iGEAQMo";
+const SANDBOX_API_KEY = "iP13osgh7lAzWWIPsj7TbW5M3iGEAQMo";
+
+// Centralized API key retrieval - uses env var with sandbox fallback
+const getPakasirApiKey = (): string => {
+  return import.meta.env.VITE_PAKASIR_API_KEY || SANDBOX_API_KEY;
+};
+
+// TODO: Replace with actual Supabase Edge Function URL after creation
+const PAKASIR_CALLBACK_URL = "https://lovable.backoffice.biz.id/functions/v1/pakasir-webhook";
 
 type PaymentMethod = "qris" | "paypal";
 type CheckoutStep = "cart" | "payment" | "waiting";
@@ -117,7 +125,10 @@ export default function Checkout() {
 
       setOrderId(order.id);
 
-      if (paymentMethod === "qris") {
+        // Build description from product titles
+        const productTitles = items.map(item => item.title).join(", ");
+
+        if (paymentMethod === "qris") {
         // Call Pakasir API for QRIS
         try {
           const response = await fetch(`https://app.pakasir.com/api/transactioncreate/qris`, {
@@ -127,7 +138,9 @@ export default function Checkout() {
               project: PAKASIR_PROJECT_SLUG,
               order_id: order.id,
               amount: amountInRupiah,
-              api_key: PAKASIR_API_KEY,
+              api_key: getPakasirApiKey(),
+              description: productTitles,
+              callback_url: PAKASIR_CALLBACK_URL,
             }),
           });
 
@@ -222,7 +235,7 @@ export default function Checkout() {
                 </Button>
               </div>
               <p className="text-xs text-muted-foreground text-center">
-                Pembayaran akan otomatis terkonfirmasi setelah Anda scan dan bayar QR code di atas
+                Pembayaran diproses melalui Pakasir dan akan dikonfirmasi otomatis setelah berhasil.
               </p>
             </CardContent>
           </Card>