import { useState, useEffect } from 'react'; import AdminLayout from '@/Layouts/AdminLayout'; import { Button, Card, Modal, Toggle } from '@/Components/ui'; import { Head, router, usePage } from '@inertiajs/react'; import { useForm } from '@inertiajs/react'; import axios from 'axios'; import { useTranslation } from 'react-i18next'; // Brand marks served from public/images/gateways (Simple Icons). Gateways without // a bundled mark fall back to a brand-colored letter tile below. const GATEWAY_LOGOS = { stripe: '/images/gateways/stripe.svg', paypal: '/images/gateways/paypal.svg', paddle: '/images/gateways/paddle.svg', razorpay: '/images/gateways/razorpay.svg', xendit: '/images/gateways/xendit.svg', square: '/images/gateways/square.svg', mercadopago: '/images/gateways/mercadopago.svg', }; const GATEWAY_FALLBACK_COLORS = { cashfree: '#6930CA', tap: '#0EA5C6', paystack: '#09A5DB', paymob: '#0F4C81', myfatoorah: '#3266AC', mollie: '#111111', iyzico: '#1E64FF', }; function GatewayLogo({ gateway, name }) { const src = GATEWAY_LOGOS[gateway]; if (src) { return ( {`${name} ); } return ( {name.charAt(0).toUpperCase()} ); } export default function AdminPaymentGatewaysIndex({ gateways = [], flash = {} }) { const { t } = useTranslation(); const { props } = usePage(); const validationErrors = props.errors ?? {}; const [editGateway, setEditGateway] = useState(null); const [formData, setFormData] = useState(null); const [loading, setLoading] = useState(false); const [fetchError, setFetchError] = useState(null); const openEdit = async (gatewayKey) => { setEditGateway(gatewayKey); setFetchError(null); setFormData(null); setLoading(true); try { const { data } = await axios.get(route('admin.payment-gateways.show', gatewayKey)); setFormData(data); } catch (e) { setFetchError(e?.response?.data?.message || t('admin.gateway_load_failed')); } finally { setLoading(false); } }; const closeEdit = () => { setEditGateway(null); setFormData(null); setFetchError(null); }; return (

{t('admin.payment_gateways')}

{t('admin.view_payments')}
{flash?.success && (
{flash.success}
)}

{t('admin.payment_gateways_desc')}

