BacodoBACODO

Next.js-add-on

Stripe-integratie voor Next.js

Voeg Stripe Checkout of Payment Element, PaymentIntents en ondertekende webhooks toe aan uw bestaande Next.js App Router-project zonder de bedrading voor Checkout, 3D Secure en Route Handler helemaal opnieuw te bouwen.

  • Volledige broncode inbegrepen en permanent van jou
  • Geen aanvullende licentiesleutel of terugkerende licentie vereist
  • Productieklaar en getest
  • Geïntegreerd in uw bestaande Next.js-project en -stack
  • Inclusief 30 dagen technische ondersteuning na de overdracht
  • Optionele verlengde technische ondersteuning van 6 maanden tegen 20% van de add-onprijs

Vanaf

$145

USD · Next.js

Bekijk de demo

Stripe-integratie voor Next.js · Next.js

Volledige broncodeGeen licentiesleutelProductieklaarGeteste integratie30 dagen ondersteuning

Requirements

What Stripe-integratie voor Next.js needs

  • Bestaand Next.js-project
  • Stripe Test Mode-toegang

Geen repositorytoegang vereist. Projecttoegang is alleen nodig als u wilt dat Bacodo het direct integreert.

Wat het doet

Stripe-afrekenen in uw Next.js-app

Bacodo integreert Stripe in het Next.js-project dat je al hebt. Na de overdracht staat de implementatie in uw repository, zodat uw team deze kan lezen, wijzigen en uitbreiden. U bent nog steeds eigenaar van het Stripe-account, de API-sleutels en de Stripe-kosten.

Probleem dat het oplost

Voor het afrekenen van kaarten en portemonnees in Next.js zijn PaymentIntents, Checkout of Payment Element, 3-D Secure, geheime sleutels voor de server en een webhook Route Handler nodig die handtekeningen verifieert. Dat pad vanaf het begin opbouwen is langzaam en het is gemakkelijk om fouten te maken.

Hoe het in het project terechtkomt

We voegen Stripe.js toe aan de Next.js-client, routehandlers (of serveracties) die PaymentIntents of Checkout-sessies creëren, webhookverificatie, succes-/annuleringspagina's en test-/live-omgevingsconfiguratie voor App Router.

Waarom het ontwikkelingstijd bespaart

Uw team slaat de eerste productie-implementatie van Stripe Next.js over: App Router-handlers, SCA, foutstatussen en een overdracht waarin wordt gedocumenteerd hoe live sleutels moeten worden verzonden.

Voor wie is het?

Ontwikkelaars, technische teams, bureaus en startups die al een Next.js-app hebben en een productiebetalingspad willen dat ze kunnen onderhouden.

Belangrijkste functies

Wat Stripe-integratie voor Next.js bevat

Stripe Checkout of betalingselement in Next.js

Gebruik gehoste Stripe Checkout of een ingesloten betalingselement op uw Next.js-afrekenpagina. Kaartinvoer-, 3-D Secure- en portemonnee-knoppen blijven op het PCI-pad van Stripe - niet op een aangepast kaartformulier dat u opslaat.

Next.js-routehandlers voor PaymentIntents

Maak afrekensessies of betalingsintenties in Next.js-routehandlers. De browser gebruikt alleen de publiceerbare sleutel en het clientgeheim; de geheime sleutel wordt nooit in een clientcomponent verzonden.

Apple Pay en Google Pay in Next.js Checkout

Schakel portemonneeknoppen in Stripe Checkout of Payment Element in wanneer uw Stripe-account en domein zijn geverifieerd. De fallback van Next.js blijft bij het afrekenen van de kaart.

Next.js-testmodus en vervolgens live Stripe-toetsen

Verzend de Next.js-app met Stripe-testsleutels, testkaarten en een gedocumenteerde overstap naar live-sleutels. Next.js-omgevingsvariabelen blijven buiten de clientbundel.

