import React, { useState, useEffect } from "react"; // Shopping Store - Single-file React component // Tailwind CSS utility classes assumed available in the project // Notes: // - Replace LOGO_URL with your actual logo path or import // - You must implement backend endpoints for card payments (Stripe), PayPal server-side capture (recommended), and Zinli/PagoMovil sessions. // - See README comments below for wiring instructions. export default function ShoppingStoreCheckout() { const LOGO_URL = "/logo-placeholder.png"; // replace with your logo const [game, setGame] = useState("freefire"); const [packageId, setPackageId] = useState("p1"); const [playerId, setPlayerId] = useState(""); const [email, setEmail] = useState(""); const [qty, setQty] = useState(1); const [processing, setProcessing] = useState(false); const [message, setMessage] = useState(""); // Example packages — edit prices as you like (amount in USD) const PACKAGES = { freefire: [ { id: "p1", label: "100 Diamonds", price: 1.99 }, { id: "p2", label: "300 Diamonds", price: 4.99 }, { id: "p3", label: "750 Diamonds", price: 9.99 } ], roblox: [ { id: "r1", label: "400 Robux", price: 3.99 }, { id: "r2", label: "800 Robux", price: 7.99 }, { id: "r3", label: "2000 Robux", price: 19.99 } ] }; useEffect(() => { // reset package when game changes const first = PACKAGES[game][0]; setPackageId(first.id); }, [game]); const selectedPackage = PACKAGES[game].find(p => p.id === packageId) || PACKAGES[game][0]; const total = (selectedPackage.price * qty).toFixed(2); // ======= Placeholder payment handlers ======= async function payWithPayPal() { // Client-side PayPal Buttons are supported but you should call your server to create an order setProcessing(true); setMessage(""); try { // Call your backend to create PayPal order and return orderID // const res = await fetch('/api/paypal/create-order', { method: 'POST', body: JSON.stringify({game, packageId, qty, playerId, email}) }); // const { orderID } = await res.json(); // then capture on the client or server setMessage('PAYPAL: Demo flow — implement server-side order creation and capture.'); } catch (err) { setMessage('Error creando orden PayPal'); } setProcessing(false); } async function payWithCard() { // Card payments should be implemented with Stripe (or other gateway) using PaymentIntents on the server. setProcessing(true); setMessage(""); try { // Example: call your backend to create a PaymentIntent // const res = await fetch('/api/stripe/create-payment-intent', { method: 'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({amount: Math.round(total*100), currency: 'usd', metadata:{game,packageId,playerId}}) }); // const { clientSecret } = await res.json(); // then confirm card payment with Stripe.js in the client. setMessage('CARD: Demo flow — connect Stripe and confirm PaymentIntent on client.'); } catch (err) { setMessage('Error procesando tarjeta'); } setProcessing(false); } async function payWithZinli() { // For Zinli you will likely redirect customers to a Zinli checkout/session URL or call their API. setProcessing(true); setMessage(""); try { // const res = await fetch('/api/zinli/create-session', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({amount: total, game, packageId, playerId}) }); // const { checkoutUrl } = await res.json(); // window.location.href = checkoutUrl; setMessage('Zinli: Demo — configure server-side integration and redirect to the checkout URL returned by your API.'); } catch (err) { setMessage('Error iniciando pago con Zinli'); } setProcessing(false); } async function payWithPagoMovil() { // "Pago Móvil" is typically a bank/mobile transfer flow — provide instructions or generate a reference. setProcessing(true); setMessage(""); try { // const res = await fetch('/api/pagomovil/create-reference', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({amount: total, game, packageId, playerId}) }); // const { reference } = await res.json(); setMessage('Pago Móvil: Demo — genera una referencia bancaria desde tu backend y muestra instrucciones al usuario.'); } catch (err) { setMessage('Error creando referencia de Pago Móvil'); } setProcessing(false); } function checkoutNow(method) { if (!playerId) { setMessage('Por favor ingresa el ID del jugador'); return; } if (!email) { setMessage('Por favor escribe un correo para el comprobante'); return; } if (method === 'paypal') return payWithPayPal(); if (method === 'card') return payWithCard(); if (method === 'zinli') return payWithZinli(); if (method === 'pagomovil') return payWithPagoMovil(); } return (
{/* Left - Hero / Info */}
Shopping Store

Shopping Store

Recargas instantáneas de Free Fire y Roblox

Selecciona juego

Paquete

{PACKAGES[game].map(pkg => ( ))}
setPlayerId(e.target.value)} className="w-full mt-1 p-2 rounded bg-white/10" placeholder="Ej: 123456789" />
setQty(Number(e.target.value))} className="w-20 mt-1 p-2 rounded bg-white/10" />
Total
${total}
setEmail(e.target.value)} className="w-full mt-1 p-2 rounded bg-white/10" placeholder="cliente@correo.com" />

Métodos de pago

  • PayPal
  • Tarjeta de crédito / débito (Stripe sugerido)
  • Zinli
  • Pago Móvil / Transferencia bancaria
{/* Right - Checkout actions */}

Pagar

Opción rápida

Si prefieres confirmar manualmente, puedes pagar y luego enviarnos el comprobante por WhatsApp.

Contactar por WhatsApp
{message &&
{message}
}
Notas técnicas
  1. Debes crear endpoints en tu servidor para manejar la creación de órdenes y sesiones de pago (PayPal / Stripe / Zinli / PagoMóvil).
  2. Para tarjetas, recomendamos Stripe con PaymentIntents y confirmar el pago en el cliente con Stripe.js.
  3. Zinli suele ofrecer checkout o integración por API; configura tu cuenta de comerciante y crea sessions desde el servidor.
); } /* README - qué debes hacer para que los pagos funcionen de verdad: 1. PayPal: Crear una app en PayPal Developer, obtener client ID y secret. Implementar en tu servidor endpoint POST /api/paypal/create-order que cree una order vía PayPal API y devuelva orderID. Usar PayPal Buttons in client or capture server-side. 2. Stripe (tarjetas): Crear PaymentIntent en tu servidor: POST /api/stripe/create-payment-intent {amount, currency, metadata} Usar Stripe.js en el cliente para confirmar card payment with clientSecret. 3. Zinli: Abrir cuenta comercial con Zinli y revisar su documentación (puede ser checkout redirect o API server-side). Implementa /api/zinli/create-session que devuelve checkoutUrl. 4. Pago Móvil: Generalmente genera una referencia o factura desde tu sistema bancario o proveedor local. Implementa un endpoint para generar referencia y mostrar instrucciones. 5. Seguridad: Nunca pongas secretos (API keys) en el cliente. Mantén todo en el servidor. Implementa webhooks para recibir confirmaciones de pago y completar la recarga en tu sistema. 6. Despliegue: Este componente espera Tailwind; crea una app con Vite/CRA + Tailwind y añade este componente como página. */