Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Stripe je platforma za obradu plaćanja koja vam omogućuje dodavanje unaprijed izgrađene stranice za naplatu na web mjesto te prihvaćanje i upravljanje mrežnim plaćanjima. Široko je popularan zbog svoje jednostavne upotrebe, opsežne dokumentacije, podrške za lokalna plaćanja, mogućnosti prilagodbe i brendiranja, pretplate, fakturiranja i sprječavanja prijevara.

Koristeći Stripe, možete prihvatiti plaćanja iz raznih izvora, uključujući kreditne i debitne kartice, Apple Pay i Google Pay.

Dodavanje Stripe Checkout aplikaciji Next.js

Možete integrirati Stripe checkout s aplikacijama stvorenim različitim tehnologijama uključujući Next.js.

Ovaj vodič pretpostavlja da ste postavili Next.js web mjesto za e-trgovinu i daje samo vodič o tome kako dodati Stripe checkout na web mjesto.

Postavljanje Stripe računa i dohvaćanje API ključeva

Da biste koristili Stripe checkout, morate stvoriti Stripe račun i dobiti API ključeve. API ključevi sastoje se od ključa koji se može objaviti i tajnog ključa, koji ćete koristiti za provjeru autentičnosti zahtjeva vaše aplikacije prema Stripe API-ju.

instagram viewer

Slijedite ove korake za postavljanje Stripe računa:

  1. Idi na Web stranica Stripe i kliknite gumb "Prijava".
  2. Unesite svoju e-poštu, puno ime, državu i zaporku i kliknite gumb "Izradi račun".
  3. Potvrdite svoju e-poštu slijedeći upute u e-poruci koju će vam Stripe poslati.
  4. Na prugastoj nadzornoj ploči kliknite "Aktiviraj plaćanja" i odgovorite na upitna pitanja kako biste dovršili postupak postavljanja računa. Ta se pitanja mogu odnositi na naziv tvrtke, adresu i podatke o banci. U razvojne svrhe koristite testni način rada.
  5. Kopirajte API ključeve s kartice “Developers” u .env datoteku u mapi svoje aplikacije.

Sada ćete moći pristupiti Stripe računu pomoću API ključeva.

Instalacija Stripe npm paketa

Pokrenite ovu naredbu da instalirate Stripe npm paket.

npm instalirati traku

Uvezite biblioteku Stripe na svoju stranicu komponente za naplatu.

uvoz Pruga iz'pruga';

U mapi API stvorite novu datoteku pod nazivom datoteka checkout-session.js. Inicijalizirajte Stripe objekt s API ključevima koje ste dohvatili s vaše Stripe nadzorne ploče.

konst pruga = zahtijevati('pruga')(process.env. STRIPE_SECRET_KEY);

U funkciji rukovatelja, uzmite stavke za odjavu iz parametara tijela.

izvozzadanoasinkronifunkcijarukovatelj(zahtjev, res) {
konst { stavka } = req.body;
};

Stvorite objekt sesije naplate funkciji rukovatelja i proslijedite stavke.

