Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Stripe är en betalningshanteringsplattform som låter dig lägga till en förbyggd kassasida på en webbplats och acceptera och hantera onlinebetalningar. Det är mycket populärt på grund av dess användarvänlighet, omfattande dokumentation, stöd för lokala betalningar, anpassnings- och varumärkesalternativ, prenumerationer, fakturering och bedrägeriförebyggande.

Med Stripe kan du acceptera betalningar från en mängd olika källor, inklusive kredit- och betalkort, Apple Pay och Google Pay.

Lägger till Stripe Checkout i en Next.js-applikation

Du kan integrera Stripe-checkout med applikationer skapade med olika tekniker inklusive Next.js.

Den här handledningen förutsätter att du har en Next.js e-handelswebbplats inrättad och ger endast en guide om hur du lägger till Stripe-checkout på webbplatsen.

Konfigurera ett Stripe-konto och hämta API-nycklar

För att använda Stripe-checkout måste du skapa ett Stripe-konto och få API-nycklarna. API-nycklarna består av en publicerbar nyckel och en hemlig nyckel, som du använder för att autentisera förfrågningar från din applikation till Stripe API.

instagram viewer

Följ dessa steg för att skapa ett Stripe-konto:

  1. Gå till Stripes hemsida och klicka på knappen "Registrera dig".
  2. Ange din e-postadress, fullständiga namn, land och lösenord och klicka på knappen "Skapa konto".
  3. Verifiera din e-post genom att följa instruktionerna i e-postmeddelandet som Stripe skickar till dig.
  4. På stripe-instrumentpanelen klickar du på "Aktivera betalningar" och svarar på de snabba frågorna för att slutföra kontoinställningsprocessen. Dessa frågor kan handla om företagsnamn, adress och bankinformation. För utvecklingsändamål, använd testläge.
  5. Kopiera API-nycklarna från fliken "Utvecklare" till .env-filen i din app-mapp.

Du kommer nu att kunna komma åt Stripe-kontot med hjälp av API-nycklarna.

Installera Stripe npm-paketet

Kör det här kommandot för att installera Stripe npm-paketet.

npm installera stripe

Importera Stripe-biblioteket till din kassakomponentsida.

importera Rand från'rand';

Skapa en ny fil som heter checkout-session.js-filen i API-mappen. Initiera Stripe-objektet med API-nycklarna du hämtade från din Stripe-instrumentpanel.

konst rand = behöva('rand')(process.env. STRIPE_SECRET_KEY);

I hanterarfunktionen får du objekten att checka ut från kroppens parametrar.

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

Skapa ett kassasessionsobjekt till hanterarfunktionen och skicka objekten.

konst session = vänta stripe.checkout.sessions.create({
 payment_method_types: ['kort'],
 radposter: [
 Artikel,
 ],
 läge: 'betalning',
 success_url: `${req.headers.origin}/?success=true`,
 cancel_url: `${req.headers.origin}/?canceled=true`,
});

Här är vad noderna du skickar till sessionsobjektet betyder:

  • betalningsmetodtyper: Betalningsmetoden som kassasessionen accepterar. Bläddra i listan över tillgängliga betalningsmetoder i Stripe dokumentation.
  • radposter: En lista över artiklar som användaren köper.
  • läge: Läget för utcheckningssessionen. Om kassavarorna innehåller minst en återkommande artikel, passerar du "prenumeration".
  • success_url: URL Stripe omdirigerar användare om betalningen lyckas
  • cancel_url: URL Stripe omdirigerar användare om de avbryter betalningen.

Sammantaget bör checkout-session.js-filen se ut så här:

exporterastandardasynkronfungerahanterare(req, res) {
om (req.metod 'POSTA') {
konst { kundvagn } = req.body;
Prova {
konst session = vänta stripe.checkout.sessions.create({
 radposter: [
 vagn
 ],
 läge: 'betalning',
 success_url: `${req.headers.origin}/success`,
 cancel_url: `${req.headers.origin}/cancele`,
 });
 res.redirect(303, session.url);
 } fånga (fel) {
 res.status (err.statusCode || 500).json (fel.meddelande);
 }
 } annan {
 res.setHeader('Tillåta', 'POSTA');
 res.status(405).slutet('Metoden är inte tillåten');
 }
}

