BacodoBACODO

Componente aggiuntivo React Native

Integrazione Stripe per React Native

Aggiungi @stripe/stripe-react-native Payment Sheet alla tua app React Native esistente senza creare da zero moduli nativi per carte, 3-D Secure ed errori di chiave segreta. React Native 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 progetto e nello stack React Native esistenti
  • Supporto tecnico post-consegna di 30 giorni incluso
  • Supporto tecnico esteso opzionale di 6 mesi al 20% del prezzo aggiuntivo

Da

$145

USD · React Native

Visualizza la demo

Integrazione Stripe per React Native · React Native

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

Requirements

What Integrazione Stripe per React Native needs

  • Progetto React Native 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

Foglio di pagamento nella tua app React Native: l'API possiede ancora segreti

Bacodo integra Stripe nel progetto React Native che già hai (Expo o bare). Dopo il trasferimento, la fonte React Native 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

Un'app React Native non può creare in modo sicuro PaymentIntent o verificare webhook. Ha bisogno del foglio di pagamento e di un backend che restituisca un segreto client. Costruendo quella divisione sbagliata viene spedita la chiave segreta nel codice binario.

Come interviene nel progetto

Aggiungiamo @stripe/stripe-react-native, presentiamo il foglio di pagamento dall'azione di pagamento React Native esistente e inoltriamo le chiamate di recupero di cui la tua API ha già bisogno per PaymentIntents. La verifica del webhook avviene su quell'API, non all'interno di React Native.

Perché fa risparmiare tempo di sviluppo

Il tuo team salta la prima implementazione di produzione di Stripe React Native: foglio di pagamento, SCA, configurazione nativa e un passaggio di consegne che documenta il modo in cui l'app comunica con la tua API.

Per chi è

Sviluppatori e agenzie che dispongono già di un'app React Native per iOS/Android e di un'API e desiderano un percorso Stripe gestibile senza riscrivere l'app in Flutter.

Funzioni chiave

Cosa include Integrazione Stripe per React Native

Foglio di pagamento in React Native

Presenta il foglio di pagamento Stripe con @stripe/stripe-react-native dalla tua azione di pagamento React Native. I dati della carta rimangono su Stripe: non persisti nello stato React Native.

React Native recupera i segreti del client, mai la chiave segreta

L'app React Native utilizza solo la chiave pubblicabile e un segreto client di breve durata della tua API. Stripe Integration for React Native non inserisce STRIPE_SECRET_KEY nel bundle JS o nel binario nativo.

Apple Pay e Google Pay in React Native

Abilita i portafogli nel Foglio di pagamento quando il tuo account Stripe, l'ID commerciante Apple e la configurazione di Google Pay lo consentono. Il fallback React Native rimane sul foglio di pagamento della carta.

Modalità di test React Native quindi chiave pubblicabile in tempo reale

Spedisci prima l'app React Native con la chiave pubblicabile del test Stripe. Il cutover live è una modifica di ambiente/sapore documentata più il segreto live corrispondente sulla tua API.

L'adempimento non è una schermata di successo di React Native

Una schermata di ringraziamento di React Native non è la fonte della verità. La tua API verifica il webhook Stripe, quindi l'app React Native legge lo stato a pagamento da tale API.

Reagire all'errore nativo e annullare gli stati

Gestisci le carte rifiutate, i fogli di pagamento annullati, i guasti di rete e 3-D Secure incompleto in modo che l'interfaccia utente React Native non lasci il cliente con una schermata inattiva.

Casi d’uso

Quando Integrazione Stripe per React Native è adatto

Negozio React Native esistente su iOS e Android

Hai già un'app React Native e un'API. È necessario effettuare il checkout del foglio di pagamento senza riscrivere il catalogo in Flutter.

Agenzia che consegna un'app client React Native alla produzione

Hai bisogno di un percorso Stripe gestibile in React Native, di un sorgente nel repository del client e di un cutover live-key documentato invece di una demo di snack.

Paywall SaaS in React Native

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

App React Native, Django o API Node già presenti

L'integrazione Stripe per React Native è il lato client mobile. Se hai bisogno anche della creazione dell'API, l'ambito è separato: questo prezzo non è un nuovo backend.

Demo

Anteprima del flusso del foglio di pagamento nativo di React

Visualizza in anteprima il percorso di pagamento di React Native: azione di pagamento, foglio 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 Native

