Ermöglichen Sie Unternehmen auf Ihrer Plattform, Zahlungen direkt anzunehmen

Zunächst benötigen Sie ein Stripe-Konto. Jetzt registrieren.

Serverseitig

Für diese Integration sind Endpoints auf Ihrem Server erforderlich, die mit der Stripe-API kommunizieren können. Nutzen Sie diese offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus:

# Available as a gem
sudo gem install stripe

# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Clientseitig

Das React Native SDK ist Open Source und vollständig dokumentiert. Intern werden native iOS und Android SDKs verwendet. Um das React Native SDK von Stripe zu installieren, führen Sie einen der folgenden Befehle im Verzeichnis Ihres Projekts aus (je nachdem, welchen Paket-Manager Sie verwenden):

yarn add @stripe/stripe-react-native

Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:

• For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
• Für Android müssen keine Abhängigkeiten mehr installiert werden.

Stripe Initialisierung

Um Stripe in Ihrer React Native-App zu initialisieren, umschließen Sie entweder Ihren Zahlungsbildschirm mit der Komponente StripeProvider oder verwenden Sie die Initialisierungsmethode initStripe. Nur der veröffentlichbare API-Schlüssel in publishableKey ist erforderlich. Das folgende Beispiel zeigt, wie Stripe mithilfe der Komponente StripeProvider initialisiert wird.

import { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      {/* Your app code here */}
    </StripeProvider>
  );
}

Wenn sich Nutzer/innen (Verkäufer/innen oder Dienstleister/innen) auf Ihrer Plattform registrieren, erstellen Sie ein Nutzerkonto (auch verbundenes Konto genannt), damit Sie Zahlungen einziehen und anschließend an die Nutzer/innen auszahlen können. Verbundene Konten entsprechen in der API von Stripe Ihren Nutzerinnen und Nutzern und helfen, die für deren Identitätsprüfung erforderlichen Informationen zu erfassen. In unserem Beispiel mit der Store-Builder-Plattform ist das verbundene Konto das Unternehmen, das einen Online-Shop einrichtet.

Schritt 2.1: Verbundenes Konto erstellen und Informationen vorab angeben Server-side

Verwenden Sie die /v1/accounts API, um ein verbundenes Konto zu erstellen. Sie können das verbundene Konto erstellen, indem Sie die Standardparameter des verbundenen Kontos verwenden oder den Kontotyp angeben.

curl -X POST https://api.stripe.com/v1/accounts \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

Falls Sie bereits Informationen für Ihre verbundenen Konten erfasst haben, können Sie diese im Account-Objekt vorab angeben. Sie können alle Kontoinformationen vorab ausfüllen, einschließlich persönlicher und geschäftlicher Informationen, externer Kontoinformationen usw.

Connect Onboarding fragt keine vorab ausgefüllten Informationen ab. Kontoinhaber/innen müssen vorausgefüllte Informationen jedoch bestätigen, bevor sie den Connect-Rahmenvertrag akzeptieren können.

Füllen Sie beim Testen Ihrer Integration die Kontoinformationen vorab mit Testdaten aus.

Schritt 2.2: Konto-Link erstellen Serverseitig

Sie können einen Konto-Link erstellen, indem Sie die Account Links API mit den folgenden Parametern aufrufen:

• account
• refresh_url
• return_url
• type = account_onboarding

curl https://api.stripe.com/v1/account_links \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_ID}} \
  --data-urlencode refresh_url="https://example.com/reauth" \
  --data-urlencode return_url="https://example.com/return" \
  -d type=account_onboarding

Schritt 2.3: Nutzer/innen an die Konto-Link-URL weiterleiten Clientseitig

Die Antwort auf Ihre Account Links-Anforderung enthält einen Wert für den Schlüssel url. Konto-Links sind temporär und können nur einmal verwendet werden, da sie Zugang zu den persönlichen Daten des Nutzers/der Nutzerin des verbundenen Kontos gewähren. Wenn Sie Informationen vorab angeben möchten, müssen Sie dies vor der Erstellung des Konto-Links tun. Nach der Erstellung des Konto-Links für ein Standard-Konto können Informationen für das Konto weder gelesen noch geschrieben werden. Senden Sie diese URL an Ihre App und öffnen Sie sie im Browser, damit der/die Nutzer/in den Connect Onboarding-Ablauf abschließen kann.

Schritt 2.4: Rückkehr der Nutzer/innen zu Ihrer Plattform steuern Client-side

Connect Onboarding verlangt, dass Sie sowohl eine return_url als auch eine refresh_url übergeben, um alle Fälle steuern zu können, in denen die Nutzer/innen an Ihre Plattform zurückgeleitet werden. Es ist wichtig, dass Sie diese URLs korrekt implementieren, um Ihren Nutzern/innen die bestmögliche Erfahrung zu bieten. Sie können einen Deep Link einrichten, damit Stripe automatisch zu Ihrer App weiterleiten kann.

return_url

Stripe löst eine Weiterleitung zu dieser URL aus, wenn die Nutzer/innen das Connect Onboarding abschließen. Das heißt nicht, dass alle Informationen erfasst wurden oder keine offenen Anforderungen für das Konto bestehen. Es bedeutet lediglich, dass die Nutzer/innen das Verfahren ordnungsgemäß durchlaufen und beendet haben.

Über diese URL wird kein Status übergeben. Nachdem ein/eine Nutzer/in zu Ihrer return_url weitergeleitet wurde, überprüfen Sie den Status des Parameters details_submitted für das jeweilige Konto, indem Sie eine der folgenden Aktionen ausführen:

