BacodoBACODO

Componente aggiuntivo React

Integrazione Stripe per 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ì.

  • 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 React esistente
  • Supporto tecnico post-consegna di 30 giorni incluso
  • Supporto tecnico esteso opzionale di 6 mesi al 20% del prezzo aggiuntivo

Da

$145

USD · React

Visualizza la demo

Integrazione Stripe per React · React

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

Requirements

What Integrazione Stripe per React needs

  • 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.

Cosa fa

Stripe Elements nella tua React SPA: l'API possiede ancora dei segreti

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.

Problema che risolve

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.

Come interviene nel progetto

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.

Perché fa risparmiare tempo di sviluppo

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.

Per chi è

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

Cosa include Integrazione Stripe per React

Elemento pagamento in React

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.

React recupera i segreti del client, mai la chiave segreta

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.

Apple Pay e Google Pay in React Elements

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.

Modalità di test di reazione quindi chiave pubblicabile in tempo reale

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.

L'adempimento non è un percorso di ringraziamento di React

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.

Reagire all'errore e annullare gli stati

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

Quando Integrazione Stripe per React è adatto

Vetrina React esistente su Vite o CRA

Hai già una React SPA e un'API. È necessario effettuare il checkout di Elements senza riscrivere il catalogo in Next.js.

Agenzia che consegna una SPA cliente React alla produzione

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.

Schermata delle impostazioni SaaS in React

L'app React raccoglie un primo metodo di pagamento mentre gli abbonamenti rimangono sulla tua API e su Stripe Billing se li utilizzi già.

Frontend React, API Django o Node già presenti

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

Anteprima del flusso di React Stripe Elements

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

Come viene fornita l'integrazione di Stripe per React

Flusso di lavoro aggiuntivo Bacodo standard, con controlli specifici di React per Vite/CRA, React Router e l'API già richiamata dalla SPA.

  1. 01

    Seleziona Reagisci Stripe

    Conferma l'integrazione di Stripe per React e di avere (o di avere nell'ambito) un'API in grado di creare PaymentIntent.

  2. 02

    Reagisci al controllo di compatibilità

    Esamina la versione di React, il bundler, l'interfaccia utente di pagamento esistente e il linguaggio di backend già utilizzato dalla SPA.

  3. 03

    Integra in React

    Aggiungi Stripe.js, Elements, componenti di checkout e il contratto di recupero al tuo endpoint PaymentIntent.

  4. 04

    Configura l'app React

    Cabla la chiave pubblicabile tramite Vite/CRA public env. La chiave segreta e il webhook rimangono sull'API.

  5. 05

    Testa il percorso di pagamento React

    Esegui le schede di test Stripe, 3-D Secure, annulla/rifiuta e conferma lo stato degli aggiornamenti del webhook API letto dall'app React.

  6. 06

    Consegnare la fonte React

    Fornisci sorgente React, note di env e una lista di controllo live-key. L'implementazione di React è tua da mantenere.

Architettura

Come Stripe si connette a un progetto React

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.

Reagire SPAStripe.js/ElementiLa tua APIStripe Payment IntentsWebhook → APIReact legge lo stato pagato

Tecnologie supportate

Cosa usa davvero Integrazione Stripe per React

Reagire SPA

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.

@stripe/react-stripe-js e Stripe.js

Attacchi ufficiali Stripe React per Payment Element e portafogli.

La tua API esistente

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.

Account Stripe per l'app React

Il tuo account Stripe, chiavi di test e live, endpoint webhook sull'API ed eventi Dashboard.

È richiesta la suddivisione dell'hosting

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

Cosa include l'integrazione Stripe per React

  • Integrazione nel progetto React esistente
  • Codice sorgente completo nel tuo repository
  • Componenti di env e checkout con chiave pubblicabile
  • Recupera il contratto nella tua API PaymentIntent
  • Flussi di pagamento React 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 backend se non disponi di un'API in grado di creare PaymentIntent
  • Una migrazione da React a Next.js
  • Marketplace Connect o fatturazione personalizzata, a meno che non sia previsto come lavoro personalizzato

Pricing

Integrazione Stripe per i prezzi React

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

  • Progetto React esistente
  • Accesso a Stripe Test Mode
  • Serve un backend per i pagamenti sicuri

$145

una tantum

React

Vi serve un backend?

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

Pagamento sicuro constripe

Consegna e sicurezza

Reagire alle pratiche di consegna e sicurezza

Consegna React stimata

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.

Testato su React prima della consegna

Le carte in modalità test, i percorsi 3-D Secure, di annullamento e di rifiuto vengono esercitati su React SPA prima della consegna.

I segreti di Stripe rimangono fuori dal pacchetto React

Solo la chiave pubblicabile è pubblica. Le chiavi segrete e i segreti del webhook rimangono sul server chiamato dall'app React.

La verifica del webhook avviene sull'API, non in React

React non verifica Stripe-Signature. La tua API lo fa, quindi React legge il risultato.

Nessuna dichiarazione di sicurezza React non verificabile

Non rivendichiamo la certificazione PCI o zero frodi. React raccoglie le carte tramite Stripe Elements, non un modulo di carta personalizzato che memorizziamo.

FAQ

Domande frequenti

Cosa include l'integrazione Stripe per React?

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.

Integrerai Stripe nella nostra app React esistente?

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.

L'integrazione di Stripe per React richiede un backend?

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.

Quali pacchetti Stripe utilizza Stripe Integration for React?

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.

Stripe Integration for React supporta Apple Pay e Google Pay?

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.

Next.js è incluso nell'integrazione Stripe per React?

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.

Stripe Integration for React può riscuotere i pagamenti dell'abbonamento?

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.

Dove risiedono le chiavi pubblicabili e segrete di Stripe in un'app React?

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.

Come funzionano la modalità test Stripe e la modalità live in 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.

In che modo Stripe Integration for React gestisce 3-D Secure/SCA?

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.

I webhook Stripe sono necessari per il checkout React?

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.

Possiamo mantenere la nostra attuale interfaccia utente di pagamento React con Stripe?

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.

Il prezzo dell'integrazione Stripe per React 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 React è l'implementazione nel tuo progetto React, non una licenza di pagamento Bacodo.

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

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.

Possiamo personalizzare ricevute e metadati Stripe in React?

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.

Quale supporto React è incluso dopo la consegna di Stripe?

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.

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

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.

Cosa succede se i pagamenti Stripe falliscono in un'app React di produzione?

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.

Quali versioni di React sono compatibili con l'integrazione di Stripe per React?

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.

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

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.

Integrazione Stripe per React

Aggiungi pagamenti Stripe pronti per la produzione alla tua React SPA esistente, mantieni il codice sorgente e mantieni i segreti sulla tua API.

$145