Flusso di lavoro aggiuntivo Bacodo standard, con controlli specifici di React Native per Expo rispetto a bare, target iOS/Android e l'API già richiamata dall'app.

  1. 01

    Seleziona React Native Stripe

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

  2. 02

    Controllo di compatibilità React Native

    Esamina la versione React Native, Expo o il flusso di lavoro semplice, l'interfaccia utente di pagamento esistente e il linguaggio di backend già utilizzato dall'app.

  3. 03

    Integrazione in React Native

    Aggiungi @stripe/stripe-react-native, la presentazione del foglio di pagamento, la configurazione nativa e il contratto di recupero al tuo endpoint PaymentIntent.

  4. 04

    Configura l'app React Native

    Collega la chiave pubblicabile tramite env o sapore. La chiave segreta e il webhook rimangono sull'API.

  5. 05

    Testa il percorso di pagamento React Native

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

  6. 06

    Consegnare la fonte React Native

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

Architettura

Come Stripe si connette a un progetto React Native

Il binario React Native non detiene mai la chiave segreta. Il foglio di pagamento utilizza un segreto client della tua API. Stripe notifica l'API tramite webhook. React Native legge quindi lo stato dell'ordine.

App React nativaFoglio di pagamentoLa tua APIStripe Payment IntentsWebhook → APIReact Native legge lo stato a pagamento

Tecnologie supportate

Cosa usa davvero Integrazione Stripe per React Native

React Native su iOS e Android

React Native attuale su Expo o un flusso di lavoro semplice. Questo non è un sito Web React e non Flutter: guarda gli atterraggi Stripe per quegli stack.

@stripe/stripe-react-native

SDK nativo ufficiale di Stripe React per fogli di pagamento e portafogli.

La tua API esistente

PaymentIntent crea e verifica il webhook sul back-end già chiamato dall'app React Native. Questo componente aggiuntivo non sostituisce l'API con un servizio esclusivo di Bacodo.

Account Stripe per l'app React Native

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

Backend richiesto

L'app React Native è un client. Il webhook non può vivere solo sul telefono. Un progetto solo app senza API non può completare questo percorso di pagamento.

Cosa è incluso

Cosa include l'integrazione Stripe per React Native

  • Integrazione nel progetto React Native esistente
  • Codice sorgente completo nel tuo repository
  • Presentazione della busta con chiave pubblicabile e del foglio di pagamento
  • Recupera il contratto nella tua API PaymentIntent
  • Flussi di pagamento React Native testati su iOS e Android 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 riscrittura da React Native a Flutter
  • Sostituzione con acquisto in-app Apple o Google
  • Marketplace Connect o fatturazione personalizzata, a meno che non sia previsto come lavoro personalizzato

Pricing

Integrazione Stripe per prezzi React Native

Questo prezzo è valido solo per la piattaforma React Native. Non utilizza i prezzi dei componenti aggiuntivi Next.js, React, Django o Flutter.

Integrazione Stripe per React Native

Aggiungi il foglio di pagamento Stripe pronto per la produzione a un'app React Native esistente e conserva il codice sorgente.

Requisiti

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

$145

una tantum

React Native

Vi serve un backend?

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

Pagamento sicuro constripe

Consegna e sicurezza

React Native consegna e pratiche di sicurezza

Consegna React Native stimata

Il tipico checkout di React Native Stripe viene effettuato dopo il controllo di compatibilità di React Native. La sequenza temporale dipende dall'Expo rispetto al semplice, dall'interfaccia utente del checkout corrente e dall'API.

Testato su React Native prima della consegna

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

I segreti di Stripe rimangono fuori dal binario React Native

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

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

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

Nessuna dichiarazione di sicurezza React Native non verificabile

Non rivendichiamo la certificazione PCI o zero frodi. React Native raccoglie le carte tramite il foglio di pagamento, non un modulo di carta personalizzato che memorizziamo.

FAQ

Domande frequenti

Cosa include l'integrazione Stripe per React Native?

L'integrazione di Stripe per React Native include la configurazione @stripe/stripe-react-native, il foglio di pagamento nel checkout React Native esistente, il contratto di recupero nell'API PaymentIntent, la copertura dei test iOS e Android e le note di consegna. Ricevi la fonte React Native 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 Native esistente?

Sì. Stripe Integration for React Native è progettato per un progetto React Native che già possiedi. Inseriamo il foglio di pagamento e il punto di ingresso del pagamento nell'attuale interfaccia utente di navigazione e pagamento di React Native invece di spedire un'app demo separata come risultato finale.

L'integrazione di Stripe per React Native richiede un backend?

Sì per un percorso React Native Stripe di produzione. PaymentIntent, la chiave segreta e la verifica del webhook devono risiedere su un server. L'app React Native riceve solo una chiave pubblicabile e un segreto client. Se non disponi di API, il lavoro di backend ha un ambito separato e non è previsto nel prezzo del componente aggiuntivo React Native.

