- Progetto React esistente
- Accesso a Stripe Test Mode
- Serve un backend per i pagamenti sicuri
Non serve l’accesso al repository. L’accesso al progetto serve solo se volete che Bacodo integri direttamente.
Componente aggiuntivo React
Aggiungi Stripe.js, Payment Element e il pagamento segreto al cliente alla tua React SPA esistente senza creare da zero Elements, 3-D Secure ed errori di chiave segreta. React non ospita webhook: la tua API sì.
Da
$145
USD · React
Integrazione Stripe per React · React
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 React che già possiedi (Vite, CRA o simili). Dopo la consegna, la fonte React risiede nel tuo repository. La chiave segreta e il webhook rimangono su un backend già eseguito. Possiedi ancora l'account Stripe e le commissioni Stripe.
Una React SPA non può creare in modo sicuro PaymentIntent o verificare webhook. Ha bisogno di Stripe.js, Elements o Checkout e di un backend che restituisca un segreto client. Costruendo quella divisione sbagliata viene fornita la chiave segreta nel pacchetto.
Aggiungiamo @stripe/react-stripe-js, una schermata di pagamento nel tuo albero React e il recupero chiama la tua API esistente già necessaria per PaymentIntents. La verifica del webhook è cablata su quell'API, non all'interno di React.
Il tuo team salta la prima implementazione di produzione di Stripe React: Elements, SCA, env per la chiave pubblicabile e un passaggio di consegne che documenta il modo in cui React comunica con la tua API.
Sviluppatori e agenzie che dispongono già di un frontend React e di un'API e desiderano un percorso Stripe gestibile senza migrare la SPA su Next.js.
Funzioni chiave
Monta l'elemento di pagamento Stripe con @stripe/react-stripe-js sul tuo percorso di pagamento React. I dati della carta rimangono su Stripe: non persisti nello stato React.
L'app React utilizza solo la chiave pubblicabile e un segreto client di breve durata della tua API. Stripe Integration for React non inserisce STRIPE_SECRET_KEY nell'ambiente Vite o CRA fornito al browser.
Abilita i portafogli in Payment Element quando il tuo account Stripe e il tuo dominio lo consentono. Il fallback della reazione rimane sulla carta Elementi.
Spedisci prima React SPA con la chiave pubblicabile di test Stripe. Il cutover live è una modifica dell'ambiente documentata più il segreto live corrispondente sulla tua API.
Una schermata di successo di React non è la fonte della verità. La tua API verifica il webhook Stripe, quindi l'app React legge lo stato a pagamento da quell'API.
Gestisci carte rifiutate, elementi annullati, guasti di rete e 3-D Secure incompleto in modo che l'interfaccia utente di React non lasci il cliente con una schermata inattiva.
Casi d’uso
Hai già una React SPA e un'API. È necessario effettuare il checkout di Elements senza riscrivere il catalogo in Next.js.
Hai bisogno di un percorso Stripe gestibile in React, di un sorgente nel repository del client e di un cutover live-key documentato invece di una demo CodeSandbox.
L'app React raccoglie un primo metodo di pagamento mentre gli abbonamenti rimangono sulla tua API e su Stripe Billing se li utilizzi già.
L'integrazione di Stripe per React è il lato SPA. Se hai bisogno anche della creazione dell'API, l'ambito è separato: questo prezzo non è un nuovo backend.
Demo
Visualizza l'anteprima del percorso di pagamento di React: azione di pagamento, elemento di 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 React per Vite/CRA, React Router e l'API già richiamata dalla SPA.
01
Conferma l'integrazione di Stripe per React e di avere (o di avere nell'ambito) un'API in grado di creare PaymentIntent.
02
Esamina la versione di React, il bundler, l'interfaccia utente di pagamento esistente e il linguaggio di backend già utilizzato dalla SPA.
03
Aggiungi Stripe.js, Elements, componenti di checkout e il contratto di recupero al tuo endpoint PaymentIntent.
04
Cabla la chiave pubblicabile tramite Vite/CRA public env. La chiave segreta e il webhook rimangono sull'API.
05
Esegui le schede di test Stripe, 3-D Secure, annulla/rifiuta e conferma lo stato degli aggiornamenti del webhook API letto dall'app React.
06
Fornisci sorgente React, note di env e una lista di controllo live-key. L'implementazione di React è tua da mantenere.
Architettura
Il bundle React non contiene mai la chiave segreta. Elements utilizza un segreto client della tua API. Stripe notifica l'API tramite webhook. React quindi legge lo stato dell'ordine.
Tecnologie supportate
Current React su Vite, CRA o un bundle SPA simile. Questa non è una destinazione per il router dell'app Next.js: consulta Integrazione di Stripe per Next.js per quello stack.
Attacchi ufficiali Stripe React per Payment Element e portafogli.
PaymentIntent crea e verifica il webhook sul back-end già chiamato dall'app React. Questo componente aggiuntivo non sostituisce l'API con un servizio esclusivo di Bacodo.
Il tuo account Stripe, chiavi di test e live, endpoint webhook sull'API ed eventi Dashboard.
La React SPA può essere statica. Il webhook non può. Un host solo statico senza API non può completare questo percorso di pagamento.
Cosa è incluso
Pricing
Questo prezzo è valido solo per la piattaforma React SPA. Non utilizza i prezzi dei componenti aggiuntivi Next.js, Django, Flutter o React Native.
Integrazione Stripe per React
Aggiungi pagamenti Stripe pronti per la produzione a una React SPA esistente e mantieni il codice sorgente.
Requisiti
$145
una tantumReact
Vi serve un backend?
Pagamento sicuro constripe
Consegna e sicurezza
Il tipico checkout di React Stripe viene effettuato dopo il controllo di compatibilità di React. La sequenza temporale dipende dall'interfaccia utente e dall'API di pagamento React attuali.
Le carte in modalità test, i percorsi 3-D Secure, di annullamento e di rifiuto vengono esercitati su React SPA prima della consegna.
Solo la chiave pubblicabile è pubblica. Le chiavi segrete e i segreti del webhook rimangono sul server chiamato dall'app React.
React non verifica Stripe-Signature. La tua API lo fa, quindi React legge il risultato.
Non rivendichiamo la certificazione PCI o zero frodi. React raccoglie le carte tramite Stripe Elements, non un modulo di carta personalizzato che memorizziamo.
FAQ
L'integrazione di Stripe per React include Stripe.js, Payment Element nella schermata di pagamento React esistente, il contratto di recupero nell'API PaymentIntent, copertura del test e note di consegna. Ricevi il sorgente React nel tuo progetto. Le tariffe Stripe, il tuo account Stripe e la creazione di un nuovo backend sono separati.
Sì. Stripe Integration for React è progettato per una React SPA che già possiedi (Vite, CRA o simile). Inseriamo l'elemento di pagamento e il punto di ingresso del pagamento nei tuoi attuali percorsi React e nell'interfaccia utente invece di spedire un'app demo separata come risultato finale.
Sì per un percorso React Stripe di produzione. PaymentIntent, la chiave segreta e la verifica del webhook devono risiedere su un server. Il browser React riceve solo una chiave pubblicabile e un segreto client. Un host React solo statico non può completare questo percorso di checkout.
L'integrazione Stripe per React utilizza Stripe.js e @stripe/react-stripe-js ufficiali per Payment Element e portafogli. Non inseriamo il checkout di React 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 React, i pulsanti del portafoglio sono un ambito opzionale. L'elemento di pagamento con carta su React rimane il fallback predefinito.
No. Stripe Integration for React è un percorso SPA. Il router dell'app Next.js e i gestori di routing sono l'integrazione Stripe per Next.js. Non migriamo una React SPA su Next.js all'interno del prezzo del componente aggiuntivo React.
Il client React può confermare un PaymentIntent o riscuotere un metodo di pagamento tramite Stripe.js. I prodotti di fatturazione Stripe ricorrente, il portale clienti e la logica delle fatture sono disponibili sulla tua API. Il lavoro React con abbonamenti pesanti potrebbe richiedere un preventivo personalizzato.
Il browser React utilizza solo la chiave pubblicabile Stripe tramite Vite o CRA public env. La chiave segreta e il segreto della firma del webhook rimangono sulla tua API. Stripe Integration for React non inserisce chiavi segrete nel bundle React.
Implementiamo prima l'integrazione Stripe per React contro le chiavi di test e le schede di test Stripe. La pubblicazione è una modifica documentata della chiave pubblicabile in React più il segreto live corrispondente e il webhook sulla tua API, non un'attivazione della licenza aggiuntiva.
Stripe Payment Element gestisce 3-D Secure tramite Stripe.js. La pagina React deve mantenere vivo il flusso di pagamento finché Stripe non restituisce uno stato finale; L'integrazione di Stripe per React collega esplicitamente questi stati.
Sì per l'adempimento dopo React Payment Element. L'interfaccia utente di React non è la fonte della verità. La tua API verifica le firme dei webhook Stripe e quindi contrassegna l'ordine pagato, sblocca il contenuto o notifica l'evasione. React quindi legge quello stato.
Sì. L'integrazione di Stripe per React in genere mantiene il prodotto React, il carrello e il pulsante di pagamento e monta l'elemento di pagamento da tale azione. Un modulo di carta React personalizzato che tocca dati PAN non elaborati non rientra nell'ambito predefinito perché 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 React è l'implementazione nel tuo progetto React, non una licenza di pagamento Bacodo.
No. I beni digitali venduti all'interno di un app store spesso richiedono ancora IAP. L'integrazione Stripe per React è per il pagamento Stripe in un sito Web o SPA React in cui Stripe è un percorso di pagamento consentito per il tuo tipo di prodotto.
Sì. I metadati PaymentIntent, i record dei clienti e i campi mantenuti dopo la conferma del webhook sono allineati al modello di ordine esistente durante l'integrazione di Stripe per React. L'app React mostra solo ciò che restituisce la tua API.
La fonte React è nel tuo repository, quindi il tuo team può mantenerla. Il supporto di 30 giorni incluso copre domande tecniche e difetti nell'ambito dell'integrazione Stripe per React fornita, non nel lavoro delle funzionalità React non correlato.
Durante la finestra di 30 giorni aiutiamo in caso di interruzione dell'integrazione React fornita causata da una modifica documentata di Stripe o Stripe.js. Gli aggiornamenti continui del pacchetto React successivi costituiscono la manutenzione o il supporto tecnico esteso se lo acquisti.
Documentiamo come leggere lo stato di PaymentIntent, i registri di Stripe Dashboard e la consegna del webhook dal percorso di pagamento di React. Il supporto di 30 giorni include la risoluzione dei problemi rifiutati, rilasci 3-D Secure e chiavi configurate in modo errato per il flusso React fornito.
Confermiamo la versione di React, il bundler (Vite, CRA o simili) e l'API che la SPA già richiama rispetto alla versione Stripe.js che fissiamo al momento dell'integrazione. I runtime React più vecchi o fortemente biforcati potrebbero richiedere un ambito aggiuntivo.
Per il percorso React Stripe consegnato sono inclusi 30 giorni dalla consegna. Il supporto tecnico esteso è facoltativo al 20% del prezzo del componente aggiuntivo React e copre altri sei mesi di assistenza tecnica sulla stessa integrazione React, non sulla creazione di un nuovo prodotto.
Aggiungi pagamenti Stripe pronti per la produzione alla tua React SPA esistente, mantieni il codice sorgente e mantieni i segreti sulla tua API.
$145