BacodoBACODO

Componente aggiuntivo Next.js

Integrazione Stripe per Next.js

Aggiungi Stripe Checkout o Payment Element, PaymentIntents e webhook firmati al tuo progetto Next.js App Router esistente senza creare da zero il cablaggio di checkout, 3-D Secure e gestore del percorso.

  • Codice sorgente completo incluso e tuo in modo permanente
  • Non è richiesta alcuna chiave di licenza aggiuntiva o licenza ricorrente
  • Pronto per la produzione e testato
  • Integrato nel tuo progetto e stack Next.js esistente
  • Supporto tecnico post-consegna di 30 giorni incluso
  • Supporto tecnico esteso opzionale di 6 mesi al 20% del prezzo aggiuntivo

Da

$145

USD · Next.js

Visualizza la demo

Integrazione Stripe per Next.js · Next.js

Codice sorgente completoNessuna chiave di licenzaPronto per la produzioneIntegrazione testataSupporto di 30 giorni

Requirements

What Integrazione Stripe per Next.js needs

  • Progetto Next.js esistente
  • Accesso a Stripe Test Mode

Non serve l’accesso al repository. L’accesso al progetto serve solo se volete che Bacodo integri direttamente.

Cosa fa

Effettua il pagamento con stripe all'interno dell'app Next.js

Bacodo integra Stripe nel progetto Next.js che già possiedi. Dopo la consegna, l'implementazione risiede nel tuo repository in modo che il tuo team possa leggerla, modificarla ed estenderla. Possiedi ancora l'account Stripe, le chiavi API e le tariffe Stripe.

Problema che risolve

Il pagamento di carte e portafogli in Next.js richiede PaymentIntents, Checkout o Payment Element, 3-D Secure, chiavi segrete solo server e un gestore di percorsi webhook che verifica le firme. Costruire quel percorso da zero è lento ed è facile sbagliare.

Come interviene nel progetto

Aggiungiamo Stripe.js sul client Next.js, gestori di percorsi (o azioni server) che creano PaymentIntent o sessioni di pagamento, verifica webhook, pagine di successo/annullamento e configurazione dell'ambiente di test/live per App Router.

Perché fa risparmiare tempo di sviluppo

Il tuo team salta la prima implementazione di produzione di Stripe Next.js: gestori di App Router, SCA, stati di errore e un passaggio di consegne che documenta come spedire le chiavi attive.

Per chi è

Sviluppatori, team tecnici, agenzie e startup che dispongono già di un'app Next.js e desiderano un percorso di pagamento di produzione da poter mantenere.

Funzioni chiave

Cosa include Integrazione Stripe per Next.js

Stripe Checkout o elemento di pagamento in Next.js

Utilizza Stripe Checkout ospitato o un elemento di pagamento incorporato nella pagina di pagamento Next.js. I pulsanti per l'inserimento della carta, 3-D Secure e il portafoglio rimangono sul percorso PCI di Stripe, non su un modulo di carta personalizzato archiviato.

Gestori di route Next.js per PaymentIntent

Crea sessioni di pagamento o PaymentIntent nei gestori di percorso Next.js. Il browser utilizza solo la chiave pubblicabile e il segreto client: la chiave segreta non viene mai fornita in un componente client.

Apple Pay e Google Pay in Next.js Checkout

Abilita i pulsanti del portafoglio in Stripe Checkout o Payment Element quando il tuo account e dominio Stripe sono verificati. Il fallback di Next.js rimane al momento del pagamento della carta.

Modalità di test Next.js quindi chiavi Stripe live

Spedisci l'app Next.js con chiavi di prova Stripe, schede di prova e un passaggio documentato alle chiavi attive. Le variabili di ambiente Next.js rimangono fuori dal pacchetto client.

Gestore del percorso webhook per lo stato dell'ordine Next.js

Il successo del pagamento nell'interfaccia utente di Next.js non è la fonte della verità. Un gestore del percorso verifica le firme Stripe e aggiorna l'ordine o lo stato dei diritti prima dell'adempimento.

Stati di successo, annullamento ed errore di Next.js

Gestisci le carte rifiutate, i checkout annullati, gli errori di rete e il 3-D Secure incompleto in modo che l'interfaccia utente di Next.js non lasci il cliente su una pagina morta.

Casi d’uso

Quando Integrazione Stripe per Next.js è adatto

Negozio o sito di prenotazione Next.js esistente

Prendi già ordini o prenotazioni in Next.js e hai bisogno del pagamento con carta senza riscrivere il catalogo o il flusso di prenotazione.

Agenzia che consegna alla produzione un sito cliente Next.js

Hai bisogno di un percorso Stripe gestibile in Next.js, di un sorgente nel repository del client e di un cutover live-key documentato invece di un prototipo Next.js una tantum.

