34 lines
1.7 KiB
React
34 lines
1.7 KiB
React
import React from 'react';
|
|
import { FlaskConical } from 'lucide-react';
|
|
|
|
/**
|
|
* Shown when no real Stripe publishable key is configured. Payments run through
|
|
* the simulated checkout (no real charge); adding keys switches to live Stripe.
|
|
*/
|
|
const StripeConfigNotice = () => (
|
|
<div className="rounded-2xl border border-amber-300/60 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-4 md:p-5">
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-9 h-9 rounded-xl bg-amber-400/20 text-amber-600 dark:text-amber-300 flex items-center justify-center shrink-0">
|
|
<FlaskConical size={18} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-bold text-amber-800 dark:text-amber-200">
|
|
Demo mode — simulated Stripe Checkout
|
|
</p>
|
|
<p className="text-xs text-amber-700/80 dark:text-amber-200/70 mt-1 leading-relaxed">
|
|
No Stripe keys are configured, so "Pay Now" runs a simulated checkout
|
|
(no real charge). Add the keys below to switch to live Stripe-hosted
|
|
Checkout — no code changes needed:
|
|
</p>
|
|
<ul className="mt-2 space-y-1 text-[11px] font-mono text-amber-800 dark:text-amber-200/90">
|
|
<li>VITE_STRIPE_PUBLISHABLE_KEY <span className="opacity-60">(frontend)</span></li>
|
|
<li>STRIPE_SECRET_KEY <span className="opacity-60">(backend)</span></li>
|
|
<li>STRIPE_WEBHOOK_SECRET <span className="opacity-60">(backend / webhook)</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default StripeConfigNotice;
|