import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, Link } from '@inertiajs/react'; import { Save, ArrowLeft, CreditCard, Lock, HelpCircle } from 'lucide-react'; import { toast } from 'sonner'; interface Props { settings: { paystack_public_key: string; paystack_secret_key: string; paystack_currency: string; paystack_enabled: boolean; }; } export default function Payment({ settings }: Props) { const { data, setData, patch, processing, errors } = useForm({ paystack_public_key: settings.paystack_public_key || '', paystack_secret_key: settings.paystack_secret_key || '', paystack_currency: settings.paystack_currency || 'NGN', paystack_enabled: settings.paystack_enabled || false, }); const submit = (e: React.FormEvent) => { e.preventDefault(); patch(route('admin.settings.payment.update'), { onSuccess: () => toast.success('Payment settings updated'), }); }; return (
Back to Settings

Store & Payments

Configure your payment gateway credentials and preferences.

Paystack Integration

Collect payments on checkout using Paystack.

setData('paystack_public_key', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all disabled:bg-secondary/20 font-mono" placeholder="pk_test_..." /> {errors.paystack_public_key &&

{errors.paystack_public_key}

}
setData('paystack_secret_key', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-xl text-[14px] focus:border-accent outline-none transition-all disabled:bg-secondary/20 font-mono" placeholder="sk_test_..." /> {errors.paystack_secret_key &&

{errors.paystack_secret_key}

}
{errors.paystack_currency &&

{errors.paystack_currency}

}

Webhook Configuration

For seamless transactions, please configure the Webhook URL in your Paystack Dashboard to point to:

{typeof window !== 'undefined' ? `${window.location.origin}/store/payment/webhook` : 'https://yourdomain.com/store/payment/webhook'}
); }