SaaS o abbonamento all'app Next.js

L'app Next.js deve riscuotere un primo pagamento o aggiornare un metodo di pagamento mentre gli abbonamenti e le fatture rimangono sul tuo server e su Stripe Billing se già li usi.

Il marketplace Next.js o i pagamenti dei servizi in un secondo momento

Inizia con gli addebiti cliente nell'app Next.js. Stripe Connect o i costi di destinazione possono essere definiti separatamente se il tuo modello di marketplace Next.js li richiede.

Demo

Anteprima del flusso di pagamento di Next.js Stripe

Visualizza l'anteprima del percorso di pagamento di Next.js: azione carrello o pagamento, elemento di pagamento o pagamento, conferma e stati di errore. Una sandbox live sul tuo account Stripe è disponibile dopo il controllo di compatibilità. Questa pagina non elabora addebiti reali.

Come funziona

Come viene fornita Stripe Integration for Next.js

Flusso di lavoro aggiuntivo Bacodo standard, con controlli specifici di Next.js e Stripe per App Router, gestori di percorsi e il livello dati esistente.

  1. 01

    Seleziona Next.js Stripe

    Conferma l'integrazione di Stripe per Next.js e se il checkout del primo giorno è ospitato su Checkout o Payment Element.

  2. 02

    Controllo di compatibilità Next.js

    Controlla la versione di Next.js, App Router e Pages Router, l'interfaccia utente di pagamento esistente, il database e se disponi già di un account Stripe.

  3. 03

    Integrazione in Next.js

    Aggiungi Stripe.js, pagine di pagamento, gestori di percorsi per sessioni o PaymentIntent e un gestore webhook firmato.

  4. 04

    Configura l'app Next.js

    Collegare le chiavi di test Next.js, l'endpoint webhook e la configurazione del server specifica dell'ambiente.

  5. 05

    Testa il percorso di pagamento Next.js

    Esegui le schede di test Stripe, 3-D Secure, annulla/rifiuta percorsi e conferma webhook sull'app Next.js.

  6. 06

    Consegnare il sorgente Next.js

    Fornisci il sorgente Next.js, le note di configurazione e un elenco di controllo della chiave live. La manutenzione dell'implementazione Next.js spetta a te.

Architettura

Come Stripe si connette a un progetto Next.js

Il browser Next.js non comunica mai con Stripe con una chiave segreta. Checkout o Payment Element utilizza un segreto client di un gestore del percorso. Stripe invia una notifica al tuo webhook Next.js prima dell'adempimento.

Pagina Next.jsStripe.js/CheckoutGestore del percorsoStripe Payment IntentsGestore del percorso webhookStato database/ordine

Tecnologie supportate

Cosa usa davvero Integrazione Stripe per Next.js

Router dell'app Next.js

L'attuale Next.js stabile con App Router è l'impostazione predefinita. È possibile definire l'ambito del router di pagine se questo è ciò che utilizza già il repository Next.js.

Stripe.js e Stripe Node SDK

Stripe.js ufficiale sul client Next.js e stripe sul server per sessioni, PaymentIntent e verifica webhook.

Il tuo livello dati Next.js

Gli aggiornamenti degli ordini o dei diritti rimangono nel database o nell'API già utilizzata dall'app Next.js. Non sostituiamo il tuo backend con un servizio esclusivamente Bacodo.

Account Stripe per l'app Next.js

Il tuo account Stripe, le chiavi live e di prova utilizzate da Next.js, endpoint webhook ed eventi Dashboard. Le spese di elaborazione di Stripe restano a carico di Stripe.

Configurazione hosting Next.js richiesta

Un host in grado di eseguire gestori di route Next.js e ricevere webhook Stripe (ad esempio Vercel o un server Node). L'esportazione solo statica non è sufficiente per questo percorso di pagamento.

Cosa è incluso

Cosa include Stripe Integration for Next.js

  • Integrazione nel progetto Next.js esistente
  • Codice sorgente completo nel tuo repository
  • Configurazione dell'ambiente e del gestore del percorso
  • Checkout o elemento di pagamento più modifiche al webhook necessarie per questo percorso di pagamento
  • Flussi di pagamento Next.js testati prima della consegna
  • Note di consegna per il passaggio dal test al live
  • Supporto tecnico di 30 giorni dopo la consegna

Non nel prezzo aggiuntivo

  • Account Stripe, chiavi API e commissioni di elaborazione Stripe: sono di tua proprietà
  • Un nuovo database o CMS se non disponi di un posto in cui archiviare lo stato dell'ordine
  • Marketplace Connect, prodotti di fatturazione personalizzati o sostituzione di acquisti in-app, a meno che non siano considerati lavori personalizzati

Pricing

