BacodoBACODO

React Native-Add-on

Stripe-Integration für React Native

Fügen Sie @stripe/stripe-react-native Payment Sheet zu Ihrer vorhandenen React Native-App hinzu, ohne native Kartenformulare, 3-D Secure und Geheimschlüsselfehler von Grund auf neu zu erstellen. React Native hostet keine Webhooks – Ihre API schon.

  • Vollständiger Quellcode enthalten und dauerhaft Ihnen
  • Kein Add-on-Lizenzschlüssel oder wiederkehrende Lizenz erforderlich
  • Serienreif und getestet
  • Integriert in Ihr bestehendes React Native-Projekt und Ihren Stack
  • 30 Tage technischer Support nach der Übergabe inklusive
  • Optionaler 6-monatiger erweiterter technischer Support zu 20 % des Add-on-Preises

Ab

$145

USD · React Native

Demo ansehen

Stripe-Integration für React Native · React Native

Vollständiger QuellcodeKein LizenzschlüsselProduktionsbereitGetestete Integration30-Tage-Support

Requirements

What Stripe-Integration für React Native needs

  • Bestehendes React Native-Projekt
  • Stripe Test Mode-Zugang
  • Für sichere Zahlungen ist ein Backend erforderlich

Kein Repository-Zugriff nötig. Projektzugriff nur, wenn Bacodo direkt integrieren soll.

Was es leistet

Zahlungsblatt in Ihrer React Native-App – die API besitzt immer noch Geheimnisse

Bacodo integriert Stripe in das React Native-Projekt, das Sie bereits haben (Expo oder Bare). Nach der Übergabe befindet sich die React Native-Quelle in Ihrem Repo. Der geheime Schlüssel und der Webhook bleiben auf einem Backend, das Sie bereits ausführen. Sie besitzen weiterhin das Stripe-Konto und die Stripe-Gebühren.

Problem, das es löst

Eine React Native-App kann PaymentIntents nicht sicher erstellen oder Webhooks überprüfen. Es benötigt ein Zahlungsblatt und ein Backend, das ein Kundengeheimnis zurückgibt. Wenn Sie diese Aufteilung falsch erstellen, wird der geheime Schlüssel in die Binärdatei übertragen.

Wie es im Projekt landet

Wir fügen @stripe/stripe-react-native hinzu, präsentieren das Zahlungsblatt aus Ihrer bestehenden React Native-Checkout-Aktion und verknüpfen die Abrufaufrufe, die Ihre API bereits für PaymentIntents benötigt. Die Webhook-Überprüfung erfolgt über diese API, nicht innerhalb von React Native.

Warum es Entwicklungszeit spart

Ihr Team überspringt die erste produktive Stripe React Native-Implementierung: Zahlungsblatt, SCA, native Konfiguration und eine Übergabe, die dokumentiert, wie die App mit Ihrer API kommuniziert.

Für wen es ist

Entwickler und Agenturen, die bereits über eine React Native iOS/Android-App und eine API verfügen und einen wartbaren Stripe-Pfad wünschen, ohne die App in Flutter neu zu schreiben.

Kernfunktionen

Was Stripe-Integration für React Native umfasst

Zahlungsblatt in React Native

Legen Sie das Stripe-Zahlungsblatt mit @stripe/stripe-react-native aus Ihrer React Native-Zahlungsaktion vor. Kartendaten bleiben auf Stripe – nicht im React Native-Status, den Sie beibehalten.

React Native ruft Client-Geheimnisse ab – niemals den geheimen Schlüssel

Die React Native-App verwendet nur den veröffentlichbaren Schlüssel und ein kurzlebiges Client-Geheimnis von Ihrer API. Die Stripe-Integration für React Native fügt STRIPE_SECRET_KEY nicht in das JS-Bundle oder die native Binärdatei ein.

Apple Pay und Google Pay in React Native

Aktivieren Sie Wallets im Zahlungsblatt, wenn Ihr Stripe-Konto, Ihre Apple-Händler-ID und die Google Pay-Einrichtung dies zulassen. Der React Native-Fallback bleibt auf dem Zahlungsblatt der Karte.

Reagieren Sie im nativen Testmodus und veröffentlichen Sie dann den Live-Schlüssel

Versenden Sie die React Native-App zunächst mit dem veröffentlichbaren Stripe-Testschlüssel. Bei einem Live-Cutover handelt es sich um eine dokumentierte Umgebungs-/Geschmacksänderung sowie das entsprechende Live-Geheimnis auf Ihrer API.