Den här funktionen använder nu try/catch för att omdirigera användare när ett fel uppstår under kassan. Nu när du har skapat API-rutten som ska behandla betalningen är nästa steg att skapa en kassakomponent för att hantera kassaprocessen.

Kolla in detta inlägg på skapa API-rutter i Next.js för en mer djupgående förklaring av Next.js API-rutter.

Skapa en kassakomponent

För att hantera kassan måste du installera @stripe/stripe-js-biblioteket med NPM.

npm installera @stripe/stripe-js

@stripe/stripe-js-biblioteket är ett laddningsverktyg som hjälper dig att ladda Stripe.js-instansen.

När installationen är klar, skapa en ny fil i din /components-katalog med namnet /components/checkout.js. Anropa sedan loadstripe-funktionen från @stripe/stripe-js-biblioteket och skicka den publicerbara nyckeln som ett argument.

importera { loadStripe } från'@stripe/stripe-js';
konst stripePromise = loadStripe(
 process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);

loadstripe() returnerar ett löfte som löser sig med ett nyskapat Stripe-objekt när Stripe.js har laddats.

Lägg sedan till en funktion för att skapa en utcheckningssession i komponenten.

exporterastandardfungeraKolla upp({vagn}) {
konst handleCheckout = asynkron () => {
Prova {
konst rand = vänta stripePromise;
konst checkoutSession = vänta axios.post("/api/checkout-session", {
 vagn,
 });


konst resultat = vänta stripe.redirectToCheckout({
 sessionId: checkoutSession.data.id,
 });
om (result.error) {
 alert (result.error.message);
 }
 } fånga (fel) {
trösta.log (fel);
 }
 };
lämna tillbaka (


 </div>
 );
}

Denna funktion använder Axios att anropa API du skapade i /api-mappen för att hämta utcheckningssessionen.

Lägg till en kassaknapp i returutdraget som utlöser handleCheckout-funktionen när du klickar på den.

Du kan ringa kassakomponenten på varukorgssidan.

Hantera omdirigeringar från Stripe

I checkout API-rutten definierade du en framgångs-URL och en avbryt-URL som ska omdirigera en användare när processen är framgångsrik eller misslyckas. Avbryt-URL: n mappas till /cancel-rutten, medan framgångsrik URL mappas till /success-rutten. Lägg till två komponenter i mappen /pages som heter success och avbryt för att hantera dessa webbadresser.

Lägg till framgångskomponenten i pages/success.js.

exporterastandardfungeraFramgång() {
lämna tillbaka<div>Utcheckningen lyckadesdiv>;
}

Lägg till avbryt-komponenten i pages/cancel.js.

exporterastandardfungeraAnnullera() {
lämna tillbaka<div>Ett fel uppstod under kassandiv>;
}

Nu kommer Stripe att omdirigera till någon av dessa sidor beroende på kassastatus.

Om du använder Next.js 13, se den här handledningen på hur appmappen fungerar i Next.js 13 för att byta från mappen /pages.

Ytterligare anpassningsalternativ för kassasidan

Från Stripes instrumentpanel kan du anpassa kassasidan för att matcha utseendet på ditt varumärke. Du kan lägga till en logotyp, ikon, varumärkesfärg, accentfärg och till och med använda din egen anpassade domän. När du skapar kassasessionen kan du dessutom lägga till de betalningsmetoder du föredrar och även ange vilket språk Stripe ska visa på kassasidan. Alla dessa alternativ låter dig anpassa kassaprocessen så att den passar din applikation.

Varför använda Stripe för kassasidan?

Även om du kan bygga din egen kassahanteringstjänst, är det vanligtvis ett bättre alternativ att använda en betalningsplattform som Stripe. Stripe checkout hjälper dig att minska utvecklingstiden, vilket gör att du kan börja acceptera betalningar inom en kort tid.

Dessutom får du ytterligare funktioner som PCI-kompatibilitet, återställning av kundvagn, rabattmöjligheter och möjligheten att samla in fraktinformation och skicka efterbetalningsfakturor.