const stripe = Stripe('pk_test_12345');
const options = {
clientSecret: '{{CLIENT_SECRET}}',
appearance: { theme: 'stripe' },
};
const elements = stripe.elements(options);
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: 'https://saas-ul-tau.ro/dashboard/success',
},
});
if (error) {
document.getElementById('error-message').textContent = error.message;
}
});Am integrat Stripe în vreo cinci proiecte diferite în ultimii trei ani, de la e-commerce simplu până la SaaS-uri cu abonamente recurente. De fiecare dată apare aceeași dilemă: mergem pe Stripe Checkout (găzduit de ei) sau ne complicăm cu Stripe Elements direct în aplicație? Răspunsul scurt e că depinde de cât de mult vrei să controlezi fluxul de facturare și cât timp vrei să aloci pentru dev.
Stripe Checkout: Varianta rapidă care îți salvează nopțile
Stripe Checkout este pagina lor găzduită. Tu doar trimiți userul către un URL generat pe backend, iar Stripe se ocupă de restul.
Am avut un proiect SaaS în RO cu aproximativ 1.200 de useri activi unde am mers exclusiv pe Checkout. Am economisit cam 4 zile de development la faza inițială. Partea mișto e că Stripe se ocupă automat de Apple Pay, Google Pay, validări de card și, cel mai important pentru piața din România, de fluxul de 3D Secure (SCA). Când banca din RO cere validare în aplicație (BCR, BT, ING), Stripe Checkout gestionează procesul impecabil, fără să-ți bați tu capul cu pop-up-uri blocate.
Dezavantajul? Redirect-ul. Scoți utilizatorul din aplicația ta. Pentru unii clienți B2B din România, mai puțin tehnici, chestia asta încă ridică semne de întrebare, deși brandul Stripe e tot mai cunoscut. Un alt minus major apare dacă vrei să integrezi facturarea automată prin SmartBill sau Factual. Ca să emiți factura fiscală corect pe firmă, ai nevoie de CUI și date fiscale complete. Deși Stripe Checkout are acum câmpuri custom, e destul de rigid dacă vrei să validezi CUI-ul în timp real prin API-ul ANAF înainte ca omul să apese pe butonul de plată.
Stripe Elements: Când UX-ul nativ este critic
Stripe Elements îți oferă seturi de input-uri gata securizate pe care le pui direct în formularul tău din pagină. Userul nu pleacă nicăieri, totul se întâmplă în dashboard-ul tău.
Am testat abordarea asta pe un alt SaaS unde designul trebuia să fie 100% integrat. Arată super profesionist, dar trade-off-ul pe partea de dev este masiv. Trebuie să scrii singur logica de loading, să gestionezi erorile de rețea, să randezi frumos mesajele când cardul e respins și să te asiguri că pop-up-ul de 3D Secure nu se blochează în vreun container CSS cu overflow: hidden pe mobil.
Cel mai mare avantaj la Elements în România este flexibilitatea formularului. Poți pune câmpul de CUI în stânga, să-l validezi live cu ANAF-ul, să calculezi dacă aplici sau nu TVA, și abia apoi să inițiezi plata, totul pe aceeași pagină, fără bătăi de cap la reconcilierea facturilor.
Cât te costă de fapt?
La nivel de comisioane Stripe, costul este identic. Diferența reală stă în orele de programare și mentenanță:
- Stripe Checkout: O zi de muncă cu tot cu teste. Codul de pe backend e extrem de simplu și stabil.
- Stripe Elements: Minimum 4-5 zile de dev și QA intens pe diverse browsere (Safari pe iOS e o plăcere deosebită aici).
Dacă ești la început cu un SaaS în România și vrei să validezi ideea, mergi pe Stripe Checkout. Nu are sens să pierzi o săptămână blocat în formulare de plată custom când poți livra produsul mai repede. Când treci de 10k EUR venit lunar și fiecare procent din rata de conversie contează, atunci merită să faci trecerea la Elements.
Voi ce folosiți acum pentru SaaS-urile voastre? V-ați lovit de probleme cu 3D Secure la băncile de la noi pe formulare custom?