);
}
function PaymentOptions({ amount, currency, onApprove, t }) {
const [processing, setProcessing] = useState(null);
const [showCard, setShowCard] = useState(false);
const [moreOpen, setMoreOpen] = useState(false);
function pay(method) {
if (method === "card") { setShowCard(true); return; }
setProcessing(method);
// Simulated 1-second hand-off. In production, each method calls its own SDK:
// paypal: window.paypal.Buttons({ createOrder, onApprove }).render(...)
// applepay: new ApplePaySession(3, request).begin() // or via Stripe PaymentRequest
// googlepay: google.payments.api.PaymentsClient.loadPaymentData(...) // or via Stripe
// klarna: Klarna.Payments.authorize(...) // or Stripe Payment Element with klarna enabled
// sepa: Stripe.confirmSepaDebitPayment(clientSecret, { payment_method: { sepa_debit: { iban }}})
// ideal: Stripe.confirmIdealPayment(clientSecret, { ... })
// bancontact:Stripe.confirmBancontactPayment(clientSecret, { ... })
setTimeout(() => {
setProcessing(null);
onApprove({ method, orderId: "DEMO-" + Date.now() });
}, 1100);
}
function payCard() {
setProcessing("card");
setTimeout(() => {
setProcessing(null);
onApprove({ method: "card", orderId: "DEMO-" + Date.now() });
}, 900);
}
const primary = PAY_METHODS.slice(0, 4);
const secondary = PAY_METHODS.slice(4);
return (
{primary.map(m => (
))}
{showCard && (
)}
{moreOpen && (
{secondary.map(m => (
))}
)}
{t("pay_demo_note")}
);
}
/* ============ Brand marks (inline SVG, brand-accurate but minimal) ============ */
function PayMark({ id, label }) {
if (id === "paypal") return (
);
if (id === "applepay") return (
Pay
);
if (id === "googlepay") return (
Pay
);
if (id === "card") return (
Card
VISA \u00B7 MC \u00B7 AMEX
);
if (id === "klarna") return (
Klarna.
);
if (id === "ideal") return (
iDEAL
);
if (id === "sepa") return (
SEPADirect Debit
);
if (id === "bancontact") return (
Banccontact
);
return label;
}
Object.assign(window, {
Doodles, StepDots, Confetti, OccasionGrid,
PostcardPreview, EmailPreview, SmsPreview,
PayPalButtons, PaymentOptions, PayMark, PAY_METHODS,
});