Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Stripe je platforma za obdelavo plačil, ki vam omogoča, da na spletno mesto dodate vnaprej pripravljeno stran za nakup ter sprejemate in upravljate spletna plačila. Zelo priljubljen je zaradi enostavne uporabe, obsežne dokumentacije, podpore za lokalna plačila, možnosti prilagajanja in blagovne znamke, naročnine, izdajanja računov in preprečevanja goljufij.

Z uporabo Stripe lahko sprejemate plačila iz različnih virov, vključno s kreditnimi in debetnimi karticami, Apple Pay in Google Pay.

Dodajanje Stripe Checkout aplikaciji Next.js

Stripe checkout lahko integrirate z aplikacijami, ustvarjenimi z različnimi tehnologijami, vključno z Next.js.

Ta vadnica predpostavlja, da imate nastavljeno spletno mesto za e-trgovino Next.js, in ponuja samo vodnik o tem, kako na spletno mesto dodati blagajno Stripe.

Nastavitev računa Stripe in pridobivanje ključev API

instagram viewer

Če želite uporabljati Stripe checkout, morate ustvariti račun Stripe in pridobiti ključe API. Ključi API-ja so sestavljeni iz ključa, ki ga je mogoče objaviti, in skrivnega ključa, ki ga boste uporabili za preverjanje pristnosti zahtev iz vaše aplikacije do API-ja Stripe.

Za nastavitev računa Stripe sledite tem korakom:

  1. Pojdi na Spletno mesto Stripe in kliknite gumb "Prijava".
  2. Vnesite svoj e-poštni naslov, polno ime, državo in geslo ter kliknite gumb »Ustvari račun«.
  3. Potrdite svoj e-poštni naslov tako, da sledite navodilom v e-poštnem sporočilu, ki vam ga bo poslal Stripe.
  4. Na nadzorni plošči s črtami kliknite »Aktiviraj plačila« in odgovorite na pozivna vprašanja, da dokončate postopek nastavitve računa. Ta vprašanja se lahko nanašajo na ime podjetja, naslov in podatke o banki. Za razvojne namene uporabite testni način.
  5. Kopirajte ključe API iz zavihka »Razvijalci« v datoteko .env v mapi aplikacije.

Zdaj boste lahko dostopali do računa Stripe s ključi API.

Namestitev paketa Stripe npm

Zaženite ta ukaz, da namestite paket Stripe npm.

npm namestite stripe

Uvozite knjižnico Stripe na svojo stran komponente blagajne.

uvoz Stripe od'stripe';

V mapi API ustvarite novo datoteko, imenovano datoteka checkout-session.js. Inicializirajte objekt Stripe s ključi API-ja, ki ste jih pridobili z nadzorne plošče Stripe.

konst trak = zahtevati('stripe')(process.env. STRIPE_SECRET_KEY);

V funkciji obdelovalca pridobite elemente za odjavo iz parametrov telesa.

izvozprivzetoasinhfunkcijovodja(zahteva, res) {
konst { item } = req.body;
};

Ustvarite predmet seje nakupa funkciji obravnave in posredujte elemente.