Webhook Route Handler voor de orderstatus van Next.js

Het succes van betalingen in de gebruikersinterface van Next.js is niet de bron van de waarheid. Een Route Handler verifieert de handtekeningen van Stripe en werkt de status van de bestelling of het recht bij voordat deze wordt uitgevoerd.

Next.js succes-, annulerings- en foutstatussen

Behandel geweigerde kaarten, geannuleerde Checkout, netwerkstoringen en onvolledige 3-D Secure, zodat de Next.js-gebruikersinterface de klant niet op een dode pagina achterlaat.

Toepassingen

Wanneer Stripe-integratie voor Next.js past

Bestaande Next.js-winkel of boekingssite

U neemt al bestellingen of boekingen aan in Next.js en moet met een kaart afrekenen zonder de catalogus of het boekingsproces te herschrijven.

Agentschap draagt een Next.js-clientsite over aan productie

Je hebt een onderhoudbaar Stripe-pad nodig in Next.js, broncode in de clientrepository en een gedocumenteerde live-key cutover in plaats van een eenmalig Next.js-prototype.

SaaS of lidmaatschap Next.js-app

De Next.js-app moet een eerste betaling innen of een betaalmethode bijwerken terwijl abonnementen en facturen op uw server blijven staan ​​en op Stripe Billing als u deze al gebruikt.

Next.js-marktplaats of service-uitbetalingen later

Begin met klantkosten in de Next.js-app. Stripe Connect- of bestemmingskosten kunnen afzonderlijk worden bepaald als uw Next.js-marktplaatsmodel deze nodig heeft.

Demo

Next.js Stripe-voorbeeld van de betaalstroom

Bekijk een voorbeeld van het afrekenpad van Next.js: winkelwagen- of betaalactie, afrekenen of betalingselement, bevestiging en foutstatussen. Een live sandbox voor uw Stripe-account is beschikbaar na compatibiliteitscontrole. Deze pagina verwerkt geen echte kosten.

Hoe het werkt

Hoe Stripe-integratie voor Next.js wordt geleverd

Standaard Bacodo add-on-workflow, met Next.js en Stripe-specifieke controles voor App Router, Route Handlers en uw bestaande gegevenslaag.

  1. 01

    Selecteer Next.js Stripe

    Bevestig de Stripe-integratie voor Next.js en of het afrekenen op dag één wordt gehost via Checkout of Payment Element.

  2. 02

    Compatibiliteitscontrole met Next.js

    Bekijk de Next.js-versie, App Router versus Pages Router, bestaande betaal-UI, database en of u al een Stripe-account heeft.

  3. 03

    Integreer in Next.js

    Voeg Stripe.js, afrekenpagina's, routehandlers voor sessies of PaymentIntents en een ondertekende webhook-handler toe.

  4. 04

    Configureer de Next.js-app

    Wire Next.js-testsleutels, webhook-eindpunt en omgevingsspecifieke serverconfiguratie.

  5. 05

    Test het Next.js-betalingspad

    Voer Stripe-testkaarten, 3-D Secure, paden annuleren/weigeren en webhook-bevestiging uit in de Next.js-app.

  6. 06

    Overdracht van de Next.js-bron

    Lever Next.js-broncode, configuratie-opmerkingen en een checklist voor live-sleutels. U kunt de Next.js-implementatie onderhouden.

Architectuur

Hoe Stripe verbinding maakt met een Next.js-project

De Next.js-browser praat nooit met Stripe met een geheime sleutel. Checkout of Payment Element gebruikt een klantgeheim van een Route Handler. Stripe brengt uw Next.js-webhook op de hoogte voordat u voldoet.

Next.js-paginaStripe.js / AfrekenenRoutebehandelaarGestreepte betalingsintentiesWebhook-routehandlerDatabase-/bestelstatus

Ondersteunde technologieën

Wat Stripe-integratie voor Next.js echt gebruikt

Next.js App-router

