dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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>
This commit is contained in:
dwindown
2025-12-24 00:12:04 +07:00
parent 1a36f831cc
commit eba37df4d7
4 changed files with 78 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/pages/Checkout.tsx
View File

@@ -1,26 +1,14 @@
import { useState, useEffect } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useState } from "react";
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 { 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;
};
import { Trash2, CreditCard, Loader2, QrCode } from "lucide-react";
// 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" | "waiting";
interface PaymentData {
qr_string?: string;
payment_url?: string;
expired_at?: string;
order_id?: string;
}
type CheckoutStep = "cart" | "payment";
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) {
if (paymentData.data.method === 'paypal') {
// PayPal - redirect to payment URL
clearCart();
window.location.href = paymentData.data.payment_url;
} 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');
}
// Clear cart and redirect to order detail page to show QR code
clearCart();
navigate(`/orders/${order.id}`);
} catch (error) {
console.error("Checkout error:", error);
toast({
@@ -182,28 +122,13 @@ export default function Checkout() {
};
const refreshPaymentStatus = async () => {
if (!orderId) return;
setCheckingStatus(true);
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);
// This function is now handled in OrderDetail page
// Kept for backwards compatibility but no longer used
toast({ title: "Info", description: "Status pembayaran diupdate otomatis" });
};
// Waiting for QRIS payment
if (step === "waiting" && paymentData) {
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>
// Payment method selection UI - QRIS only now
if (step === "payment") {
</CardHeader>
<CardContent className="flex flex-col items-center space-y-6">
<div className="bg-white p-4 rounded-lg">
@@ -282,34 +207,15 @@ export default function Checkout() {
<CardTitle>Metode Pembayaran</CardTitle>
</CardHeader>
<CardContent>
<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>
</div>
</Label>
<div className="flex items-center space-x-3 p-3 border-2 border-border rounded-none bg-muted">
<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>
</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>
</div>
</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"