- 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.
Componente aggiuntivo 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.
Da
$145
USD · Next.js
Integrazione Stripe per Next.js · Next.js
Requirements
Non serve l’accesso al repository. L’accesso al progetto serve solo se volete che Bacodo integri direttamente.
Cosa fa
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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
Prendi già ordini o prenotazioni in Next.js e hai bisogno del pagamento con carta senza riscrivere il catalogo o il flusso di prenotazione.
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.
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.
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
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
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.
01
Conferma l'integrazione di Stripe per Next.js e se il checkout del primo giorno è ospitato su Checkout o Payment Element.
02
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.
03
Aggiungi Stripe.js, pagine di pagamento, gestori di percorsi per sessioni o PaymentIntent e un gestore webhook firmato.
04
Collegare le chiavi di test Next.js, l'endpoint webhook e la configurazione del server specifica dell'ambiente.
05
Esegui le schede di test Stripe, 3-D Secure, annulla/rifiuta percorsi e conferma webhook sull'app Next.js.
06
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
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.
Tecnologie supportate
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 ufficiale sul client Next.js e stripe sul server per sessioni, PaymentIntent e verifica webhook.
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.
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.
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
Pricing
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
$145
una tantumNext.js
Vi serve un backend?
Pagamento sicuro constripe
Consegna e sicurezza
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.
Le carte in modalità test, i percorsi 3-D Secure, di annullamento e di rifiuto vengono esercitati sull'app Next.js prima della consegna.
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.
Il gestore del percorso del webhook Next.js verifica le firme Stripe prima di aggiornare l'ordine o lo stato dei diritti.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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