Erfüllung ist kein React Native-Erfolgsbildschirm

Ein Dankesbildschirm von React Native ist nicht die Quelle der Wahrheit. Ihre API überprüft den Stripe-Webhook, dann liest die React Native-App den bezahlten Status von dieser API.

Reagieren Sie auf native Fehler- und Abbruchzustände

Behandeln Sie abgelehnte Karten, stornierte Zahlungsabrechnungen, Netzwerkausfälle und unvollständiges 3-D Secure, damit die React Native-Benutzeroberfläche den Kunden nicht auf dem Laufenden hält.

Anwendungsfälle

Wann Stripe-Integration für React Native passt

Bestehender React Native Store auf iOS und Android

Sie haben bereits eine React Native-App und eine API. Sie benötigen eine Zahlungsabrechnung, ohne den Katalog in Flutter neu schreiben zu müssen.

Agentur übergibt eine React Native-Client-App an die Produktion

Sie benötigen einen wartbaren Stripe-Pfad in React Native, eine Quelle im Client-Repo und eine dokumentierte Live-Key-Umstellung anstelle einer Snack-Demo.

SaaS-Paywall in React Native

Die React Native-App erfasst eine erste Zahlungsmethode, während Abonnements auf Ihrer API und Stripe Billing bleiben, wenn Sie sie bereits verwenden.

React Native App, Django oder Node API bereits vorhanden

Die Stripe-Integration für React Native ist die mobile Client-Seite. Wenn Sie auch die API erstellen müssen, wird diese separat festgelegt – bei diesem Preis handelt es sich nicht um ein neues Backend.

Demo

Vorschau des Flusses „React Native Payment Sheet“.

Vorschau des React Native-Checkout-Pfads: Zahlungsaktion, Zahlungsblatt, Bestätigung und Fehlerstatus. Nach der Kompatibilitätsprüfung ist eine Live-Sandbox für Ihr Stripe-Konto verfügbar. Diese Seite verarbeitet keine tatsächlichen Gebühren.

So funktioniert es

So wird die Stripe-Integration für React Native bereitgestellt

Standardmäßiger Bacodo-Add-on-Workflow mit React Native-spezifischen Prüfungen für Expo vs. Bare, iOS/Android-Ziele und der API, die die App bereits aufruft.

  1. 01

    Wählen Sie „Native Stripe reagieren“.

    Bestätigen Sie die Stripe-Integration für React Native und dass Sie über eine API verfügen (oder einen Umfang haben werden), die PaymentIntents erstellen kann.

  2. 02

    React Native-Kompatibilitätsprüfung

    Überprüfen Sie die native Version von React, den Expo- oder Bare-Workflow, die vorhandene Checkout-Benutzeroberfläche und die Backend-Sprache, die die App bereits verwendet.

  3. 03

    In React Native integrieren

    Fügen Sie Ihrem PaymentIntent-Endpunkt @stripe/stripe-react-native, die Zahlungsblattpräsentation, die native Konfiguration und den Abrufvertrag hinzu.

  4. 04

    Konfigurieren Sie die React Native-App

    Verknüpfen Sie den veröffentlichbaren Schlüssel über env oder flavour. Geheimer Schlüssel und Webhook bleiben auf der API.

  5. 05

    Testen Sie den React Native-Zahlungspfad

    Führen Sie Stripe-Testkarten auf iOS und Android sowie 3-D Secure aus, brechen/ablehnen Sie ab und bestätigen Sie den Status der API-Webhook-Updates, den die React Native-App liest.

  6. 06

    Übergeben Sie die React Native-Quelle

    Stellen Sie React Native-Quellen, Umgebungsnotizen und eine Live-Key-Checkliste bereit. Die Pflege der React Native-Implementierung liegt bei Ihnen.

Architektur

Wie Stripe eine Verbindung zu einem React Native-Projekt herstellt

Die React Native-Binärdatei enthält niemals den geheimen Schlüssel. Payment Sheet verwendet ein Client-Geheimnis von Ihrer API. Stripe benachrichtigt diese API per Webhook. React Native liest dann den Bestellstatus.

React Native-AppZahlungsblattIhre APIStripe PaymentIntentsWebhook → APIReact Native liest den bezahlten Status

Unterstützte Technologien

Was Stripe-Integration für React Native tatsächlich nutzt

Reagieren Sie nativ auf iOS und Android

