Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Stripe er en betalingsbehandlingsplatform, der giver dig mulighed for at tilføje en forudbygget betalingsside til et websted og acceptere og administrere onlinebetalinger. Det er meget populært på grund af dets brugervenlighed, omfattende dokumentation, support til lokale betalinger, tilpasnings- og brandingmuligheder, abonnementer, fakturering og forebyggelse af svindel.

Ved at bruge Stripe kan du acceptere betalinger fra en række forskellige kilder, herunder kredit- og betalingskort, Apple Pay og Google Pay.

Tilføjelse af Stripe Checkout til en Next.js-applikation

Du kan integrere Stripe checkout med applikationer oprettet med forskellige teknologier, herunder Next.js.

Denne vejledning antager, at du har en Next.js e-handelsside opsat og giver kun en guide til, hvordan du tilføjer Stripe checkout til webstedet.

Opsætning af en Stripe-konto og hentning af API-nøgler

instagram viewer

For at bruge Stripe checkout skal du oprette en Stripe-konto og få API-nøglerne. API-nøglerne består af en publicerbar nøgle og en hemmelig nøgle, som du skal bruge til at godkende anmodninger fra din applikation til Stripe API.

Følg disse trin for at oprette en Stripe-konto:

  1. Gå til Stripe hjemmeside og klik på knappen "Tilmeld".
  2. Indtast din e-mail, fulde navn, land og adgangskode, og klik på knappen "Opret konto".
  3. Bekræft din e-mail ved at følge instruktionerne i den e-mail, Stripe sender dig.
  4. På stribe-dashboardet skal du klikke på "Aktiver betalinger" og besvare de hurtige spørgsmål for at fuldføre kontoopsætningsprocessen. Disse spørgsmål kan handle om virksomhedens navn, adresse og bankoplysninger. Brug testtilstand til udviklingsformål.
  5. Kopier API-nøglerne fra fanen "Udviklere" til .env-filen i din app-mappe.

Du vil nu kunne få adgang til Stripe-kontoen ved hjælp af API-nøglerne.

Installation af Stripe npm-pakken

Kør denne kommando for at installere Stripe npm-pakken.

npm installere stribe

Importer Stripe-biblioteket til din kassekomponentside.

importere Stribe fra'stribe';

I API-mappen skal du oprette en ny fil kaldet checkout-session.js-fil. Initialiser Stripe-objektet med de API-nøgler, du hentede fra dit Stripe-dashboard.

konst stribe = kræve('stribe')(proces.env. STRIPE_SECRET_KEY);

I handlerfunktionen skal du få varerne til at tjekke ud fra kropsparametrene.

eksportStandardasynkronfungerehandler(kræve, res) {
konst { item } = req.body;
};

Opret et checkout-sessionsobjekt til handlerfunktionen, og send varerne.

konst session = vente stripe.checkout.sessions.create({
 betalingsmetodetyper: ['kort'],
 linjeposter: [
 vare,
 ],
 mode: 'betaling',
 success_url: `${req.headers.origin}/?success=true`,
 annuller_url: `${req.headers.origin}/?canceled=true`,
});

Her er, hvad de noder, du sender til sessionsobjektet, betyder:

  • betalingsmetodetyper: De betalingsmetodetyper, som betalingssessionen accepterer. Gennemse listen over tilgængelige betalingsmetoder i Stripe dokumentation.
  • linjeposter: En liste over varer, som brugeren køber.
  • mode: Tilstanden for Checkout-sessionen. Hvis kassen varer omfatter mindst én tilbagevendende vare, pass "abonnement".
  • success_url: URL-striben omdirigerer brugere, hvis betalingen lykkes
  • annuller_url: URL-striben omdirigerer brugere, hvis de annullerer betalingen.

Alt i alt skulle checkout-session.js-filen se sådan ud:

eksportStandardasynkronfungerehandler(kræve, res) {
hvis (anmodningsmetode 'STOLPE') {
konst { cart } = req.body;
prøve {
konst session = vente stripe.checkout.sessions.create({
 linjeposter: [
 vogn
 ],
 mode: 'betaling',
 success_url: `${req.headers.origin}/success`,
 annuller_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } fangst (fejl) {
 res.status (err.statusCode || 500).json (fejl.meddelelse);
 }
 } andet {
 res.setHeader('Give lov til', 'STOLPE');
 res.status(405).ende('Metode ikke tilladt');
 }
}

Denne funktion bruger nu try/catch til at omdirigere brugere, når der opstår en fejl under kassen. Nu hvor du har oprettet API-ruten, der skal behandle betalingen, er næste trin at oprette en kassekomponent til at håndtere kasseprocessen.

Tjek dette indlæg på oprettelse af API-ruter i Next.js for en mere dybdegående forklaring af Next.js API-ruter.

Oprettelse af en Checkout-komponent

For at behandle kassen skal du installere @stripe/stripe-js-biblioteket ved hjælp af NPM.

npm installer @stripe/stripe-js

@stripe/stripe-js-biblioteket er et indlæsningsværktøj, der hjælper dig med at indlæse Stripe.js-forekomsten.

Når installationen er færdig, skal du oprette en ny fil i din /components-mappe med navnet /components/checkout.js. Kald derefter loadstripe-funktionen fra @stripe/stripe-js-biblioteket, og send den publicerbare nøgle som et argument.

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

loadstripe() returnerer et løfte, der løses med et nyoprettet Stripe-objekt, når Stripe.js er indlæst.

Tilføj derefter en funktion for at oprette en checkout-session i komponenten.

eksportStandardfungereCheckout({vogn}) {
konst handleCheckout = asynkron () => {
prøve {
konst stribe = vente stribe Løfte;
konst checkoutSession = vente axios.post("/api/checkout-session", {
 vogn,
 });


konst resultat = vente stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
hvis (result.error) {
 advarsel (result.error.message);
 }
 } fangst (fejl) {
konsol.log (fejl);
 }
 };
Vend tilbage (


 </div>
 );
}

Denne funktion bruger Axios til at kalde API du oprettede i /api-mappen for at hente checkout-sessionen.

Tilføj en checkout-knap i returerklæringen, der udløser handleCheckout-funktionen, når der klikkes på den.

Du kan ringe til kassekomponenten på kurvsiden.

Håndtering af omdirigeringer fra Stripe

I checkout API-ruten definerede du en succes-URL og en annullerings-URL, som skal omdirigere en bruger, når processen er vellykket eller mislykkes. Annullerings-URL'en knytter sig til /cancel-ruten, mens succes-URL'en knytter sig til /success-ruten. Tilføj to komponenter i mappen /pages med navnet succes og annuller for at håndtere disse URL'er.

Tilføj succeskomponenten i pages/success.js.

eksportStandardfungereSucces() {
Vend tilbage<div>Check ud med succesdiv>;
}

Tilføj annulleringskomponenten i pages/cancel.js.

eksportStandardfungereAfbestille() {
Vend tilbage<div>Der opstod en fejl under kassendiv>;
}

Nu vil Stripe omdirigere til en af ​​disse sider afhængigt af betalingsstatus.

Hvis du bruger Next.js 13, se denne vejledning om hvordan app-mappen fungerer i Next.js 13 for at skifte fra mappen /pages.

Yderligere tilpasningsmuligheder for betalingssiden

Fra Stripe-dashboardet kan du tilpasse betalingssiden, så den matcher dit brands udseende. Du kan tilføje et logo, ikon, mærkefarve, accentfarve og endda bruge dit eget tilpassede domæne. Derudover kan du, når du opretter betalingssessionen, tilføje de betalingsmetoder, du foretrækker, og også angive det sprog, Stripe skal vise på betalingssiden. Alle disse muligheder giver dig mulighed for at tilpasse betalingsprocessen, så den passer til din ansøgning.

Hvorfor bruge Stripe til betalingssiden?

Mens du kan bygge din egen betalingsservice, er det normalt en bedre mulighed at bruge en betalingsplatform som Stripe. Stripe checkout hjælper dig med at reducere udviklingstiden, så du kan begynde at acceptere betalinger inden for kort tid.

Desuden får du yderligere funktioner som PCI-overholdelse, vogngendannelse, rabatmuligheder og muligheden for at indsamle forsendelsesoplysninger og sende efterbetalingsfakturaer.