De huidige stabiele Next.js met App Router is de standaard. Pages Router kan worden uitgebreid als dat is wat uw Next.js-repository al gebruikt.

Stripe.js en Stripe Node SDK

Officiële Stripe.js op de Next.js-client en stripe op de server voor sessies, PaymentIntents en webhookverificatie.

Uw Next.js-gegevenslaag

Updates van bestellingen of rechten blijven in de database of API die uw Next.js-app al gebruikt. We vervangen uw backend niet door een service die uitsluitend door Bacodo wordt aangeboden.

Stripe-account voor de Next.js-app

Uw Stripe-account, test- en live-sleutels die worden gebruikt door Next.js, webhook-eindpunt en Dashboard-evenementen. De verwerkingskosten voor Stripe blijven bij Stripe.

Vereiste Next.js-hostingconfiguratie

Een host die Next.js Route Handlers kan uitvoeren en Stripe-webhooks kan ontvangen (bijvoorbeeld Vercel of een Node-server). Alleen statisch exporteren is niet voldoende voor dit betaalpad.

Wat is inbegrepen

Wat Stripe-integratie voor Next.js inhoudt

  • Integratie in het bestaande Next.js-project
  • Volledige broncode in uw repository
  • Omgeving en Route Handler-configuratie
  • Afrekenen of betalingselement plus webhookwijzigingen vereist voor dit betaalpad
  • Next.js-betalingsstromen getest vóór overdracht
  • Overdrachtsnotities voor test-to-live-omschakeling
  • 30 dagen technische ondersteuning na overdracht

Niet in de meerprijs

  • Stripe-account, API-sleutels en Stripe-verwerkingskosten: die zijn jouw eigendom
  • Een nieuwe database of CMS als u geen plaats heeft om de bestelstatus op te slaan
  • Marketplace Connect, aangepaste factureringsproducten of vervanging van in-app-aankopen, tenzij dit maatwerk betreft

Pricing

Stripe-integratie voor Next.js-prijzen

Deze prijs geldt alleen voor het Next.js-platform. Er worden geen Django- of Flutter-add-onprijzen gebruikt.

Stripe-integratie voor Next.js

Voeg productieklare Stripe-betalingen toe aan een bestaande Next.js-app en behoud de broncode.

Vereisten

  • Bestaand Next.js-project
  • Stripe Test Mode-toegang

$145

eenmalig

Next.js

Backend nodig?

  • Volledige broncode
  • Geen licentiekosten
  • 30 dagen support
  • Volledige integratie

Veilig afrekenen viastripe

Oplevering en beveiliging

Leverings- en beveiligingspraktijken van Next.js

Geschatte Next.js-levering

Typische Next.js Stripe-betalingsintegratie vindt plaats na de compatibiliteitscontrole van Next.js. De tijdlijn is afhankelijk van uw huidige Next.js-afrekeninterface en gegevenslaag.

Getest op Next.js vóór overdracht

Testmoduskaarten, 3-D Secure, annulerings- en weigerpaden worden uitgeoefend op de Next.js-app voordat we de overdracht overhandigen.

Stripe-geheimen blijven buiten Next.js-clientcomponenten

Stripe-geheime sleutels en webhook-ondertekeningsgeheimen blijven in de serveromgeving. De Next.js-browser ontvangt alleen een publiceerbare sleutel en kortstondige clientgeheimen.

Webhookverificatie voor Next.js-bestellingen

De Next.js webhook Route Handler verifieert Stripe-handtekeningen voordat de bestelling of de status van het recht wordt bijgewerkt.

Geen oncontroleerbare Next.js-beveiligingsclaims

We claimen geen PCI-certificering, nulfraude of gegarandeerde goedkeuringspercentages. Next.js-kaartgegevens worden verzameld via Stripe Checkout of Payment Element, niet via een aangepast kaartformulier dat we opslaan.

FAQ

Veelgestelde vragen