Aktuelles React Native auf der Expo oder ein einfacher Workflow. Dies ist keine React-Website und kein Flutter – sehen Sie sich diese Stripe-Landungen für diese Stacks an.

@stripe/stripe-react-native

Offizielles Stripe React Native SDK für Zahlungsblätter und Geldbörsen.

Ihre vorhandene API

PaymentIntent-Erstellung und Webhook-Überprüfung im Backend, das die React Native-App bereits aufruft. Dieses Add-on ersetzt diese API nicht durch einen reinen Bacodo-Dienst.

Stripe-Konto für die React Native-App

Ihr Stripe-Konto, Test- und Live-Schlüssel, Webhook-Endpunkt auf der API und Dashboard-Ereignisse.

Erforderliches Backend

Die React Native-App ist ein Client. Der Webhook kann nicht nur auf dem Telefon leben. Ein reines App-Projekt ohne API kann diesen Checkout-Pfad nicht abschließen.

Leistungsumfang

Was die Stripe-Integration für React Native beinhaltet

  • Integration in das bestehende React Native-Projekt
  • Vollständiger Quellcode in Ihrem Repository
  • Präsentation der Umgebung mit veröffentlichbarem Schlüssel und des Zahlungsblatts
  • Rufen Sie den Vertrag in Ihre PaymentIntent-API ab
  • Vor der Übergabe wurden die Zahlungsabläufe von React Native auf iOS und Android getestet
  • Übergabenotizen für die Test-to-Live-Umstellung
  • 30-tägiger technischer Support nach Übergabe

Nicht im Aufpreis enthalten

  • Stripe-Konto, API-Schlüssel und Stripe-Verarbeitungsgebühren – diese gehören Ihnen
  • Ein neues Backend, wenn Sie keine API haben, die PaymentIntents erstellen kann
  • Eine Neufassung von React Native zu Flutter
  • Apple- oder Google-In-App-Kauf-Ersatz
  • Marketplace Connect oder benutzerdefinierte Abrechnung, sofern es sich nicht um eine benutzerdefinierte Arbeit handelt

Pricing

Stripe-Integration für React Native-Preise

Dieser Preis gilt nur für die React Native-Plattform. Die Add-on-Preise für Next.js, React, Django oder Flutter werden nicht verwendet.

Stripe-Integration für React Native

Fügen Sie einer vorhandenen React Native-App das produktionsbereite Stripe Payment Sheet hinzu und behalten Sie den Quellcode.

Voraussetzungen

  • Bestehendes React Native-Projekt
  • Stripe Test Mode-Zugang
  • Für sichere Zahlungen ist ein Backend erforderlich

$145

einmalig

React Native

Brauchen Sie ein Backend?

  • Vollständiger Quellcode
  • Keine Lizenzgebühr
  • 30 Tage Support
  • Vollständige Integration

Sichere Zahlung überstripe

Übergabe und Sicherheit

Reagieren Sie auf native Bereitstellungs- und Sicherheitspraktiken

Geschätzte React Native-Lieferung

Der typische Checkout von React Native Stripe erfolgt nach der React Native-Kompatibilitätsprüfung. Die Zeitleiste hängt von Expo vs. Bare, der aktuellen Checkout-Benutzeroberfläche und der API ab.

Vor der Übergabe auf React Native getestet

Testmoduskarten, 3-D-Secure-, Stornierungs- und Ablehnungspfade werden vor der Übergabe auf iOS und Android getestet.

Stripe-Geheimnisse bleiben aus der React Native-Binärdatei fern

Nur der veröffentlichbare Schlüssel befindet sich im Client. Geheime Schlüssel und Webhook-Geheimnisse bleiben auf dem Server, den die React Native-App aufruft.

Die Webhook-Überprüfung erfolgt über die API, nicht in React Native

React Native überprüft die Stripe-Signatur nicht. Ihre API tut dies, dann liest React Native das Ergebnis.

Keine nicht überprüfbaren React Native-Sicherheitsansprüche

Wir erheben keinen Anspruch auf PCI-Zertifizierung oder Betrugsfreiheit. React Native sammelt Karten über das Zahlungsblatt, nicht über ein benutzerdefiniertes Kartenformular, das wir speichern.

FAQ

Häufige Fragen

Was beinhaltet die Stripe-Integration für React Native?