Quale pacchetto Stripe utilizza Stripe Integration for React Native?

L'integrazione di Stripe per React Native utilizza @stripe/stripe-react-native, l'SDK React Native ufficiale di Stripe, per i pulsanti del foglio di pagamento e del portafoglio su iOS e Android. Non inseriamo il checkout di React Native in un plugin non documentato a meno che tu non ne richieda esplicitamente uno.

Stripe Integration for React Native supporta Apple Pay e Google Pay?

Sì, quando il tuo account Stripe, l'ID commerciante Apple, la configurazione di Google Pay e i dispositivi li supportano. In React Native, i pulsanti del portafoglio sono un ambito opzionale. Il foglio di pagamento con carta su React Native rimane il fallback predefinito.

Expo è incluso nell'integrazione Stripe per React Native?

Expo e bare React Native sono entrambi candidati. Confermiamo Expo SDK, plug-in di configurazione e compatibilità dei moduli nativi durante il controllo di compatibilità di React Native. Un sito Web React non è questa destinazione: consulta Integrazione Stripe per React.

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

Il client React Native può confermare un PaymentIntent o riscuotere un metodo di pagamento tramite Payment Sheet. I prodotti di fatturazione Stripe ricorrente, il portale clienti e la logica delle fatture sono disponibili sulla tua API. Il lavoro React Native con numerosi abbonamenti potrebbe richiedere un preventivo personalizzato.

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

L'app React Native utilizza solo la chiave pubblicabile Stripe, in genere tramite env o un profilo sicuro. La chiave segreta e il segreto della firma del webhook rimangono sul server. Stripe Integration for React Native non inserisce chiavi segrete nell'APK o nell'IPA.

Come funzionano la modalità test Stripe e la modalità live in React Native?

Implementiamo prima l'integrazione Stripe per React Native con le chiavi di test e le schede di test Stripe. La messa in modalità live è una chiave documentata e un passaggio webhook nella dashboard Stripe e nell'ambiente server utilizzato dall'app React Native, non un'attivazione di licenza aggiuntiva.

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

React Native Payment Sheet e PaymentIntents gestiscono 3-D Secure tramite @stripe/stripe-react-native. L'app React Native deve mantenere vivo il flusso del foglio finché Stripe non restituisce uno stato finale; Stripe Integration for React Native collega esplicitamente questi stati.

I webhook Stripe sono necessari per il checkout React Native?

Sì per l'adempimento dopo il foglio di pagamento nativo di React. L'interfaccia utente di React Native non è la fonte della verità. Il tuo backend 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 React Native con Stripe?

Sì. L'integrazione di Stripe per React Native in genere mantiene il prodotto React Native, il carrello e il pulsante di pagamento e presenta il foglio di pagamento da tale azione. Un modulo di carta React Native personalizzato che tocca dati PAN grezzi non rientra nell'ambito predefinito perché il foglio di pagamento è il percorso PCI più sicuro.

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

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

No. I prodotti digitali venduti nello store iOS o Android spesso richiedono ancora IAP. L'integrazione Stripe per React Native è per il pagamento Stripe in un'app React Native in cui Stripe è un percorso di pagamento consentito per il tuo tipo di prodotto.

Possiamo personalizzare ricevute e metadati Stripe in React Native?

Sì. I metadati PaymentIntent, i record dei clienti e i campi mantenuti dopo la conferma del webhook sono allineati al modello di ordine dell'app React Native esistente durante l'integrazione di Stripe per React Native.

Quale supporto React Native è incluso dopo il passaggio di Stripe?

La fonte React Native è 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 fornita per React Native, non nel lavoro delle funzionalità React Native non correlato.

Come vengono gestiti gli aggiornamenti stripe-react-native o API Stripe su React Native?

Durante il periodo di 30 giorni aiutiamo in caso di interruzione dell'integrazione React Native causata da una modifica documentata di Stripe o @stripe/stripe-react-native. Gli aggiornamenti continui del pacchetto React Native successivi costituiscono la manutenzione o il supporto tecnico esteso se lo acquisti.

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

Documentiamo come leggere lo stato di PaymentIntent, i log di Stripe Dashboard e la consegna del webhook dal percorso di pagamento di React Native. 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 Native fornito.

Quali versioni di React Native sono compatibili con Stripe Integration per React Native?

Confermiamo la tua versione React Native, Expo o flusso di lavoro semplice, destinazione di distribuzione iOS e minSdk Android rispetto alla versione @stripe/stripe-react-native che aggiungiamo al momento dell'integrazione. I runtime React Native 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 Native?

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

Integrazione Stripe per React Native

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

$145