Integrazione Stripe per i prezzi di Next.js

Questo prezzo è valido solo per la piattaforma Next.js. Non utilizza i prezzi aggiuntivi di Django o Flutter.

Integrazione Stripe per Next.js

Aggiungi pagamenti Stripe pronti per la produzione a un'app Next.js esistente e mantieni il codice sorgente.

Requisiti

  • Progetto Next.js esistente
  • Accesso a Stripe Test Mode

$145

una tantum

Next.js

Vi serve un backend?

  • Codice sorgente completo
  • Nessun costo di licenza
  • 30 giorni di supporto
  • Integrazione completa

Pagamento sicuro constripe

Consegna e sicurezza

Pratiche di consegna e sicurezza di Next.js

Consegna stimata di Next.js

L'integrazione tipica del checkout di Next.js Stripe viene effettuata dopo il controllo di compatibilità di Next.js. La sequenza temporale dipende dall'attuale interfaccia utente di pagamento Next.js e dal livello dati.

Testato su Next.js prima della consegna

Le carte in modalità test, i percorsi 3-D Secure, di annullamento e di rifiuto vengono esercitati sull'app Next.js prima della consegna.

I segreti di Stripe rimangono fuori dai componenti client Next.js

Le chiavi segrete di stripe e i segreti di firma del webhook rimangono nell'ambiente del server. Il browser Next.js riceve solo una chiave pubblicabile e segreti client di breve durata.

Verifica del webhook per gli ordini Next.js

Il gestore del percorso del webhook Next.js verifica le firme Stripe prima di aggiornare l'ordine o lo stato dei diritti.

Nessuna richiesta di sicurezza Next.js non verificabile

Non rivendichiamo la certificazione PCI, zero frodi o tassi di approvazione garantiti. I dati della carta Next.js vengono raccolti tramite Stripe Checkout o Payment Element, non un modulo di carta personalizzato che memorizziamo.

FAQ

Domande frequenti

Cosa include Stripe Integration for Next.js?

L'integrazione di Stripe per Next.js include Stripe.js, Checkout o Payment Element sulla pagina di pagamento Next.js esistente, la creazione di PaymentIntent o di sessioni di checkout nei gestori di percorsi, un gestore webhook firmato, copertura del test e note di consegna. Riceverai il sorgente Next.js nel tuo progetto. Le commissioni Stripe e il tuo account Stripe sono separati.

Integrerai Stripe nella nostra app Next.js esistente?

Sì. Stripe Integration for Next.js è stato creato per un progetto Next.js che già possiedi. Integriamo il checkout e il punto di ingresso del pagamento nei tuoi percorsi e nell'interfaccia utente Next.js attuali invece di fornire un'app demo separata come risultato finale.

Stripe Integration for Next.js richiede un server?

Sì per un percorso Stripe Next.js di produzione. PaymentIntent, sessioni di pagamento e la chiave segreta devono risiedere sul server. Il browser Next.js riceve solo una chiave pubblicabile e un segreto client. Un'esportazione Next.js solo statica non può ospitare questo percorso webhook.

Quali pacchetti Stripe utilizza Stripe Integration for Next.js?

Stripe Integration for Next.js utilizza Stripe.js ufficiale sul client e Stripe Node SDK nei gestori di percorsi Next.js. Non inseriamo il checkout Next.js in un plugin non documentato a meno che tu non ne richieda esplicitamente uno.

Stripe Integration for Next.js supporta Apple Pay e Google Pay?

Sì, quando il tuo account Stripe, la verifica del dominio e i dispositivi li supportano. In Next.js, i pulsanti del portafoglio hanno un ambito facoltativo. Il pagamento con carta o l'elemento di pagamento su Next.js rimane il fallback predefinito.

Pages Router è incluso nell'integrazione Stripe per Next.js?

L'integrazione predefinita di Stripe per Next.js è App Router. Le rotte API Pages Router possono essere incluse se è ciò che il tuo repository Next.js già utilizza e lo concordiamo durante il controllo di compatibilità di Next.js.

Stripe Integration for Next.js può riscuotere i pagamenti dell'abbonamento?

Il client Next.js può confermare un PaymentIntent o avviare una sessione di pagamento tramite Stripe.js. I prodotti Stripe Billing ricorrenti, il portale clienti e la logica delle fatture risiedono sul server. Il lavoro Next.js con abbonamenti pesanti potrebbe richiedere un preventivo personalizzato.

Dove risiedono le chiavi pubblicabili e segrete di Stripe in un'app Next.js?

Il browser Next.js utilizza solo la chiave pubblicabile Stripe. La chiave segreta e il segreto della firma del webhook rimangono nelle variabili di ambiente del server utilizzate dai gestori di route. Stripe Integration for Next.js non inserisce chiavi segrete nei componenti client.