Die Stripe-Integration für React Native umfasst die Einrichtung von @stripe/stripe-react-native, ein Zahlungsblatt in Ihrem bestehenden React Native-Checkout, den Abrufvertrag für Ihre PaymentIntent-API, iOS- und Android-Testabdeckung sowie Übergabenotizen. Sie erhalten die React Native-Quelle in Ihrem Projekt. Stripe-Gebühren, Ihr Stripe-Konto und der Aufbau eines neuen Backends sind getrennt.

Werden Sie Stripe in unsere bestehende React Native-App integrieren?

Ja. Die Stripe-Integration für React Native wurde für ein React Native-Projekt entwickelt, das Sie bereits haben. Wir integrieren das Zahlungsblatt und den Zahlungseingangspunkt in Ihre aktuelle React Native-Navigations- und Checkout-Benutzeroberfläche, anstatt eine separate Demo-App als Lieferumfang auszuliefern.

Benötigt die Stripe-Integration für React Native ein Backend?

Ja für einen Produktions-React-Native-Stripe-Pfad. PaymentIntents, der geheime Schlüssel und die Webhook-Überprüfung müssen auf einem Server gespeichert sein. Die React Native-App erhält nur einen veröffentlichbaren Schlüssel und ein Client-Geheimnis. Wenn Sie keine API haben, wird diese Backend-Arbeit separat berechnet und ist nicht im Preis des React Native-Add-ons enthalten.

Welches Stripe-Paket verwendet Stripe Integration für React Native?

Die Stripe-Integration für React Native verwendet @stripe/stripe-react-native, das offizielle React Native SDK von Stripe, für Zahlungsblätter und Wallet-Schaltflächen auf iOS und Android. Wir binden den React Native-Checkout nicht in ein undokumentiertes Plugin ein, es sei denn, Sie benötigen eines ausdrücklich.

Unterstützt die Stripe-Integration für React Native Apple Pay und Google Pay?

Ja, wenn Ihr Stripe-Konto, Ihre Apple-Händler-ID, Ihre Google Pay-Einrichtung und Ihre Geräte dies unterstützen. In React Native sind Wallet-Buttons optionaler Bereich. Das Kartenzahlungsblatt auf React Native bleibt der Standard-Fallback.

Ist Expo in der Stripe-Integration für React Native enthalten?

Expo und Bare React Native sind beide Kandidaten. Wir bestätigen die Kompatibilität von Expo SDK, Konfigurations-Plugins und nativen Modulen während der React Native-Kompatibilitätsprüfung. Eine React-Website ist nicht diese Landung – siehe Stripe-Integration für React.

Kann Stripe Integration für React Native Abonnementzahlungen einziehen?

Der React Native-Client kann einen PaymentIntent bestätigen oder eine Zahlungsmethode über Payment Sheet erfassen. Wiederkehrende Stripe Billing-Produkte, Kundenportal und Rechnungslogik live auf Ihrer API. Für abonnementintensive React Native-Arbeiten ist möglicherweise ein individuelles Angebot erforderlich.

Wo befinden sich die veröffentlichbaren und geheimen Schlüssel von Stripe in einer React Native-App?

Die React Native-App verwendet nur den veröffentlichbaren Stripe-Schlüssel, typischerweise über env oder eine sichere Variante. Der geheime Schlüssel und das Webhook-Signaturgeheimnis bleiben auf dem Server. Die Stripe-Integration für React Native fügt keine geheimen Schlüssel in die APK oder IPA ein.

Wie funktionieren der Stripe-Testmodus und der Live-Modus in React Native?

Wir implementieren zunächst die Stripe-Integration für React Native anhand von Stripe-Testschlüsseln und Testkarten. Bei der Live-Schaltung handelt es sich um eine dokumentierte Schlüssel- und Webhook-Umstellung in Ihrem Stripe-Dashboard und Ihrer Serverumgebung, die von der React Native-App verwendet wird, und nicht um eine Add-on-Lizenzaktivierung.

Wie geht die Stripe-Integration für React Native mit 3-D Secure/SCA um?

React Native Payment Sheet und PaymentIntents verarbeiten 3-D Secure über @stripe/stripe-react-native. Die React Native-App muss den Blattfluss aufrechterhalten, bis Stripe einen endgültigen Status zurückgibt; Die Stripe-Integration für React Native verbindet diese Zustände explizit.

Sind Stripe-Webhooks für den React Native-Checkout erforderlich?

Ja für die Erfüllung nach React Native Payment Sheet. Die React Native-Benutzeroberfläche ist nicht die Quelle der Wahrheit. Ihr Backend überprüft Stripe-Webhook-Signaturen und markiert dann die Bestellung als bezahlt, entsperrt Inhalte oder benachrichtigt die Ausführung.

