Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Stripe on maksunkäsittelyalusta, jonka avulla voit lisätä valmiiksi rakennetun kassasivun verkkosivustolle ja hyväksyä ja hallita verkkomaksuja. Se on laajalti suosittu helppokäyttöisyytensä, kattavan dokumentaation, paikallisten maksujen tuen, räätälöinti- ja brändäysvaihtoehtojen, tilausten, laskutuksen ja petostentorjunnan ansiosta.

Stripen avulla voit hyväksyä maksuja useista lähteistä, mukaan lukien luotto- ja pankkikortit, Apple Pay ja Google Pay.

Stripe Checkoutin lisääminen Next.js-sovellukseen

Voit integroida Stripe Checkoutin sovelluksiin, jotka on luotu eri tekniikoilla, mukaan lukien Next.js.

Tässä opetusohjelmassa oletetaan, että Next.js-verkkokauppasivusto on määritetty, ja siinä on vain opas Stripe Checkoutin lisäämiseen sivustoon.

Stripe-tilin luominen ja API-avaimien hakeminen

Stripe Checkoutin käyttäminen edellyttää, että luot Stripe-tilin ja hankit API-avaimet. API-avaimet koostuvat julkaistavasta avaimesta ja salaisesta avaimesta, joita käytät sovelluksesi Stripe API: lle lähettämien pyyntöjen todentamiseen.

instagram viewer

Luo Stripe-tili seuraavasti:

  1. Siirry kohtaan Stripen verkkosivusto ja napsauta "Rekisteröidy" -painiketta.
  2. Kirjoita sähköpostiosoitteesi, koko nimesi, maasi ja salasanasi ja napsauta "Luo tili" -painiketta.
  3. Vahvista sähköpostiosoitteesi noudattamalla Stripen sinulle lähettämän sähköpostin ohjeita.
  4. Napsauta raidan kojelaudassa "Aktivoi maksut" ja vastaa kysyttyihin kysymyksiin viimeistelläksesi tilin luomisprosessin. Nämä kysymykset voivat koskea yrityksen nimeä, osoitetta ja pankkitietoja. Käytä kehitystarkoituksiin testitilaa.
  5. Kopioi API-avaimet "Kehittäjät"-välilehdeltä sovelluskansiosi .env-tiedostoon.

Voit nyt käyttää Stripe-tiliä API-avaimilla.

Stripe npm -paketin asentaminen

Suorita tämä komento asentaaksesi Stripe npm -paketin.

npm asennusraita

Tuo Stripe-kirjasto kassakomponenttisivullesi.

tuonti Raita alkaen'raita';

Luo API-kansioon uusi tiedosto nimeltä checkout-session.js-tiedosto. Alusta Stripe-objekti Stripe-hallintapaneelista hakemillasi API-avaimilla.

konst raita = vaatia('raita')(process.env. STRIPE_SECRET_KEY);

Käsittelijätoiminnossa saa tuotteet tarkastettaviksi kehon parametreista.

viedäoletuksenaasynktoimintokäsittelijä(req, res) {
konst { item } = req.body;
};

Luo kassaistuntoobjekti käsittelijäfunktiolle ja välitä tuotteet.