Come funzionano la modalità test Stripe e la modalità live in Next.js?

Implementiamo innanzitutto l'integrazione di Stripe per Next.js con le chiavi di test e le schede di test Stripe. La messa in modalità live è una chiave documentata e un passaggio al webhook nella tua dashboard Stripe e nell'ambiente server Next.js, non un'attivazione di licenza aggiuntiva.

In che modo Stripe Integration for Next.js gestisce 3-D Secure/SCA?

Stripe Checkout e Payment Element gestiscono 3-D Secure tramite Stripe.js. La pagina Next.js deve mantenere attivo il flusso di checkout finché Stripe non restituisce uno stato finale; Stripe Integration for Next.js collega esplicitamente questi stati.

I webhook Stripe sono necessari per il checkout di Next.js?

Sì per l'adempimento dopo Next.js Checkout o Payment Element. L'interfaccia utente Next.js non è la fonte della verità. Un gestore del percorso verifica le firme dei webhook Stripe e quindi contrassegna l'ordine pagato, sblocca il contenuto o notifica l'evasione.

Possiamo mantenere la nostra attuale interfaccia utente di pagamento Next.js con Stripe?

Sì. Stripe Integration for Next.js in genere mantiene il prodotto Next.js, il carrello e il pulsante di pagamento e apre Checkout o monta l'elemento di pagamento da tale azione. Un modulo di carta Next.js personalizzato che tocca dati PAN grezzi non rientra nell'ambito predefinito perché Checkout o Payment Element è il percorso PCI più sicuro.

Il prezzo di Stripe Integration for Next.js include un account Stripe o commissioni?

No. Crei e possiedi l'account Stripe, le chiavi API e le tariffe di elaborazione Stripe. Il prezzo del componente aggiuntivo Next.js è l'implementazione nel tuo progetto Next.js, non una licenza a pagamento Bacodo.

L'integrazione di Stripe per Next.js sostituirà l'acquisto in-app di Apple o Google?

No. I beni digitali venduti all'interno di un app store spesso richiedono ancora IAP. Stripe Integration for Next.js è per il pagamento con Stripe in un sito Web o in un'app Web Next.js in cui Stripe è un percorso di pagamento consentito per il tipo di prodotto.

Possiamo personalizzare le ricevute e i metadati Stripe in Next.js?

Sì. I metadati PaymentIntent o Checkout Session, i record dei clienti e i campi mantenuti dopo la conferma del webhook sono allineati al modello di ordine Next.js esistente durante l'integrazione di Stripe per Next.js.

Quale supporto Next.js è incluso dopo il passaggio di Stripe?

Il sorgente Next.js è nel tuo repository, quindi il tuo team può mantenerlo. Il supporto di 30 giorni incluso copre domande tecniche e difetti nell'ambito di Stripe Integration for Next.js fornito, non il lavoro della funzionalità Next.js non correlato.

Come vengono gestiti gli aggiornamenti di Stripe.js o Stripe API su Next.js?

Durante il periodo di 30 giorni aiutiamo in caso di interruzione dell'integrazione Next.js fornita causata da una modifica documentata di Stripe o Stripe.js. Gli aggiornamenti successivi del pacchetto Next.js costituiscono la manutenzione o il supporto tecnico esteso se lo acquisti.

Cosa succede se i pagamenti Stripe falliscono in un'app Next.js di produzione?

Documentiamo come leggere lo stato di PaymentIntent o della sessione di pagamento, i registri di Stripe Dashboard e la consegna del webhook dal percorso di pagamento Next.js. Il supporto di 30 giorni include la risoluzione dei problemi rifiutati, rilasci 3-D Secure e chiavi configurate in modo errato per il flusso Next.js fornito.

Quali versioni di Next.js sono compatibili con Stripe Integration for Next.js?

Confermiamo la versione di Next.js, il router di app o il router di pagine e il runtime del nodo rispetto all'SDK Stripe che aggiungiamo al momento dell'integrazione. I runtime Next.js più vecchi o fortemente biforcati potrebbero richiedere un ambito aggiuntivo.

Cos'è il supporto di 30 giorni rispetto al supporto tecnico esteso di 6 mesi per l'integrazione di Stripe per Next.js?

Per il percorso Stripe Next.js consegnato sono inclusi 30 giorni dopo la consegna. Il supporto tecnico esteso è facoltativo al 20% del prezzo del componente aggiuntivo Next.js e copre altri sei mesi di assistenza tecnica sulla stessa integrazione Next.js, non sulla creazione di un nuovo prodotto.

Integrazione Stripe per Next.js

Aggiungi pagamenti Stripe pronti per la produzione alla tua app Next.js esistente, mantieni il codice sorgente e salta la creazione del checkout da zero.

$145