Wat houdt Stripe-integratie voor Next.js in?

Stripe-integratie voor Next.js omvat Stripe.js, Checkout of Payment Element op uw bestaande Next.js-checkoutpagina, het maken van PaymentIntent of Checkout Session in Route Handlers, een ondertekende webhook-handler, testdekking en overdrachtsnotities. U ontvangt de Next.js-bron in uw project. Stripe-kosten en uw Stripe-account zijn gescheiden.

Integreer jij Stripe in onze bestaande Next.js-app?

Ja. Stripe Integration for Next.js is gebouwd voor een Next.js-project dat u al heeft. We passen het afrekenen en het betalingsinvoerpunt in uw huidige Next.js-routes en UI in plaats van een afzonderlijke demo-app als eindproduct te leveren.

Heeft Stripe Integratie voor Next.js een server nodig?

Ja voor een productie Next.js Stripe-pad. PaymentIntents, Checkout Sessions en de geheime sleutel moeten op de server staan. De Next.js-browser ontvangt alleen een publiceerbare sleutel en een clientgeheim. Een Next.js-export die alleen statisch is, kan dit webhookpad niet hosten.

Welke Stripe-pakketten gebruikt Stripe Integration for Next.js?

Stripe Integration for Next.js maakt gebruik van officiële Stripe.js op de client en de Stripe Node SDK in Next.js Route Handlers. We verpakken het afrekenen bij Next.js niet in een ongedocumenteerde plug-in, tenzij u er expliciet een nodig heeft.

Ondersteunt Stripe-integratie voor Next.js Apple Pay en Google Pay?

Ja als uw Stripe-account, domeinverificatie en apparaten dit ondersteunen. In Next.js zijn portemonneeknoppen een optioneel bereik. Card Checkout of Payment Element op Next.js blijft de standaard fallback.

Is Pages Router opgenomen in Stripe-integratie voor Next.js?

De standaard Stripe-integratie voor het bereik van Next.js is App Router. Pages Router API-routes kunnen worden opgenomen als dit is wat uw Next.js-repository al gebruikt en we dit tijdens de compatibiliteitscontrole van Next.js overeenkomen.

Kan Stripe Integration voor Next.js abonnementsbetalingen innen?

De Next.js-client kan een PaymentIntent bevestigen of een Checkout-sessie starten via Stripe.js. Terugkerende Stripe Billing-producten, klantenportaal en factuurlogica live op de server. Voor Next.js-werk waarvoor veel abonnementen nodig zijn, is mogelijk een offerte op maat nodig.

Waar bevinden de publiceerbare en geheime sleutels van Stripe zich in een Next.js-app?

De Next.js-browser gebruikt alleen de publiceerbare Stripe-sleutel. De geheime sleutel en het geheim van de webhookondertekening blijven in de serveromgevingsvariabelen die door routehandlers worden gebruikt. Stripe Integration for Next.js plaatst geen geheime sleutels in clientcomponenten.

Hoe werken de Stripe-testmodus en live-modus in Next.js?

We implementeren Stripe-integratie voor Next.js eerst tegen Stripe-testsleutels en testkaarten. Live gaan is een gedocumenteerde sleutel- en webhook-cutover in uw Stripe Dashboard- en Next.js-serveromgeving, en geen activering van een add-onlicentie.

Hoe gaat Stripe-integratie voor Next.js om met 3-D Secure/SCA?

Stripe Checkout en Payment Element verwerken 3D Secure via Stripe.js. De Next.js-pagina moet de betaalstroom levend houden totdat Stripe een definitieve status retourneert; Stripe Integration for Next.js bedraadt deze statussen expliciet.

Zijn Stripe-webhooks vereist voor het afrekenen met Next.js?

Ja voor uitvoering na Next.js Checkout of Payment Element. De gebruikersinterface van Next.js is niet de bron van de waarheid. Een Route Handler verifieert de Stripe-webhook-handtekeningen en markeert vervolgens de betaalde bestelling, ontgrendelt de inhoud of meldt de uitvoering ervan.