konst seja = čakati stripe.checkout.sessions.create({
 vrste_načina_plačila: ['kartica'],
 line_items: [
 predmet,
 ],
 način: 'plačilo',
 uspeh_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Evo, kaj pomenijo vozlišča, ki jih posredujete objektu seje:

  • vrste_načina_plačila: Vrste plačilnih sredstev, ki jih sprejema blagajna. Prebrskajte seznam razpoložljivih načinov plačila v Stripe dokumentacija.
  • line_items: seznam artiklov, ki jih uporabnik kupuje.
  • način: Način zaključne seje. Če izdelki na blagajni vključujejo vsaj en ponavljajoči se predmet, prepustite »naročnino«.
  • uspeh_url: URL Stripe bo preusmeril uporabnike, če je plačilo uspešno
  • cancel_url: URL Stripe bo preusmeril uporabnike, če prekličejo plačilo.

Skupaj bi morala datoteka checkout-session.js izgledati takole:

izvozprivzetoasinhfunkcijovodja(zahteva, res) {
če (zahtevana metoda 'POST') {
konst { cart } = req.body;
poskusi {
konst seja = čakati stripe.checkout.sessions.create({
 line_items: [
 voziček
 ],
 način: 'plačilo',
 uspeh_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } ulov (napaka) {
 res.status (napaka.koda statusa || 500).json (napaka.sporočilo);
 }
 } drugače {
 res.setHeader('Dovoli', 'POST');
 res.status(405).end('Metoda ni dovoljena');
 }
}

Ta funkcija zdaj uporablja poskus/ulov za preusmeritev uporabnikov, ko pride do napake med dokončanjem nakupa. Zdaj, ko ste ustvarili pot API, ki bo obdelala plačilo, je naslednji korak ustvariti komponento za dokončanje nakupa, ki bo obravnavala postopek zaključka.

Oglejte si to objavo na ustvarjanje poti API v Next.js za bolj poglobljeno razlago poti API-ja Next.js.

Ustvarjanje komponente Checkout

Za obdelavo blagajne morate namestiti knjižnico @stripe/stripe-js z uporabo NPM.

npm namestite @stripe/stripe-js

Knjižnica @stripe/stripe-js je pripomoček za nalaganje, ki vam bo pomagal naložiti primerek Stripe.js.

Ko je namestitev končana, ustvarite novo datoteko v imeniku /components z imenom /components/checkout.js. Nato pokličite funkcijo loadstripe iz knjižnice @stripe/stripe-js in posredujte ključ za objavo kot argument.

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

loadstripe() vrne obljubo, ki se razreši z novo ustvarjenim objektom Stripe, ko je Stripe.js naložen.

Nato dodajte funkcijo za ustvarjanje zaključne seje v komponenti.

izvozprivzetofunkcijoPreveri({košarica}) {
konst handleCheckout = asinh () => {
poskusi {
konst trak = čakati stripePromise;
konst checkoutSession = čakati axios.post("/api/checkout-session", {
 voziček,
 });


konst rezultat = čakati stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
če (result.error) {
 opozorilo (rezultat.napaka.sporočilo);
 }
 } ulov (napaka) {
konzola.log (napaka);
 }
 };
vrnitev (


 </div>
 );
}

Ta funkcija uporablja Axios za klic API-ja ki ste ga ustvarili v mapi /api za pridobitev zaključne seje.

Dodajte gumb za odjavo v stavek return, ki bo ob kliku sprožil funkcijo handleCheckout.

Komponento blagajne lahko pokličete na strani košarice.

Ravnanje s preusmeritvami iz Stripe

Na poti API-ja za dokončanje nakupa ste definirali URL za uspeh in URL za preklic, ki mora trak preusmeriti uporabnika, ko je postopek uspešen ali neuspešen. URL za preklic se preslika v /cancel route, medtem ko se URL za uspeh preslika v /success route. Dodajte dve komponenti v mapo /pages z imenom uspeh in prekliči za obdelavo teh URL-jev.

V pages/success.js dodajte komponento uspeha.

izvozprivzetofunkcijoUspeh() {
vrnitev<div>Odjava je bila uspešnadiv>;
}

V pages/cancel.js dodajte komponento za preklic.

izvozprivzetofunkcijoPrekliči() {
vrnitev<div>Med odjavo je prišlo do napakediv>;
}

Zdaj bo Stripe preusmeril na eno od teh strani, odvisno od stanja na blagajni.

Če uporabljate Next.js 13, si oglejte to vadnico kako deluje mapa aplikacije v Next.js 13 za preklop iz mape /pages.

Dodatne možnosti prilagajanja za stran za nakup

Na nadzorni plošči Stripe lahko prilagodite stran za odjavo, da se ujema z videzom vaše blagovne znamke. Dodate lahko logotip, ikono, barvo blagovne znamke, barvo poudarkov in celo uporabite lastno domeno po meri. Poleg tega lahko pri ustvarjanju zaključne seje dodate načine plačila, ki jih želite, in tudi določite jezik, v katerem naj bo Stripe prikazan na strani za dokončanje nakupa. Vse te možnosti vam omogočajo, da postopek nakupa prilagodite svoji aplikaciji.

Zakaj uporabljati Stripe za stran za nakup?

Čeprav lahko zgradite svojo lastno storitev obdelave blagajne, je uporaba plačilne platforme, kot je Stripe, običajno boljša možnost. Stripe checkout vam pomaga skrajšati razvojni čas, kar vam omogoča, da začnete sprejemati plačila v kratkem času.

Poleg tega dobite dodatne funkcije, kot so skladnost s PCI, obnovitev košarice, zmožnosti popustov in možnost zbiranja podatkov o pošiljanju ter pošiljanja računov po plačilu.