Create Pakasir payment edge function to fix CORS issue
- Create create-pakasir-payment edge function to handle payment creation server-side - Update ConsultingBooking.tsx to use edge function instead of direct API call - Update Checkout.tsx to use edge function instead of direct API call - Add config.toml entry for create-pakasir-payment function - Removes CORS errors when calling Pakasir API from frontend 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -129,46 +129,37 @@ export default function Checkout() {
|
||||
|
||||
setOrderId(order.id);
|
||||
|
||||
// Build description from product titles
|
||||
const productTitles = items.map(item => item.title).join(", ");
|
||||
// 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`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
project: PAKASIR_PROJECT_SLUG,
|
||||
order_id: order.id,
|
||||
amount: amountInRupiah,
|
||||
api_key: getPakasirApiKey(),
|
||||
description: productTitles,
|
||||
callback_url: PAKASIR_CALLBACK_URL,
|
||||
}),
|
||||
});
|
||||
if (paymentMethod === "qris") {
|
||||
// Call edge function to create Pakasir QRIS payment (avoids CORS)
|
||||
const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-pakasir-payment', {
|
||||
body: {
|
||||
order_id: order.id,
|
||||
amount: amountInRupiah,
|
||||
description: productTitles,
|
||||
},
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.qr_string || result.qr) {
|
||||
setPaymentData({
|
||||
qr_string: result.qr_string || result.qr,
|
||||
expired_at: result.expired_at,
|
||||
order_id: order.id,
|
||||
});
|
||||
setStep("waiting");
|
||||
clearCart();
|
||||
} else {
|
||||
// Fallback to redirect if API doesn't return QR
|
||||
const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
|
||||
clearCart();
|
||||
window.location.href = pakasirUrl;
|
||||
}
|
||||
} catch {
|
||||
if (paymentError) {
|
||||
console.error('Payment creation error:', paymentError);
|
||||
// Fallback to redirect
|
||||
const pakasirUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${amountInRupiah}?order_id=${order.id}`;
|
||||
clearCart();
|
||||
window.location.href = pakasirUrl;
|
||||
} else if (paymentData?.data?.qr_string) {
|
||||
// QRIS available - show QR code
|
||||
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
|
||||
window.location.href = paymentData.data.payment_url;
|
||||
}
|
||||
} else {
|
||||
// PayPal - redirect to Pakasir PayPal URL
|
||||
|
||||
@@ -226,38 +226,25 @@ export default function ConsultingBooking() {
|
||||
const { error: slotsError } = await supabase.from('consulting_slots').insert(slotsToInsert);
|
||||
if (slotsError) throw slotsError;
|
||||
|
||||
// Call Pakasir API directly to create QRIS payment
|
||||
const PAKASIR_PROJECT_SLUG = import.meta.env.VITE_PAKASIR_PROJECT_SLUG || '';
|
||||
const PAKASIR_API_KEY = import.meta.env.VITE_PAKASIR_API_KEY || '';
|
||||
const PAKASIR_CALLBACK_URL = `${import.meta.env.VITE_SUPABASE_URL}/functions/v1/pakasir-webhook`;
|
||||
// Call edge function to create Pakasir payment (avoids CORS)
|
||||
const { data: paymentData, error: paymentError } = await supabase.functions.invoke('create-pakasir-payment', {
|
||||
body: {
|
||||
order_id: order.id,
|
||||
amount: totalPrice,
|
||||
description: `Konsultasi 1-on-1 (${totalBlocks} blok)`,
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://app.pakasir.com/api/transactioncreate/qris`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
project: PAKASIR_PROJECT_SLUG,
|
||||
order_id: order.id,
|
||||
amount: totalPrice,
|
||||
api_key: PAKASIR_API_KEY,
|
||||
description: `Konsultasi 1-on-1 (${totalBlocks} blok)`,
|
||||
callback_url: PAKASIR_CALLBACK_URL,
|
||||
}),
|
||||
});
|
||||
if (paymentError) {
|
||||
console.error('Payment creation error:', paymentError);
|
||||
throw new Error(paymentError.message || 'Gagal membuat pembayaran');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.qr_string || result.qr) {
|
||||
// QRIS available - redirect to Pakasir payment page
|
||||
const pakasirPayUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${totalPrice}?order_id=${order.id}`;
|
||||
window.location.href = pakasirPayUrl;
|
||||
} else {
|
||||
throw new Error('Failed to create payment');
|
||||
}
|
||||
} catch (pakasirError) {
|
||||
// Fallback: redirect directly to Pakasir
|
||||
const pakasirPayUrl = `https://app.pakasir.com/pay/${PAKASIR_PROJECT_SLUG}/${totalPrice}?order_id=${order.id}`;
|
||||
window.location.href = pakasirPayUrl;
|
||||
if (paymentData?.success && paymentData?.data?.payment_url) {
|
||||
// Redirect to Pakasir payment page
|
||||
window.location.href = paymentData.data.payment_url;
|
||||
} else {
|
||||
throw new Error('Gagal membuat URL pembayaran');
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
||||
|
||||
Reference in New Issue
Block a user