--- title: Hvordan legge til betalingsfunksjonalitet i Next.js-apper ved hjelp av Stripe - elpassion.com description: Lær hvordan du lager en enkel donasjonsknapp ved å integrere Stripe med en Next.js-applikasjon. image: https://www.elpassion.com/hubfs/stripe-next.js-cover-2.png --- [Back to blog ](https://www.elpassion.com/blog?hsLang=no) 7 mars 2025 (updated: 7 mars 2025) # Hvordan legge til betalingsfunksjonalitet i Next.js-apper ved hjelp av Stripe ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) by Dawid Kiełbasa - [ Development ](https://www.elpassion.com/no/blog/tag/development) Chapters ![](https://www.elpassion.com/hubfs/stripe-next.js-cover-2.png) ![](https://www.elpassion.com/hubfs/stripe-next.js-cover-2.png) Show contents Hide contents Lær hvordan du lager en enkel donasjonsknapp ved å integrere Stripe med en Next.js-applikasjon. Integrasjon med ulike betalingsleverandører er veldig vanlig. Imidlertid kan emnet betalinger virke veldig komplekst og forvirrende for noen som er ny på dette området. I dette innlegget vil vi lage en enkel integrasjon av Stripe med en Next.js-applikasjon ved å lage en enkel donasjonsknapp. ## Hva er Stripe? Kort sagt, Stripe er en plattform som muliggjør online betalingsbehandling. I tillegg til standard kredittkortbetalinger, har vi muligheten til å bruke mange andre betalingsmetoder som bankoverføringer, mobilbetalinger, osv. Stripe selv deler betalingsmetodene inn i 8 forskjellige typer, en fullstendig liste med beskrivelser kan finnes [her](https://stripe.com/docs/payments/payment-methods/overview). Å bruke Stripe frigjør oss også fra ansvaret for å lagre brukernes private data, ettersom hele transaksjonsprosessen skjer direkte på leverandørens side. Men hvor begynner vi hvis vi ønsker å integrere Stripe med applikasjonen vår? ### Opprette Stripe-konto Selvfølgelig må vi starte med å opprette en konto. Vi kan finne registreringsskjemaet [her](https://dashboard.stripe.com/login). Hele prosessen er helt gratis og krever ikke å knytte et kredittkort. Etter å ha logget inn, bør vi sørge for at vi er i den såkalte [testmodusen.](https://stripe.com/docs/testing) ![Stripe Test Mode](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/stripe-test-mode.png?width=362&height=94&name=stripe-test-mode.png)Stripe testmodus Hva er testmodus? Det er en spesiell testmodus som lar oss teste Stripe-integrasjonen uten å faktisk gjøre reelle transaksjoner. Vi har muligheten til å bruke fiktive kredittkort fra hvilket som helst land der integrasjon med Stripe er mulig. Eksempler på kortnumre for spesifikke land kan finnes, for eksempel [her](https://stripe.com/docs/testing#europe-and-middle-east).  Dette lar oss simulere stripe-betalinger uten noen økonomisk risiko. For oss er utviklerpanelets fane veldig viktig for øyeblikket. Etter å ha klikket på Utviklere-knappen, vil vi bli tatt til et panel som ser slik ut: ![Stripe Developer panel](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/stripe-developer-panel.png?width=1613&height=665&name=stripe-developer-panel.png)Utviklerpanel Det finnes ulike statistikker over utførte forespørseler osv. På høyre side er det en seksjon kalt Nylige feil, som inneholder informasjon om de siste feilene som oppstod under transaksjonsutførelsen. Ved å klikke på en eksempelforespørsel med en feil, kan vi se ikke bare informasjon om typen feil, men også forespørselens innhold som vi sendte og svaret som ble returnert. Dette påvirker utvikleropplevelsen positivt og gjør integrasjonsprosessen enklere. ### Stripe API-nøkler I fanen for API-nøkler bør vi ha tilgang til både de Publiserbare og Hemmelige nøklene. De vil være nødvendige for integrasjonen med Stripe. ![Stripe API Keys](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/Stripe-api-keys.png?width=1590&height=390&name=Stripe-api-keys.png)API-nøkler Ok, vi har kontoen vår. La oss gå videre til koden nå. ## Next.js oppsett Før vi begynner med integrasjonen, må vi først sette opp prosjektet vårt. I tillegg til Next, vil vi bruke Tailwind CSS for raskt å style komponentene våre. På [Tailwind](https://tailwindcss.com/docs/guides/nextjs) nettsiden kan vi finne en komplett, seks-trinns instruksjon om hvordan vi installerer Next.js med Tailwind. Etter å ha fullført trinn 1-4, kan vi kjøre prosjektet vårt med kommandoen npm run dev. Vi bør se hjemmesiden på localhost:3000.   [![Tailwind CSS - Hvordan fungerer det og hvorfor bruker alle det?](https://www.elpassion.com/hubfs/0%20blog%20post%20teaser%20mini/tailwind-css-mini.png)](https://www.elpassion.com/blog/tailwind-css-how-does-it-work?hsLang=no) #### [Du vil kanskje også lese: Tailwind CSS - Hvordan fungerer det og hvorfor bruker alle det?](https://www.elpassion.com/blog/tailwind-css-how-does-it-work?hsLang=no)   Flott, vi har det på plass! For Stripe-integrasjonen trenger vi noen flere ting. Først, la oss installere de nødvendige bibliotekene med kommandoen *npm install stripe @stripe/stripe-js*. For det andre, la oss opprette en *.env.local* fil og legge til API-nøklene våre, som vi kan få fra Stripe-dashbordet. ![ENV local file](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/env-local-file.png?width=493&height=131&name=env-local-file.png).env-fil Vi vil bruke to typer nøkler, hemmelig og offentlig. Den hemmelige nøkkelen vil være nødvendig for server-side operasjoner som å opprette en økt, mens den offentlige nøkkelen vil bli brukt i nettleseren. Derfor må vi huske å bruke prefikset *NEXT_PUBLIC* i navnet på miljøvariabelen. Dette vil automatisk eksponere miljøvariabelen til nettleseren. Husk å ikke dele API-nøklene dine med noen! ### Opprette en Stripe betalingsøkt For å gjøre det mulig for brukere å foreta betalinger i applikasjonen vår, må vi på en eller annen måte autorisere dem. Stripe har forberedt et spesielt API som lar oss opprette økter for hver betaling på en veldig enkel måte. Men for at hele prosessen skal være så sikker som mulig, kan vi ikke gjøre dette i nettleseren. Vi må legge til et nytt endepunkt i API-et vårt som vil returnere det opprettede sesjonsobjektet. Dette endepunktet vil håndtere stripe betalingsprosessen sikkert på serversiden. Takket være at vi bruker Next.js, kan vi bruke såkalte [API Routes](https://nextjs.org/docs/pages/building-your-application/routing/api-routes) for å bygge vårt eget API. I */pages/api/checkout*-mappen, la oss legge til en ny fil med navnet *session.ts*. Hele oppsettet ser slik ut. La oss dele hele koden inn i flere elementer og diskutere dem én etter én. Helt på toppen, i linjene 4 til 6, initialiserer vi stripe-objektet som vi må gi vår secret_key. Deretter, fra linje 8, begynner API-ruten vår. Hver forespørsel som treffer */api/checkout/session*-adressen vil gå gjennom denne handleren, så vi må huske å håndtere de riktige HTTP-metodene som GET, POST, osv. Men i vårt enkle eksempel vil vi ikke bekymre oss for dette. For å la brukeren foreta en donasjon, må vi vite det spesifikke beløpet vi snakker om, så hver forespørsel må inneholde *amount*-egenskapen. Vi henter den fra kroppen av forespørselen vår, og nedenfor sjekker vi om den er oppgitt. Hvis alt er i orden, oppretter vi en ny økt ved hjelp av *stripe.checkout.sessions.create* metoden. Som parametere til metoden gir vi informasjon om hva brukeren vil se på betalingsskjermen. Vi spesifiserer tilgjengelige betalingsmetoder, varene som betalingen gjelder, og success_url, cancel_url, som angir adressene som brukeren skal ledes til etter en vellykket eller mislykket transaksjon. I vårt tilfelle vil det ganske enkelt være startsiden til applikasjonen vår. Metoden *stripe.checkout.sessions.create* vil returnere et sesjonsobjekt som vil inneholde mye informasjon. I vårt enkle eksempel trenger vi bare sesjons-id-en, som vi returnerer i svaret. Så den forberedte API-ruten vil opprette en økt for oss og deretter returnere id-en, som vil være nyttig for å omdirigere brukeren til den aktuelle siden etter å ha klikket på donasjonsknappen. ## Donasjons skjema med Stripe betalingsintegrasjon Vi har vår endepunkt, la oss lage et enkelt skjema der brukere kan velge ett av tre tilgjengelige donasjonsalternativer. Dette skjemaet vil bruke stripe checkout for å gi en sikker og sømløs betalingsopplevelse for brukerne. La oss opprette en mappe kalt components i hovedkatalogen til prosjektet vårt og legge til en fil *DonateButtons.tsx* til den. Dette er en enkel komponent som tar et array av tilgjengelige donasjonsalternativer og gjengir radio input basert på dem. Nå, la oss lage skjemaet vårt og gjengi de tilgjengelige donasjonsalternativene i det. I components-mappen, la oss legge til en fil *DonateForm.tsx* som ser slik ut: I begynnelsen bruker vi *stripe-js* biblioteket for å hente Stripe-objektet. Vi må gi vår *publishable_key* til loadStripe-funksjonen, som vi la til tidligere i .env.local-filen. I komponenten, la oss lage et nytt skjema der vi gjengir knappene våre sammen med en send-knapp. Skjemaet tar vår *handleSubmit* funksjon som *onSubmit* metoden, der vi gjør en forespørsel til vår sesjons endepunkt. I begynnelsen av funksjonen henter vi *amount* verdien fra skjemaet vårt ved hjelp av FormData, og deretter gjør vi en forespørsel til */api/checkout/session *endepunktet. Som vi kanskje husker, returnerer vår endepunkt id-en til den nyopprettede sesjonen. Vi kan nå bruke den oppnådde id-en i *stripe.redirectToCheckout* metoden for å omdirigere brukeren til den aktuelle transaksjonssiden. Til slutt la oss gjengi den opprettede komponenten i */pages/index.tsx* filen. Etter å ha startet prosjektet, bør vi se at donasjonsskjemaet vårt fungerer. ![Stripe Donasjons skjema](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/donation-form-stripe.gif?width=600&height=425&name=donation-form-stripe.gif)Donasjons skjema Vi kan nå teste det ved å bruke de falske kredittkortene nevnt tidligere. Hver betaling som gjøres vil også vises i betalingsfanen på Stripe-nettstedet. ![Stripe Betalinger](https://www.elpassion.com/hs-fs/hubfs/BLOG%20IMAGES/stripe-payments.png?width=1437&height=267&name=stripe-payments.png)Betaling fullført ### Avsluttende tanker Som du kan se, er integrering med Stripe ikke en av de vanskeligste oppgavene. Selvfølgelig er eksemplet vi laget bare et enkelt donasjonskjema, men du kan allerede se hvor utviklervennlig Stripe er. Dashbordet gir oss full kontroll over transaksjonene som er gjort, noe som i stor grad forenkler for eksempel feilsøkingsprosessen. Oppsummert, etter min mening, er Stripe et flott betalingshåndteringsverktøy for nettprosjekter av alle størrelser, og det er absolutt verdt å vurdere. ### Sjekk også ut: - [Hvorfor er /App Directory et stort skritt for Next.js? ](https://www.elpassion.com/blog/why-is-app-directory-a-big-step-for-next.js?hsLang=no)— Lær om endringene som Next.js 13 presenterte og hvorfor det er en stor sak. - [Sideanimasjoner i Next.js - Hva er Framer Motion?](https://www.elpassion.com/blog/what-is-framer-motion-nextjs?hsLang=no) — Lær om Framer Motion, et kraftig React-bibliotek for animasjoner. [Share on Twitter ](http://twitter.com/share?url=https://www.elpassion.com/no/blog/how-to-add-payment-functionality-in-next.js-with-stripe) [Share on LinkedIn ](https://www.linkedin.com/shareArticle?mini=true&url=https://www.elpassion.com/no/blog/how-to-add-payment-functionality-in-next.js-with-stripe) [Share on Facebook ](http://www.facebook.com/sharer.php?u=https://www.elpassion.com/no/blog/how-to-add-payment-functionality-in-next.js-with-stripe) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) ![](https://www.elpassion.com/hubfs/DawidKielbasa_author.png) Dawid Kiełbasa Frontend Developer ## Du kan også like dette [![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ![](https://www.elpassion.com/hubfs/natural-language-processing-features.png) ](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) - AI ### [Lås opp kraften i ord: Hvordan NLP-funksjoner endrer måten vi forstår språk på](https://www.elpassion.com/no/blog/natural-language-processing?hsLang=no) 23 juni 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ![](https://www.elpassion.com/hubfs/125d6de5-3db6-43db-ab6e-eab671ba037f.png) ](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) - [ Development ](https://www.elpassion.com/no/blog/tag/development) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Skrive om eller refaktorere? En balansert guide til legacy-systemer](https://www.elpassion.com/no/blog/rewrite-or-refactor-a-balanced-guide-to-legacy-systems?hsLang=no) 14 april 2025 • Ula Kowalska [![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ![](https://www.elpassion.com/hubfs/BLOG%20IMAGES/migrating-wordpress-to-webflow.png) ](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) - [ Business ](https://www.elpassion.com/no/blog/tag/business) ### [Hvorfor WordPress-dramaet gjør overgangen til Webflow til et smart valg](https://www.elpassion.com/no/blog/switch-from-wordpress-to-webflow?hsLang=no) 11 mars 2025 • Maria Pradiuszyk Kanskje dette er starten på en vakker venskap? ## Vi er tilgjengelig for nye prosjekter. [![Contact us](https://no-cache.hubspot.com/cta/default/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b.png)](https://cta-redirect.hubspot.com/cta/redirect/4937048/d8fa95f1-46dc-4ecf-b1a6-aa709c23404b) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "Poland", "addressLocality" : "Warsaw", "addressRegion" : "Mazowieckie", "postalCode" : "", "streetAddress" : "Grzybowska 62 " }, "email" : "projects@elpassion.com", "foundingDate" : "2011", "foundingLocation" : "Warsaw, Poland", "logo" : "https://www.elpassion.com/hubfs/elp_mnt_black.svg", "mainEntityOfPage" : { "@id" : "https://www.elpassion.com/no/blog/how-to-add-payment-functionality-in-next.js-with-stripe", "@type" : "WebPage", "description" : "Lær hvordan du lager en enkel donasjonsknapp ved å integrere Stripe med en Next.js-applikasjon." }, "member" : { "@type" : "Person", "jobTitle" : "CEO", "name" : "Anna Elwart", "nationality" : "Poland", "url" : "https://www.linkedin.com/in/annaelwart/" }, "name" : "El Passion", "numberOfEmployees" : "60", "sameAs" : [ "https://twitter.com/elpassion", "https://www.facebook.com/elpassion/", "https://www.linkedin.com/company/el-passion", "https://github.com/elpassion", "https://www.behance.net/elpassion", "https://dribbble.com/elpassion" ], "url" : "https://www.elpassion.com", "vatId" : "PL5213644497" } ``` ```json { "@context" : "http://schema.org", "@type" : "WebSite", "url" : "https://www.elpassion.com/" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : [ { "@type" : "Person", "name" : "Dawid Kiełbasa", "url" : "https://www.elpassion.com/no/blog/author/dawid-kielbasa" }, { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" } ], "dateModified" : "2025-03-07", "datePublished" : "2025-03-07", "headline" : "Hvordan legge til betalingsfunksjonalitet i Next.js-apper ved hjelp av Stripe - elpassion.com", "image" : "https://www.elpassion.com/hubfs/stripe-next.js-cover-2.png", "inLanguage" : "en", "mainEntityOfPage" : { "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "height" : "150", "url" : "https://26048673.fs1.hubspotusercontent-eu1.net/hubfs/26048673/EL-Passion-Logo-400x150.svg", "width" : "400" }, "name" : "EL Passion", "url" : "https://www.elpassion.com" }, "url" : "https://www.elpassion.com/no/blog/how-to-add-payment-functionality-in-next.js-with-stripe" } ```