• Überwachen von account.updated webhooks
• Rufen Sie die Accounts-API auf und prüfen Sie das zurückgegebene Objekt.

refresh_url

Stripe leitet Ihre Nutzer/innen in den folgenden Fällen an die refresh_url weiter:

• Der Link ist abgelaufen (seit Erstellung des Links sind ein paar Minuten vergangen).
• Der/die Nutzer/in hat den Link bereits aufgerufen (er/sie hat die Seite aktualisiert oder auf die Zurück/Vorwärts-Schaltfläche geklickt)
• Ihre Plattform hat keinen Zugang mehr zu diesem Konto.
• Das Konto wurde abgelehnt.

Ihre refresh_url sollte eine Methode auf Ihrem Server auslösen, um Account Links erneut mit denselben Parametern aufzurufen und Nutzer/innen an das Connect Onboarding zurückzuleiten, damit ein nahtloses Erlebnis entsteht.

Schritt 2.5: Umgang mit Nutzer/innen, die das Onboarding nicht abgeschlossen haben

Wenn Nutzer/innen an Ihre return_url weitergeleitet werden, haben sie das Onboarding möglicherweise nicht abgeschlossen. Rufen Sie mithilfe des Endpoints /v1/accounts das Nutzerkonto auf und prüfen Sie den Wert für charges_enabled. Wenn das Onboarding für das Konto nicht komplett abgeschlossen wurde, geben Sie den Nutzerinnen/Nutzern mithilfe entsprechender Eingabeaufforderungen der Nutzeroberfläche die Möglichkeit, das Onboarding zu einem späteren Zeitpunkt fortzusetzen. Diese können ihre Konto-Aktivierung dann über einen neuen (von Ihrer Integration generierten) Link abschließen. Anhand des Status des Parameters details_submitted im Nutzerkonto können Sie überprüfen, ob das Onboarding abgeschlossen wurde.

Zeigen Sie die Einstellungen für Ihre Zahlungsmethoden an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Kartenzahlungen werden standardmäßig aktiviert, aber Sie können Zahlungsmethoden nach Bedarf aktivieren und deaktivieren.

Diese Integration verwendet drei Stripe-API-Objekte:

1. PaymentIntent: Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden.

2. (Optional) Kunde/Kundin: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen.

3. (Optional) Temporärer Kundenschlüssel: Informationen auf dem Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Ein temporärer Schlüssel gewährt dem SDK vorübergehenden Zugriff auf den/die Kund/in.

Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der:

1. Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue.
2. Erstellt einen temporären Schlüssel für den Kunden/die Kundin.
3. Erstellt einen PaymentIntent mit dem Betrag, der Währung und dem Kunden/der Kundin. Den Parameter automatic_payment_methods können Sie optional ebenfalls einfügen. Stripe aktiviert seine Funktionalität standardmäßig in der neuesten Version der API.
4. Gibt das Client-Geheimnis des PaymentIntent, das secret des temporären Schlüssels, die ID des Kundenobjekts und Ihren veröffentlichbaren Schlüssel an Ihre App zurück.

Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise eur für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO eur-Zahlungen nicht unterstützt.

Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität.

# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-07-30.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Account: 
{{CONNECTED_ACCOUNT_ID}}
"
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \
  -d application_fee_amount="123" \

Bevor das mobile Payment Element angezeigt wird, sollte Ihr Checkout-Seite folgendes anzeigen:

• Die gekauften Produkte und den Gesamtbetrag anzeigen
• Alle benötigten Versanddaten erfassen
• Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen

Erstellen Sie im Checkout Ihrer App eine Netzwerkanfrage an den im vorigen Schritt erstellten Backend-Endpoint und rufen Sie initPaymentSheet aus dem useStripe-Hook auf.

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Wenn Ihr/e Kund/in auf die Schaltfläche Checkout tippt, rufen Sie bitte presentPaymentSheet() auf, um das Formular anzuzeigen. Nachdem der/die Kund/in die Zahlung abgeschlossen hat, wird das Formular verworfen und das Promise mit einem optionalen StripeError<PaymentSheetError> aufgelöst.

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Wenn kein Fehler auftritt, informieren Sie den/die Nutzer/in, dass der Vorgang abgeschlossen ist (zum Beispiel durch die Anzeige einer Bestellbestätigung).

Wenn Sie allowsDelayedPaymentMethods auf true festlegen, werden Zahlungsmethoden mit verzögerter Benachrichtigung wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das PaymentSheet abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist.

Der Kunde/Die Kundin verlässt ggf. Ihre App, um sich zu authentifizieren (z. B. in Safari oder einer Banking-App). Damit sie nach der Authentifizierung automatisch zu Ihrer App zurückkehren können, konfigurieren Sie ein benutzerdefiniertes URL-Schema und richten Sie Ihren App-Delegate so ein, dass die URL an das SDK weitergeleitet wird. Stripe unterstützt keine universellen Links.

// This method handles opening custom URL schemes (for example, "your-app://stripe-redirect")
func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
    guard let url = URLContexts.first?.url else {
        return
    }
    let stripeHandled = StripeAPI.handleURLCallback(with: url)
    if (!stripeHandled) {
        // This was not a Stripe url – handle the URL normally as you would
    }
}

Legen Sie zusätzlich die returnURL in Ihrem PaymentSheet.Configuration-Objekt auf die URL für Ihre App fest.

var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"

Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Neben der Abwicklung des payment_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.