Können wir unsere aktuelle React Native-Checkout-Benutzeroberfläche mit Stripe beibehalten?

Ja. Die Stripe-Integration für React Native behält normalerweise Ihr React Native-Produkt, Ihren Warenkorb und Ihre Bezahlschaltfläche bei und zeigt das Zahlungsblatt dieser Aktion an. Ein benutzerdefiniertes React Native-Kartenformular, das PAN-Rohdaten berührt, liegt außerhalb des Standardumfangs, da Payment Sheet der sicherere PCI-Pfad ist.

Sind im Preis der Stripe-Integration für React Native ein Stripe-Konto oder Gebühren enthalten?

Nein. Sie erstellen und besitzen das Stripe-Konto, die API-Schlüssel und die Stripe-Verarbeitungsgebühren. Der Preis für das React Native-Add-on bezieht sich auf die Implementierung in Ihr React Native-Projekt, nicht auf eine Bacodo-Zahlungslizenz.

Wird die Stripe-Integration für React Native den In-App-Kauf von Apple oder Google ersetzen?

Nein. Für digitale Waren, die im iOS- oder Android-Store verkauft werden, ist oft noch IAP erforderlich. Die Stripe-Integration für React Native dient dem Stripe-Checkout in einer React Native-App, wobei Stripe ein zulässiger Zahlungspfad für Ihren Produkttyp ist.

Können wir Stripe-Belege und Metadaten in React Native anpassen?

Ja. PaymentIntent-Metadaten, Kundendatensätze und die Felder, die Sie nach der Webhook-Bestätigung beibehalten, werden während der Stripe-Integration für React Native an das Bestellmodell Ihrer bestehenden React Native-App angepasst.

Welche React Native-Unterstützung ist nach der Stripe-Übergabe enthalten?

Die React Native-Quelle befindet sich in Ihrem Repo, sodass Ihr Team sie verwalten kann. Der im Lieferumfang enthaltene 30-Tage-Support deckt technische Fragen und Mängel im Umfang der bereitgestellten Stripe-Integration für React Native ab, nicht jedoch damit zusammenhängende Arbeiten an React Native-Funktionen.

Wie werden Stripe-React-Native- oder Stripe-API-Updates auf React Native gehandhabt?

Während des 30-Tage-Fensters helfen wir bei Störungen in der bereitgestellten React Native-Integration, die durch eine dokumentierte Stripe- oder @stripe/stripe-react-native-Änderung verursacht wurden. Laufende React Native-Paket-Upgrades danach sind Ihre Wartung oder erweiterter technischer Support, wenn Sie es kaufen.

Was passiert, wenn Stripe-Zahlungen in einer React Native-Produktionsanwendung fehlschlagen?

Wir dokumentieren, wie Sie den PaymentIntent-Status, Stripe-Dashboard-Protokolle und die Webhook-Zustellung über den React Native-Checkout-Pfad lesen. Der 30-Tage-Support umfasst die Fehlerbehebung bei Ablehnungen, 3-D Secure-Abbrüchen und falsch konfigurierten Schlüsseln für den bereitgestellten React Native-Flow.

Welche React Native-Versionen sind mit der Stripe-Integration für React Native kompatibel?

Wir bestätigen Ihre React Native-Version, Ihren Expo- oder Bare-Workflow, Ihr iOS-Bereitstellungsziel und Ihr Android-minSdk anhand der @stripe/stripe-react-native-Version, die wir zum Zeitpunkt der Integration anheften. Ältere oder stark gespaltene React Native-Laufzeiten benötigen möglicherweise zusätzlichen Umfang.

Was ist 30-Tage-Support im Vergleich zu 6-monatigem erweiterten technischen Support für die Stripe-Integration für React Native?

Für den gelieferten React Native Stripe-Pfad sind 30 Tage nach Übergabe inklusive. Erweiterter technischer Support ist für 20 % des React Native-Zusatzpreises optional und umfasst sechs weitere Monate technische Hilfe für dieselbe React Native-Integration, nicht für einen neuen Produktaufbau.

Stripe-Integration für React Native

Fügen Sie produktionsbereite Stripe-Zahlungen zu Ihrer bestehenden React Native-App hinzu, behalten Sie den Quellcode und bewahren Sie Geheimnisse auf Ihrer API.

$145