konst sesija = čekati stripe.checkout.sessions.create({
 vrste_načina_plaćanja: ['kartica'],
 stavke retka: [
 artikal,
 ],
 način rada: 'plaćanje',
 uspjeh_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Evo što znače čvorovi koje prosljeđujete objektu sesije:

  • vrste_načina_plaćanja: Vrste načina plaćanja koje prihvaća naplata. Pregledajte popis dostupnih načina plaćanja u Stripe dokumentacija.
  • line_items: popis stavki koje korisnik kupuje.
  • način rada: Način naplatne sesije. Ako stavke naplate uključuju barem jednu stavku koja se ponavlja, prolaze "pretplatu".
  • uspjeh_url: URL Stripe će preusmjeriti korisnike ako je plaćanje uspješno
  • cancel_url: URL Stripe će preusmjeriti korisnike ako otkažu plaćanje.

Sve u svemu, datoteka checkout-session.js trebala bi izgledati ovako:

izvozzadanoasinkronifunkcijarukovatelj(zahtjev, res) {
ako (potrebna metoda 'POST') {
konst { cart } = req.body;
probati {
konst sesija = čekati stripe.checkout.sessions.create({
 stavke retka: [
 kolica
 ],
 način rada: 'plaćanje',
 uspjeh_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } ulov (pogreška) {
 res.status (err.statusCode || 500).json (pogreška.poruka);
 }
 } drugo {
 res.setHeader('Dopusti', 'POST');
 res.status(405).kraj('Metoda nije dopuštena');
 }
}

Ova funkcija sada koristi try/catch za preusmjeravanje korisnika kada dođe do pogreške tijekom naplate. Sada kada ste kreirali API rutu koja će obraditi plaćanje, sljedeći korak je stvaranje komponente za naplatu koja će upravljati procesom naplate.

Pogledajte ovaj post na stvaranje API ruta u Next.js za dublje objašnjenje Next.js API ruta.

Stvaranje komponente Checkout

Za obradu naplate morate instalirati biblioteku @stripe/stripe-js koristeći NPM.

npm instalirajte @stripe/stripe-js

@stripe/stripe-js biblioteka uslužni je program za učitavanje koji će vam pomoći da učitate instancu Stripe.js.

Kada instalacija završi, stvorite novu datoteku u direktoriju /components pod nazivom /components/checkout.js. Zatim pozovite funkciju loadstripe iz biblioteke @stripe/stripe-js, prosljeđujući ključ za objavljivanje kao argument.

uvoz {loadStripe} iz'@stripe/stripe-js';
konst stripePromise = loadStripe(
 proces.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() vraća obećanje koje se rješava s novostvorenim Stripe objektom nakon što se Stripe.js učita.

Zatim dodajte funkciju za stvaranje sesije naplate u komponenti.

izvozzadanofunkcijaProvjeri({košarica}) {
konst handleCheckout = asinkroni () => {
probati {
konst pruga = čekati stripePromise;
konst checkoutSession = čekati axios.post("/api/checkout-session", {
 kolica,
 });


konst rezultat = čekati stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
ako (result.error) {
 upozorenje (rezultat.pogreška.poruka);
 }
 } ulov (pogreška) {
konzola.log (greška);
 }
 };
povratak (


 </div>
 );
}

Ova funkcija koristi Axios za pozivanje API-ja koju ste stvorili u mapi /api za preuzimanje sesije naplate.

Dodajte gumb za odjavu u povratnu izjavu koja će pokrenuti funkciju handleCheckout kada se klikne.

Možete pozvati komponentu za naplatu na stranici košarice.

Rukovanje preusmjeravanjima sa Stripea

U API ruti za naplatu definirali ste URL za uspjeh i URL za otkazivanje čija traka treba preusmjeriti korisnika kada je proces uspješan ili ne uspije. Cancel URL preslikava se na /cancel route, dok se uspješni URL preslikava na /success route. Dodajte dvije komponente u mapu /pages pod nazivom uspjeh i odustani za obradu ovih URL-ova.

U pages/success.js dodajte komponentu uspjeha.

izvozzadanofunkcijaUspjeh() {
povratak<div>Odjava je uspjeladiv>;
}

U pages/cancel.js dodajte komponentu cancel.

izvozzadanofunkcijaOtkazati() {
povratak<div>Došlo je do pogreške tijekom naplatediv>;
}

Sada će Stripe preusmjeriti na bilo koju od ovih stranica ovisno o statusu naplate.

Ako koristite Next.js 13, pogledajte ovaj vodič na kako radi mapa aplikacije u Next.js 13 za prebacivanje iz mape /pages.

Dodatne mogućnosti prilagodbe za stranicu za plaćanje

Na nadzornoj ploči Stripe možete prilagoditi stranicu za naplatu kako bi odgovarala izgledu vašeg brenda. Možete dodati logotip, ikonu, boju robne marke, boju akcenta, pa čak i koristiti vlastitu prilagođenu domenu. Osim toga, kada kreirate sesiju naplate, možete dodati načine plaćanja koje preferirate i također odrediti jezik koji bi Stripe trebao prikazati na stranici naplate. Sve te opcije omogućuju vam da prilagodite postupak naplate kako bi odgovarao vašoj aplikaciji.

Zašto koristiti Stripe za stranicu za plaćanje?

Iako možete izgraditi vlastitu uslugu obrade plaćanja, korištenje platforme za plaćanje kao što je Stripe obično je bolja opcija. Stripe checkout pomaže vam smanjiti vrijeme razvoja, omogućujući vam da počnete prihvaćati plaćanja unutar kratkog vremena.

Štoviše, dobivate dodatne značajke kao što su usklađenost s PCI standardom, oporavak košarice, mogućnosti popusta i mogućnost prikupljanja podataka o otpremi i slanja faktura nakon plaćanja.