Kunnen we onze huidige Next.js-afrekeninterface met Stripe behouden?

Ja. Stripe Integration voor Next.js bewaart doorgaans uw Next.js-product, winkelwagen en betaalknop en opent de kassa of koppelt vanuit die actie het betalingselement aan. Een aangepast Next.js-kaartformulier dat betrekking heeft op onbewerkte PAN-gegevens valt buiten het standaardbereik omdat Checkout of Payment Element het veiligere PCI-pad is.

Is de prijs voor Stripe-integratie voor Next.js inclusief een Stripe-account of kosten?

Nee. U maakt en bent eigenaar van het Stripe-account, de API-sleutels en de Stripe-verwerkingskosten. De prijs voor de Next.js-add-on is implementatie in uw Next.js-project, niet een Bacodo-betalingslicentie.

Zal Stripe-integratie voor Next.js de in-app-aankoop van Apple of Google vervangen?

Nee. Digitale goederen die in een app store worden verkocht, vereisen vaak nog steeds IAP. Stripe-integratie voor Next.js is voor Stripe-afrekenen op een Next.js-website of web-app waarbij Stripe een toegestaan ​​betalingspad is voor uw producttype.

Kunnen we Stripe-bonnen en metadata aanpassen in Next.js?

Ja. Metagegevens van PaymentIntent of Checkout Session, klantgegevens en de velden die u behoudt na webhookbevestiging worden afgestemd op uw bestaande Next.js-bestelmodel tijdens Stripe-integratie voor Next.js.

Welke Next.js-ondersteuning is inbegrepen na Stripe-overdracht?

De Next.js-bron bevindt zich in uw opslagplaats, zodat uw team deze kan onderhouden. De inbegrepen ondersteuning van 30 dagen dekt technische vragen en defecten in de geleverde Stripe-integratie voor Next.js-scope, en niet het niet-gerelateerde Next.js-functiewerk.

Hoe worden Stripe.js- of Stripe API-updates afgehandeld op Next.js?

Gedurende de periode van 30 dagen helpen we bij breuk in de geleverde Next.js-integratie veroorzaakt door een gedocumenteerde Stripe- of Stripe.js-wijziging. Doorlopende Next.js-pakketupgrades daarna zijn uw onderhoud, of uitgebreide technische ondersteuning als u deze koopt.

Wat als Stripe-betalingen mislukken in een productie-Next.js-app?

We documenteren hoe u de PaymentIntent- of Checkout-sessiestatus, Stripe Dashboard-logboeken en webhook-levering kunt lezen vanaf het Next.js-afrekenpad. 30 dagen ondersteuning omvat het oplossen van problemen, het weghalen van 3-D Secure en verkeerd geconfigureerde sleutels voor de geleverde Next.js-stroom.

Welke Next.js-versies zijn compatibel met Stripe-integratie voor Next.js?

We bevestigen uw Next.js-versie, App Router of Pages Router en Node-runtime tegen de Stripe SDK die we vastzetten tijdens de integratie. Oudere of zwaar gevorkte Next.js-runtimes hebben mogelijk extra bereik nodig.

Wat is 30 dagen ondersteuning versus 6 maanden uitgebreide technische ondersteuning voor Stripe-integratie voor Next.js?

Voor het geleverde Next.js Stripe-pad is 30 dagen na overdracht inbegrepen. Uitgebreide technische ondersteuning is optioneel voor 20% van deze Next.js add-on-prijs en dekt nog eens zes maanden technische hulp bij diezelfde Next.js-integratie, niet bij het bouwen van een nieuw product.

Stripe-integratie voor Next.js

Voeg productieklare Stripe-betalingen toe aan uw bestaande Next.js-app, behoud de broncode en sla het afrekenen van het gebouw vanaf het begin over.

$145