Remove PayPal, simplify to QRIS-only with in-app QR display

- Remove PayPal payment option from checkout
- Add qr_string and qr_expires_at columns to orders table
- Update create-payment to store QR string in database
- Update pakasir-webhook to clear QR string after payment
- Simplify Checkout to redirect to order detail page
- Clean up unused imports and components

Flow:
1. User checks out with QRIS (only option)
2. Order created with payment_method='qris'
3. QR string stored in database
4. User redirected to Order Detail page
5. QR code displayed in-app with polling
6. After payment, QR string cleared, access granted

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/pages/Checkout.tsx

@@ -1,26 +1,14 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { AppLayout } from "@/components/AppLayout";
 import { useCart } from "@/contexts/CartContext";
 import { useAuth } from "@/hooks/useAuth";
 import { supabase } from "@/integrations/supabase/client";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
 import { toast } from "@/hooks/use-toast";
 import { formatIDR } from "@/lib/format";
-import { Trash2, CreditCard, Loader2, QrCode, Wallet } from "lucide-react";
+import { Trash2, CreditCard, Loader2, QrCode } from "lucide-react";
-import { QRCodeSVG } from "qrcode.react";
-
-// Pakasir configuration
-const PAKASIR_PROJECT_SLUG = import.meta.env.VITE_PAKASIR_PROJECT_SLUG || "dewengoding";
-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;
-};
 
 // Edge function base URL - configurable via env with sensible default
 const getEdgeFunctionBaseUrl = (): string => {
@@ -29,49 +17,23 @@ const getEdgeFunctionBaseUrl = (): string => {
 
 const PAKASIR_CALLBACK_URL = `${getEdgeFunctionBaseUrl()}/pakasir-webhook`;
 
-type PaymentMethod = "qris" | "paypal";
+type CheckoutStep = "cart" | "payment";
-type CheckoutStep = "cart" | "payment" | "waiting";
-
-interface PaymentData {
-  qr_string?: string;
-  payment_url?: string;
-  expired_at?: string;
-  order_id?: string;
-}
 
 export default function Checkout() {
   const { items, removeItem, clearCart, total } = useCart();
   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");
-  const [paymentData, setPaymentData] = useState<PaymentData | null>(null);
-  const [orderId, setOrderId] = useState<string | null>(null);
-  const [checkingStatus, setCheckingStatus] = useState(false);
-
-  // Check for returning from PayPal
-  useEffect(() => {
-    const returnedOrderId = searchParams.get("order_id");
-    if (returnedOrderId) {
-      setOrderId(returnedOrderId);
-      checkPaymentStatus(returnedOrderId);
-    }
-  }, [searchParams]);
 
   const checkPaymentStatus = async (oid: string) => {
-    setCheckingStatus(true);
     const { data: order } = await supabase.from("orders").select("payment_status").eq("id", oid).single();
 
     if (order?.payment_status === "paid") {
       toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
       navigate(`/orders/${oid}`);
-    } else {
-      toast({ title: "Pembayaran pending", description: "Menunggu konfirmasi pembayaran" });
     }
-    setCheckingStatus(false);
   };
 
   const handleCheckout = async () => {
@@ -107,7 +69,7 @@ export default function Checkout() {
           payment_provider: "pakasir",
           payment_reference: orderRef,
           payment_status: "pending",
-          payment_method: paymentMethod,
+          payment_method: "qris",
         })
         .select()
         .single();
@@ -127,18 +89,15 @@ export default function Checkout() {
       const { error: itemsError } = await supabase.from("order_items").insert(orderItems);
       if (itemsError) throw new Error("Gagal menambahkan item order");
 
-      setOrderId(order.id);
-
       // Build description from product titles
       const productTitles = items.map(item => item.title).join(", ");
 
-      // Call edge function to create payment (avoids CORS)
+      // Call edge function to create QRIS payment
       const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-payment', {
         body: {
           order_id: order.id,
           amount: amountInRupiah,
           description: productTitles,
-          method: paymentMethod, // 'qris' or 'paypal'
         },
       });
 
@@ -147,28 +106,9 @@ export default function Checkout() {
         throw new Error(paymentError.message || 'Gagal membuat pembayaran');
       }
 
-      if (paymentData?.success) {
+      // Clear cart and redirect to order detail page to show QR code
-        if (paymentData.data.method === 'paypal') {
-          // PayPal - redirect to payment URL
       clearCart();
-          window.location.href = paymentData.data.payment_url;
+      navigate(`/orders/${order.id}`);
-        } else if (paymentData.data.qr_string) {
-          // QRIS available - show QR code in app
-          setPaymentData({
-            qr_string: paymentData.data.qr_string,
-            expired_at: paymentData.data.expired_at,
-            order_id: order.id,
-          });
-          setStep("waiting");
-          clearCart();
-        } else {
-          // No QR code - redirect to payment page
-          clearCart();
-          window.location.href = paymentData.data.payment_url;
-        }
-      } else {
-        throw new Error('Gagal membuat pembayaran');
-      }
     } catch (error) {
       console.error("Checkout error:", error);
       toast({
@@ -182,28 +122,13 @@ export default function Checkout() {
   };
 
   const refreshPaymentStatus = async () => {
-    if (!orderId) return;
+    // This function is now handled in OrderDetail page
-    setCheckingStatus(true);
+    // Kept for backwards compatibility but no longer used
-
+    toast({ title: "Info", description: "Status pembayaran diupdate otomatis" });
-    const { data: order } = await supabase.from("orders").select("payment_status").eq("id", orderId).single();
-
-    if (order?.payment_status === "paid") {
-      toast({ title: "Pembayaran berhasil!", description: "Akses produk sudah aktif" });
-      navigate(`/orders/${orderId}`);
-    } else {
-      toast({ title: "Belum ada pembayaran", description: "Silakan selesaikan pembayaran" });
-    }
-    setCheckingStatus(false);
   };
 
-  // Waiting for QRIS payment
+  // Payment method selection UI - QRIS only now
-  if (step === "waiting" && paymentData) {
+  if (step === "payment") {
-    return (
-      <AppLayout>
-        <div className="container mx-auto px-4 py-8 max-w-md">
-          <Card className="border-2 border-border">
-            <CardHeader className="text-center">
-              <CardTitle>Scan QR Code untuk Bayar</CardTitle>
             </CardHeader>
             <CardContent className="flex flex-col items-center space-y-6">
               <div className="bg-white p-4 rounded-lg">
@@ -282,14 +207,7 @@ export default function Checkout() {
                   <CardTitle>Metode Pembayaran</CardTitle>
                 </CardHeader>
                 <CardContent>
-                  <RadioGroup
+                  <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none bg-muted">
-                    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>
@@ -297,19 +215,7 @@ export default function Checkout() {
                         Scan QR dengan aplikasi e-wallet atau mobile banking
                       </p>
                     </div>
-                      </Label>
                   </div>
-                    <div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none hover:bg-muted cursor-pointer">
-                      <RadioGroupItem value="paypal" id="paypal" />
-                      <Label htmlFor="paypal" className="flex items-center gap-2 cursor-pointer flex-1">
-                        <Wallet className="w-5 h-5" />
-                        <div>
-                          <p className="font-medium">PayPal</p>
-                          <p className="text-sm text-muted-foreground">Bayar dengan akun PayPal Anda</p>
-                        </div>
-                      </Label>
-                    </div>
-                  </RadioGroup>
                 </CardContent>
               </Card>
             </div>
@@ -333,7 +239,7 @@ export default function Checkout() {
                     ) : user ? (
                       <>
                         <CreditCard className="w-4 h-4 mr-2" />
-                        Bayar dengan {paymentMethod === "qris" ? "QRIS" : "PayPal"}
+                        Bayar dengan QRIS
                       </>
                     ) : (
                       "Login untuk Checkout"

supabase/functions/create-payment/index.ts

@@ -1,4 +1,5 @@
 import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
 
 const corsHeaders = {
   "Access-Control-Allow-Origin": "*",
@@ -9,7 +10,6 @@ interface CreatePaymentRequest {
   order_id: string;
   amount: number;
   description: string;
-  method?: 'qris' | 'paypal';
 }
 
 serve(async (req: Request) => {
@@ -24,7 +24,7 @@ serve(async (req: Request) => {
 
   try {
     const body: CreatePaymentRequest = await req.json();
-    const { order_id, amount, description, method = 'qris' } = body;
+    const { order_id, amount, description } = body;
 
     if (!order_id || !amount) {
       return new Response(
@@ -36,6 +36,10 @@ serve(async (req: Request) => {
     const PAYMENT_PROJECT_SLUG = Deno.env.get("PAKASIR_PROJECT_SLUG") || "";
     const PAYMENT_API_KEY = Deno.env.get("PAKASIR_API_KEY") || "";
     const PAYMENT_CALLBACK_URL = `${Deno.env.get("SUPABASE_URL")}/functions/v1/pakasir-webhook`;
+    const supabase = createClient(
+      Deno.env.get("SUPABASE_URL")!,
+      Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!
+    );
 
     if (!PAYMENT_PROJECT_SLUG || !PAYMENT_API_KEY) {
       console.error("[PAYMENT] Missing credentials");
@@ -45,26 +49,9 @@ serve(async (req: Request) => {
       );
     }
 
-    console.log("[PAYMENT] Creating payment transaction:", { order_id, amount, method });
+    console.log("[PAYMENT] Creating QRIS transaction:", { order_id, amount });
 
-    if (method === 'paypal') {
+    // Call Pakasir API to create QRIS transaction
-      // Return PayPal payment URL
-      const paypalUrl = `https://app.pakasir.com/paypal/${PAYMENT_PROJECT_SLUG}/${amount}?order_id=${order_id}`;
-
-      return new Response(
-        JSON.stringify({
-          success: true,
-          data: {
-            payment_url: paypalUrl,
-            method: 'paypal',
-            order_id: order_id,
-          }
-        }),
-        { headers: { ...corsHeaders, "Content-Type": "application/json" } }
-      );
-    }
-
-    // Default: QRIS - Call provider API
     const paymentResponse = await fetch(`https://app.pakasir.com/api/transactioncreate/qris`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
@@ -90,7 +77,6 @@ serve(async (req: Request) => {
           success: true,
           data: {
             payment_url: fallbackUrl,
-            method: 'qris',
             fallback: true,
             order_id: order_id,
           }
@@ -102,14 +88,37 @@ serve(async (req: Request) => {
     const result = await paymentResponse.json();
     console.log("[PAYMENT] Payment created:", result);
 
+    // Extract QR data from response
+    const qrData = result.payment || result;
+    const qrString = qrData.payment_number || qrData.qr_string || null;
+    const expiresAt = qrData.expired_at || null;
+
+    // Store QR string in database for in-app display
+    if (qrString) {
+      const { error: updateError } = await supabase
+        .from("orders")
+        .update({
+          qr_string: qrString,
+          qr_expires_at: expiresAt,
+        })
+        .eq("id", order_id);
+
+      if (updateError) {
+        console.error("[PAYMENT] Failed to store QR string:", updateError);
+        // Don't fail the request, just log the error
+      } else {
+        console.log("[PAYMENT] QR string stored in database");
+      }
+    }
+
     // Return QRIS data for display in app
     return new Response(
       JSON.stringify({
         success: true,
         data: {
           method: 'qris',
-          qr_string: result.qr_string || result.qr || null,
+          qr_string: qrString,
-          expired_at: result.expired_at || null,
+          expired_at: expiresAt,
           // Fallback URL if QR code is not available
           payment_url: `https://app.pakasir.com/pay/${PAYMENT_PROJECT_SLUG}/${amount}?order_id=${order_id}`,
           order_id: order_id,

supabase/functions/pakasir-webhook/index.ts

@@ -95,6 +95,9 @@ serve(async (req) => {
         payment_provider: "pakasir",
         payment_method: payload.payment_method || "unknown",
         updated_at: new Date().toISOString(),
+        // Clear QR string after payment
+        qr_string: null,
+        qr_expires_at: null,
       })
       .eq("id", order.id);
 

supabase/migrations/20241224_add_qr_string_to_orders.sql

@@ -0,0 +1,19 @@
+-- ============================================================================
+-- Add QR String Support to Orders
+-- ============================================================================
+-- Stores QRIS string and expiry for in-app QR code display
+-- Eliminates need to redirect to external payment page
+-- ============================================================================
+
+-- Add columns for QRIS payment data
+ALTER TABLE orders
+ADD COLUMN IF NOT EXISTS qr_string TEXT,
+ADD COLUMN IF NOT EXISTS qr_expires_at TIMESTAMPTZ;
+
+-- Add index for cleanup of expired QR codes
+CREATE INDEX IF NOT EXISTS idx_orders_qr_expires_at ON orders(qr_expires_at)
+WHERE qr_expires_at IS NOT NULL;
+
+-- Add comment
+COMMENT ON COLUMN orders.qr_string IS 'QRIS payment string for generating QR code in-app. Cleared after payment or expiration.';
+COMMENT ON COLUMN orders.qr_expires_at IS 'QRIS code expiration timestamp. Used for cleanup and validation.';