konst istunto = odottaa stripe.checkout.sessions.create({
 payment_method_types: ['kortti'],
 rivikohdat: [
 esine,
 ],
 tila: 'maksu',
 menestys_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Tässä on mitä istuntoobjektiin välittämäsi solmut tarkoittavat:

  • maksutavan_tyypit: Maksutapatyypit, jotka kassaistunto hyväksyy. Selaa käytettävissä olevien maksutapojen luetteloa osoitteessa Raidallinen dokumentaatio.
  • rivi_kohdat: Luettelo tuotteista, joita käyttäjä ostaa.
  • -tilassa: Checkout-istunnon tila. Jos kassatuotteissa on vähintään yksi toistuva tuotepassi "tilaus".
  • menestys_url: URL Stripe uudelleenohjaa käyttäjät, jos maksu onnistuu
  • cancel_url: URL Stripe uudelleenohjaa käyttäjät, jos he peruuttavat maksun.

Kaiken kaikkiaan checkout-session.js-tiedoston pitäisi näyttää tältä:

viedäoletuksenaasynktoimintokäsittelijä(req, res) {
jos (tarvittava menetelmä 'LÄHETTÄÄ') {
konst { cart } = tarvittava runko;
yrittää {
konst istunto = odottaa stripe.checkout.sessions.create({
 rivikohdat: [
 kärry
 ],
 tila: 'maksu',
 menestys_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } ottaa kiinni (err) {
 res.status (err.statusCode || 500.json (err.message);
 }
 } muu {
 res.setHeader('Sallia', 'LÄHETTÄÄ');
 res.status(405).end('Menetelmä Ei Sallittu');
 }
}

Tämä toiminto käyttää nyt try/catch-komentoa käyttäjien uudelleenohjaamiseen, kun kassan aikana tapahtuu virhe. Nyt kun olet luonut API-reitin, joka käsittelee maksun, seuraava vaihe on luoda kassakomponentti, joka käsittelee kassaprosessin.

Katso tämä postaus osoitteessa API-reittien luominen Next.js: ssä saadaksesi tarkemman selityksen Next.js API -reiteistä.

Checkout-komponentin luominen

Kassan käsittelyä varten sinun on asennettava @stripe/stripe-js-kirjasto NPM: n avulla.

npm asennus @stripe/stripe-js

@stripe/stripe-js-kirjasto on latausapuohjelma, joka auttaa lataamaan Stripe.js-instanssin.

Kun asennus on valmis, luo /components-hakemistoosi uusi tiedosto nimeltä /components/checkout.js. Kutsu sitten loadstripe-funktio @stripe/stripe-js-kirjastosta välittäen julkaisuavaimen argumenttina.

tuonti { loadStripe } alkaen'@raita/raita-js';
konst stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() palauttaa lupauksen, joka ratkaisee uuden Stripe-objektin, kun Stripe.js on latautunut.

Lisää seuraavaksi toiminto kassaistunnon luomiseksi komponenttiin.

viedäoletuksenatoimintoTarkista({kärry}) {
konst handleCheckout = asynk () => {
yrittää {
konst raita = odottaa RaitaPromise;
konst checkoutSession = odottaa axios.post("/api/checkout-session", {
 kärry,
 });


konst tulos = odottaa stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
jos (tulos.virhe) {
 hälytys (result.error.message);
 }
 } ottaa kiinni (virhe) {
konsoli.log (virhe);
 }
 };
palata (


 </div>
 );
}

Tämä toiminto käyttää Axios kutsua API loit /api-kansioon kassaistunnon hakemiseksi.

Lisää palautuslausekkeeseen kassapainike, joka käynnistää handleCheckout-toiminnon, kun sitä napsautetaan.

Voit soittaa ostoskorisivulla olevaan kassakomponenttiin.

Stripestä tulevien uudelleenohjausten käsittely

Määritit kassa-API-reitillä onnistumis-URL-osoitteen ja peruutus-URL-osoitteen, jonka nauhan tulee ohjata käyttäjä uudelleen, kun prosessi onnistuu tai epäonnistuu. Peruutus-URL-osoite liittyy /peruuta reittiin, kun taas onnistuneen URL-osoite kartoitetaan /success-reitille. Lisää kaksi komponenttia /pages-kansioon nimeltä menestys ja peruuta käsitelläksesi näitä URL-osoitteita.

Lisää onnistumiskomponentti tiedostoon pages/success.js.

viedäoletuksenatoimintoMenestys() {
palata<div>Check out onnistuidiv>;
}

Lisää peruutuskomponentti hakemistoon pages/cancel.js.

viedäoletuksenatoimintoPeruuttaa() {
palata<div>Maksun aikana tapahtui virhediv>;
}

Nyt Stripe uudelleenohjaa jommallekummalle näistä sivuista kassan tilasta riippuen.

Jos käytät Next.js 13:a, katso tämä opetusohjelma aiheesta miten sovelluskansio toimii Next.js 13:ssa vaihtaaksesi /pages-kansiosta.

Lisämuokkausvaihtoehdot kassasivulle

Stripe-hallintapaneelista voit mukauttaa kassasivun vastaamaan brändisi ilmettä. Voit lisätä logon, kuvakkeen, tuotemerkin värin, korostusvärin ja jopa käyttää omaa mukautettua verkkotunnustasi. Lisäksi voit kassalle luodessasi lisätä haluamasi maksutavat ja määrittää kielen, jonka Stripen tulee näyttää kassasivulla. Kaikkien näiden vaihtoehtojen avulla voit mukauttaa kassaprosessia hakemuksesi mukaan.

Miksi käyttää Stripeä kassasivulle?

Vaikka voit rakentaa oman kassankäsittelypalvelun, Stripen kaltaisen maksualustan käyttö on yleensä parempi vaihtoehto. Stripe Checkout auttaa sinua lyhentämään kehitysaikaa, jolloin voit aloittaa maksujen vastaanottamisen lyhyessä ajassa.

Lisäksi saat lisäominaisuuksia, kuten PCI-yhteensopivuuden, ostoskorin palautuksen, alennusominaisuudet ja mahdollisuuden kerätä toimitustietoja ja lähettää jälkimaksulaskuja.