Stripe este o platformă de procesare a plăților care vă permite să adăugați o pagină de plată predefinită la un site web și să acceptați și să gestionați plățile online. Este foarte popular datorită ușurinței sale de utilizare, documentației extinse, suportului pentru plăți locale, opțiunilor de personalizare și branding, abonamente, facturare și prevenirea fraudei.
Folosind Stripe, puteți accepta plăți dintr-o varietate de surse, inclusiv carduri de credit și de debit, Apple Pay și Google Pay.
Adăugarea Stripe Checkout la o aplicație Next.js
Puteți integra Stripe checkout cu aplicații create cu diferite tehnologii, inclusiv Next.js.
Acest tutorial presupune că aveți un site de comerț electronic Next.js configurat și oferă doar un ghid despre cum să adăugați Stripe checkout pe site.
Configurarea unui cont Stripe și preluarea cheilor API
Pentru a utiliza Stripe checkout, trebuie să creați un cont Stripe și să obțineți cheile API. Cheile API constau dintr-o cheie publicabilă și o cheie secretă, pe care le veți folosi pentru a autentifica solicitările din aplicația dvs. către API-ul Stripe.
Urmați acești pași pentru a configura un cont Stripe:
- Du-te la Site-ul Stripe și faceți clic pe butonul „Înscriere”.
- Introduceți adresa de e-mail, numele complet, țara și parola și faceți clic pe butonul „Creați cont”.
- Verificați-vă e-mailul urmând instrucțiunile din e-mailul pe care vi-l trimite Stripe.
- Pe tabloul de bord Stripe, faceți clic pe „Activați plățile” și răspundeți la întrebările prompte pentru a finaliza procesul de configurare a contului. Aceste întrebări pot fi legate de numele companiei, adresa și informațiile bancare. În scopuri de dezvoltare, utilizați modul de testare.
- Copiați cheile API din fila „Dezvoltatori” în fișierul .env din folderul aplicației.
Acum veți putea accesa contul Stripe folosind cheile API.
Instalarea pachetului Stripe npm
Rulați această comandă pentru a instala pachetul Stripe npm.
npm install stripe
Importați biblioteca Stripe în pagina dvs. de componentă de plată.
import Dunga din'dunga';
În folderul API, creați un fișier nou numit fișier checkout-session.js. Inițializați obiectul Stripe cu cheile API pe care le-ați preluat din tabloul de bord Stripe.
const dungă = cere('dunga')(process.env. STRIPE_SECRET_KEY);
În funcția de gestionare, obțineți elementele pentru a verifica din parametrii corpului.
exportMod implicitasincronfuncţiemanipulator(cerere, res) {
const { item } = req.body;
};
Creați un obiect de sesiune de plată către funcția de gestionare și transmiteți articolele.
const sesiune = așteaptă stripe.checkout.sessions.create({
tipuri de metode_de_plată: ['card'],
elemente_rând: [
articol,
],
modul: 'plată',
succes_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Iată ce înseamnă nodurile pe care le transmiteți obiectului sesiune:
- tipurile_metode_de_plată: Tipurile de metodă de plată pe care le acceptă sesiunea de plată. Răsfoiți lista metodelor de plată disponibile în Documentație Stripe.
- elemente_rând: o listă de articole pe care utilizatorul le achiziționează.
- modul: Modul sesiunii de plată. Dacă articolele de plată includ cel puțin un articol recurent, treceți „abonament”.
- succes_url: URL Stripe va redirecționa utilizatorii dacă plata are succes
- cancel_url: URL Stripe va redirecționa utilizatorii dacă anulează plata.
În total, fișierul checkout-session.js ar trebui să arate astfel:
exportMod implicitasincronfuncţiemanipulator(cerere, res) {
dacă (metoda solicitată 'POST') {
const { coș } = req.body;încerca {
const sesiune = așteaptă stripe.checkout.sessions.create({
elemente_rând: [
cart
],
modul: 'plată',
succes_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} captură (eroare) {
res.status (err.statusCode || 500).json (err.message);
}
} altfel {
res.setHeader('Permite', 'POST');
starea res.(405).Sfârşit('Metoda nepermisa');
}
}
Această funcție folosește acum try/catch pentru a redirecționa utilizatorii atunci când apare o eroare în timpul plății. Acum că ați creat ruta API care va procesa plata, următorul pas este să creați o componentă de plată pentru a gestiona procesul de plată.
Consultați această postare pe crearea rutelor API în Next.js pentru o explicație mai aprofundată a rutelor API Next.js.
Crearea unei componente Checkout
Pentru a procesa finalizarea, trebuie să instalați biblioteca @stripe/stripe-js folosind NPM.
npm instalează @stripe/stripe-js
Biblioteca @stripe/stripe-js este un utilitar de încărcare care vă va ajuta să încărcați instanța Stripe.js.
Odată ce instalarea se termină, creați un fișier nou în directorul dvs. /components numit /components/checkout.js. Apoi apelați funcția loadstripe din biblioteca @stripe/stripe-js, trecând cheia publicabilă ca argument.
import { loadStripe } din„@stripe/stripe-js”;
const stripePromise = loadStripe(
proces.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() returnează o promisiune care se rezolvă cu un obiect Stripe nou creat odată ce Stripe.js s-a încărcat.
Apoi, adăugați o funcție pentru a crea o sesiune de plată în componentă.
exportMod implicitfuncţieVerifică({cart}) {
const handleCheckout = asincron () => {
încerca {
const dungă = așteaptă stripePromise;const checkoutSession = așteaptă axios.post(„/api/checkout-session”, {
cart,
});const rezultat = așteaptă stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
dacă (result.error) {
alertă (result.error.message);
}
} captură (eroare) {
consolă.log (eroare);
}
};
întoarcere (
</div>
);
}
Această funcție folosește Axios să apeleze API-ul ați creat în folderul /api pentru a prelua sesiunea de plată.
Adăugați un buton de finalizare a comenzii în instrucțiunea de returnare care va declanșa funcția handleCheckout atunci când faceți clic.
Puteți apela componenta de finalizare a comenzii pe pagina coșului.
Gestionarea redirecționărilor de la Stripe
În ruta API de finalizare, ați definit o adresă URL de succes și o adresă URL de anulare pe care banda trebuie să redirecționeze un utilizator atunci când procesul are succes sau eșuează. URL-ul de anulare se mapează la ruta /cancel, în timp ce URL-ul de succes se mapează la ruta /success. Adăugați două componente în folderul /pages numit succes și anulați pentru a gestiona aceste adrese URL.
În pages/success.js, adăugați componenta succes.
exportMod implicitfuncţieSucces() {
întoarcere<div>Plătiți cu succesdiv>;
}
În pages/cancel.js, adăugați componenta de anulare.
exportMod implicitfuncţieAnulare() {
întoarcere<div>A apărut o eroare în timpul plățiidiv>;
}Acum, Stripe va redirecționa către oricare dintre aceste pagini, în funcție de starea de plată.
Dacă utilizați Next.js 13, consultați acest tutorial cum funcționează folderul aplicației în Next.js 13 pentru a comuta din folderul /pages.
Opțiuni suplimentare de personalizare pentru pagina de plată
Din tabloul de bord Stripe, puteți personaliza pagina de plată pentru a se potrivi cu aspectul mărcii dvs. Puteți adăuga o siglă, o pictogramă, o culoare de marcă, o culoare de accent și chiar să utilizați propriul domeniu personalizat. În plus, atunci când creați sesiunea de plată, puteți adăuga metodele de plată pe care le preferați și, de asemenea, puteți specifica limba pe care trebuie să o afișați Stripe pe pagina de plată. Toate aceste opțiuni vă permit să personalizați procesul de plată pentru a se potrivi aplicației dvs.
De ce să folosiți Stripe pentru pagina de plată?
Deși vă puteți construi propriul serviciu de procesare a plăților, utilizarea unei platforme de plată precum Stripe este de obicei o opțiune mai bună. Stripe checkout vă ajută să reduceți timpul de dezvoltare, permițându-vă să începeți să acceptați plăți într-un timp scurt.
Mai mult, beneficiați de funcții suplimentare precum conformitatea PCI, recuperarea coșului, capabilități de reducere și capacitatea de a colecta informații de expediere și de a trimite facturi ulterioare plății.
