const stripe = Stripe('pk_test_123456');
const elements = stripe.elements();
// Elements cere boilerplate pentru montare și stilizare manuală
const cardElement = elements.create('card', {
style: {
base: {
fontSize: '16px',
color: '#32325d',
fontFamily: '-apple-system, BlinkMacSystemFont, sans-serif',
},
},
});
cardElement.mount('#card-element');
// Trebuie să scrii manual handlerul de submit și gestionarea erorilor
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const { paymentMethod, error } = await stripe.createPaymentMethod({
type: 'card',
card: cardElement,
});
if (error) {
document.getElementById('card-errors').textContent = error.message;
} else {
// Trimite paymentMethod.id la backend-ul tău pentru procesare
console.log('Success:', paymentMethod.id);
}
});Am integrat Stripe în vreo șase proiecte în ultimii trei ani, de la e-commerce clasic până la SaaS-uri românești cu abonamente recurente. De fiecare dată când pornesc un proiect nou, mă lovesc de aceeași discuție cu clientul sau cu echipa: mergem pe Stripe Checkout sau construim noi formularul cu Stripe Elements?
Răspunsul scurt e că nu există o variantă universal corectă. Ambele au avantaje clare, dar vin la pachet cu niște compromisuri tehnice și de business de care e bine să te prinzi înainte să scrii prima linie de cod.
Stripe Checkout: Calea rapidă (și de ce o recomand la început)
La ultimul SaaS pe care l-am lansat, un MVP pentru gestionarea programărilor la clinici, am mers exclusiv pe Stripe Checkout. Am economisit cam 30% din timpul de build pe partea de plăți. Practic, trimiți userul pe o pagină securizată găzduită direct de Stripe, el plătește, iar Stripe îl trimite înapoi în aplicația ta.
De ce e mișto:
- Scrii foarte puțin cod pe frontend, scapi de design-ul formularelor de plată.
- Stripe se ocupă de validări, 3D Secure (obligatoriu în UE prin regulamentele SCA) și optimizarea pentru mobil.
- Suportă din start Apple Pay și Google Pay fără configurări dubioase în codul tău.
Dezavantajul major: Pierzi controlul asupra brandingului și al funnel-ului de conversie. Userul vede că pleacă de pe site-ul tău, ceea ce pe unii clienți mai sceptici din RO îi poate face să ezite. În plus, trackingul de analytics devine o mică durere de cap când ai redirect-uri externe, mai ales pe campaniile de Ads.
Stripe Elements: UX premium, dar cu cost de mentenanță
Am avut un alt proiect, un SaaS de e-mail marketing cu peste 4.000 de utilizatori activi, unde rata de abandon la checkout era critică. Acolo am trecut de la Checkout la Stripe Elements. Elements îți oferă niște input-uri securizate (iframe-uri mici) pe care le pui direct în formularul tău de checkout, pe domeniul tău.
Utilizatorul nu simte nicio secundă că părăsește platforma ta. UX-ul este impecabil și poți stiliza formularul să arate exact ca restul aplicației tale.
Trade-off-ul sincer: Pregătește-te să scrii de zece ori mai mult cod. Trebuie să gestionezi singur stările de loading, erorile de validare în timp real, gestionarea token-urilor de plată și logica de confirmare a plăților cu 3D Secure. Dacă Stripe schimbă ceva major în API-ul lor de Elements, e treaba ta să faci update rapid ca să nu-ți crape plățile în producție.
Cum se pupă cu ecosistemul din România (SmartBill, ANAF, e-Factura)
Aici e marea distracție pentru noi, ăștia care rulăm firme în RO. Indiferent ce alegi, ai nevoie de factură fiscală pentru fiecare tranzacție.
Dacă folosești Stripe Checkout, ești obligat să te bazezi pe Webhooks (checkout.session.completed). Când Stripe îți trimite webhook-ul, backend-ul tău trebuie să prindă datele, să le trimită prin API la SmartBill sau FGO, să genereze factura și să o trimită la ANAF. Am pățit ca webhook-urile Stripe să aibă întârzieri de câteva minute. Dacă userul vrea factura instant în dashboard, va trebui să pui un sistem de polling pe frontend sau să-l pui să aștepte.
Cu Stripe Elements, poți face fluxul sincron. Userul apasă pe „Plătește”, trimiți request-ul la serverul tău, confirmi plata prin Stripe API, generezi factura pe loc în SmartBill și îi întorci userului atât confirmarea plății, cât și factura PDF, într-un singur request. E mult mai curat din punct de vedere al logicii de business, dar ești responsabil de orice timeout între API-ul tău, Stripe și serviciul de facturare.
Voi ce folosiți pentru proiectele din RO? Preferați simplitatea Checkout-ului sau vreți control total cu Elements, chiar dacă asta înseamnă nopți pierdute cu teste de webhooks?