{gateways.map((g) => (

{g.name}

{g.configured ? t('admin.configured') : t('admin.not_configured')}

{g.enabled ? t('common.enabled') : t('admin.disabled')} · {g.test_mode ? t('admin.test_mode') : t('admin.live_mode')}

))}
{ closeEdit(); router.reload(); }} />
); } function EditGatewayModal({ show, gatewayKey, initialData, loading, error, validationErrors = {}, onClose, onSaved }) { const { t } = useTranslation(); const { data, setData, put, processing } = useForm({ test_mode: true, enabled: false, test_publishable_key: '', test_secret_key: '', test_webhook_secret: '', live_publishable_key: '', live_secret_key: '', live_webhook_secret: '', }); useEffect(() => { if (!initialData || initialData.gateway !== gatewayKey) return; setData({ test_mode: initialData.test_mode, enabled: initialData.enabled, test_publishable_key: initialData.test_publishable_key ?? '', test_secret_key: initialData.test_secret_key ?? '', test_webhook_secret: initialData.test_webhook_secret ?? '', live_publishable_key: initialData.live_publishable_key ?? '', live_secret_key: initialData.live_secret_key ?? '', live_webhook_secret: initialData.live_webhook_secret ?? '', }); }, [gatewayKey, initialData]); const handleSubmit = (e) => { e.preventDefault(); put(route('admin.payment-gateways.update', gatewayKey), { preserveScroll: true, onSuccess: () => onSaved(), }); }; // Gateway-specific guidance. The stored credential keys are always publishable_key / // secret_key / webhook_secret; these hints explain what each holds per gateway. const GATEWAY_HINTS = { razorpay: { publishable: 'Razorpay Key ID (rzp_test_… / rzp_live_…).', secret: 'Razorpay Key Secret.', webhook: 'Webhook secret set in Razorpay Dashboard → Webhooks. Endpoint: /webhooks/razorpay', note: 'Razorpay uses native Subscriptions (auto-renewing). Map: Publishable Key = Key ID, Secret Key = Key Secret.', }, cashfree: { publishable: 'Cashfree App ID (x-client-id).', secret: 'Cashfree Secret Key (x-client-secret). Also used to verify webhook signatures.', webhook: 'Not required — Cashfree webhooks are verified with the Secret Key. Endpoint: /webhooks/cashfree', note: 'Cashfree uses native Subscriptions (auto-renewing) via its JS SDK. Map: Publishable Key = App ID, Secret Key = Secret Key. Leave Webhook Secret blank.', }, tap: { publishable: 'Not required for Tap — leave blank.', secret: 'Tap Secret API Key (sk_test_… / sk_live_…). Also verifies the webhook hashstring.', webhook: 'Not required — Tap webhooks are verified with the Secret Key. Endpoint: /webhooks/tap', note: 'Tap has no hosted auto-renew; renewals are merchant-initiated against the saved card by the billing:charge-recurring scheduler. Only the Secret Key is needed.', }, mollie: { publishable: 'Not required for Mollie — leave blank.', secret: 'Mollie API Key (test_… / live_…). The prefix selects test or live mode.', webhook: 'Not required — Mollie webhooks are verified by re-fetching the payment from the API. Endpoint: /webhooks/mollie', note: 'Mollie uses native Customers + Subscriptions (auto-renewing). Only the API Key is needed; its test_/live_ prefix decides the environment.', }, square: { publishable: 'Square Location ID (from Dashboard → Locations).', secret: 'Square Access Token (sandbox or production).', webhook: 'Square Webhook Signature Key (Dashboard → Webhooks). Endpoint: /webhooks/square', note: 'Square uses native Catalog + Subscriptions billed via emailed invoices (auto-renewing). Map: Publishable Key = Location ID, Secret Key = Access Token. Toggle Test Mode for the sandbox. Refunds are issued from the Square Dashboard.', }, iyzico: { publishable: 'iyzico API Key (from Settings → Merchant Settings).', secret: 'iyzico Secret Key. Signs every API call and verifies webhooks.', webhook: 'Your iyzico Merchant ID — not a secret key. It is required to verify the X-IYZ-SIGNATURE-V3 header. Endpoint: /webhooks/iyzico', note: 'iyzico uses native Subscriptions (auto-renewing) and supports TRY, USD and EUR only. Map: Publishable Key = API Key, Secret Key = Secret Key, Webhook Secret = Merchant ID. Toggle Test Mode for the sandbox. Subscription management is billed by iyzico after a 3-month free period. Note: iyzico requires a Turkish phone number and national ID (TCKN) per customer, which this app does not collect — set IYZICO_DEFAULT_GSM and IYZICO_DEFAULT_IDENTITY before going live.', }, mercadopago: { publishable: 'Not required for Mercado Pago — leave blank.', secret: 'Mercado Pago Access Token (TEST-… / APP_USR-…).', webhook: 'Optional signing secret from Dashboard → Webhooks (verifies the x-signature header). Endpoint: /webhooks/mercadopago', note: 'Mercado Pago uses native Preapproval subscriptions (auto-renewing). Only the Access Token is required; add the signing secret to verify webhook signatures.', }, }; const isStripe = gatewayKey === 'stripe'; const custom = GATEWAY_HINTS[gatewayKey]; const publishableHint = custom?.publishable ?? (isStripe ? t('admin.stripe_pk_hint') : t('admin.publishable_key_hint')); const secretHint = custom?.secret ?? (isStripe ? t('admin.stripe_sk_hint') : t('admin.secret_key_hint')); const webhookHint = custom?.webhook ?? (isStripe ? t('admin.stripe_webhook_hint') : t('admin.webhook_hint')); const gatewayNote = custom?.note ?? t('admin.gateway_credentials_note'); return (
{loading && (
{t('common.loading')}
)} {error && (
{error}
)} {!loading && initialData && ( <>

{t('admin.test_mode')}

{t('admin.test_mode_desc')}

setData('test_mode', v)} label={data.test_mode ? t('admin.toggle_on') : t('admin.toggle_off')} className="mt-2" />

{t('admin.test_credentials')}

setData('test_publishable_key', e.target.value)} placeholder={t('admin.stripe_pk_placeholder')} className="mt-1 w-full rounded-soft border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20" />

{publishableHint}

setData('test_secret_key', e.target.value)} placeholder={t('admin.stripe_sk_placeholder')} className={`mt-1 w-full rounded-soft border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20 ${ validationErrors.test_secret_key ? 'border-coral-500 bg-coral-50 dark:bg-coral-900/10 dark:border-coral-600' : 'border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800' } text-neutral-900 dark:text-neutral-100`} /> {validationErrors.test_secret_key && (

{validationErrors.test_secret_key}

)}

{secretHint}

setData('test_webhook_secret', e.target.value)} placeholder={t('admin.webhook_secret_placeholder')} className="mt-1 w-full rounded-soft border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20" />

{webhookHint}

{t('admin.live_credentials')}

setData('live_publishable_key', e.target.value)} placeholder={t('admin.stripe_pk_live_placeholder')} className="mt-1 w-full rounded-soft border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20" />
setData('live_secret_key', e.target.value)} placeholder={t('admin.stripe_sk_live_placeholder')} className={`mt-1 w-full rounded-soft border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20 ${ validationErrors.live_secret_key ? 'border-coral-500 bg-coral-50 dark:bg-coral-900/10 dark:border-coral-600' : 'border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800' } text-neutral-900 dark:text-neutral-100`} /> {validationErrors.live_secret_key && (

{validationErrors.live_secret_key}

)}
setData('live_webhook_secret', e.target.value)} placeholder={t('admin.webhook_secret_placeholder')} className="mt-1 w-full rounded-soft border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 text-neutral-900 dark:text-neutral-100 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20" />
{t('admin.note_label')}: {gatewayNote}

{t('common.enabled')}

{t('admin.gateway_enable_desc')}

setData('enabled', v)} label={data.enabled ? t('common.enabled') : t('admin.disabled')} className="mt-2" />
)} {!loading && initialData && ( )}
); }