import { ReactNode } from 'react';
import { Elements, PaymentElement, useStripe, useElements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY!);
// Componenta de Checkout intern cu Stripe Elements
export function CustomCheckoutForm({ clientSecret }: { clientSecret: string }) {
return (
<Elements stripe={stripePromise} options={{ clientSecret, appearance: { theme: 'stripe' } }}>
<PaymentForm />
</Elements>
);
}
function PaymentForm() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!stripe || !elements) return;
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: `${window.location.origin}/dashboard/billing/success`,
},
});
if (error) {
console.error('[Stripe Error]', error.message);
}
};
return (
<form onSubmit={handleSubmit} className="space-y-4">
{/* Aici poți pune propriile câmpuri de CUI / Facturare RO */}
<PaymentElement />
<button type="submit" disabled={!stripe} className="btn-primary w-full">
Plătește în siguranță
</button>
</form>
);
}Am văzut mulți devi că se blochează în dilema asta când lansează un SaaS: mergem pe Stripe Checkout sau băgăm Stripe Elements direct în app? Am folosit ambele variante în producție la vreo 5 proiecte în ultimii ani și răspunsul scurt e că depinde mult de faza în care ești și de cât timp ai de pierdut cu e-Factura și CUI-ul.
Nu există o variantă "corectă" universală, dar există alegeri proaste pentru momentul greșit.
Stripe Checkout: Lansare în 2 ore, dar cu un mic compromis la UX
Când testezi un MVP sau ești în primele luni de validare, Checkout e sfânt. Îți dă o pagină găzduită direct de Stripe, complet optimizată, cu Apple Pay, Google Pay și 3D Secure gata configurate.
La un proiect B2B pe care l-am lansat acum doi ani, am scos integrarea cu Checkout în mai puțin de 4 ore. Am economisit lejer o săptămână de muncă de frontend și testare pe mobil. N-am avut treabă cu validări de carduri, cazuri de eroare ciudate sau CSS pe iFrame-uri.
Unde scârțâie Checkout:
- Redirecționezi userul din aplicația ta pe domeniul
checkout.stripe.com. Pentru unii clienți enterprise mai conservatori din RO, schimbarea asta de domeniu încă ridică semne de întrebare. - Opțiunile de personalizare sunt limitate. Poți pune un logo, o culoare primară și cam atât.
- Dacă vrei să colectezi CUI/CIF pentru firmele din România ca să emiți factura automat prin SmartBill/FGO, trebuie să folosești
custom_fields. Merge, dar e un hack destul de urât vizual.
Stripe Elements: Control total și conversie mai bună în B2B
Când SaaS-ul a trecut de 300 de abonați plătitori, am decis să migram la Stripe Elements (mai exact pe noul PaymentElement). Am vrut ca totul să se întâmple la noi în aplicație, fără redirect-uri și cu un flow de checkout impecabil.
Rezultatul? Dintr-o dată am putut integra câmpul de CUI direct lângă formularul de card, legat la o validare automată prin API-ul ANAF înainte să procesăm plata. Experiența pentru o firmă din RO care vrea factură deductibilă pe loc s-a îmbunătățit enorm.
După migrarea la Elements, abandonul în pagina de checkout a scăzut cu aproximativ 14% la noi, în special pentru că userii nu mai simțeau că sunt "trimisi în altă parte".
Trade-off-ul sincer: E mult mai mult de muncă. Trebuie să gestionezi singur stările de loading, erorile de rețea, confirmarea 3D Secure (SCA) și să scrii cod responsabil de frontend. Dacă scrii prost codul de tratare a erorilor, clientul rămâne cu ecranul blocat și tu pierzi banii.
Ce e diferit la costuri și pe piața din RO?
Din punct de vedere al comisioanelor Stripe, costul per tranzacție e exact același (1.5% + 1 LEI pentru carduri SEE standard). Nu economisești niciun ban la Stripe dacă alegi Elements în loc de Checkout.
Diferența de cost vine din orele tale de dezvoltare:
- Checkout: ~4 ore de dev, mentenanță aproape zero când Stripe schimbă ceva.
- Elements: ~20-30 ore de dev (design, form validation, e-Factura/CUI integration, webhook-uri complexe, edge-cases de SCA).
Verdictul meu
Dacă ești la început și vrei doar să vezi dacă cineva plătește pentru ideea ta: folosește Stripe Checkout. Nu pierde 3 zile stilizând un formular de card pe care nu va da nimeni click.
Dacă ai deja un flux constant de venituri, targetezi clienți B2B din România care au nevoie de date de facturare complete și vrei un UX impecabil fără redirect: treci pe Stripe Elements.
Voi ce folosiți pe proiectele voastre de RO? Ați avut probleme cu clienți care s-au speriat de redirect-ul Stripe?