Erfassen Sie ein Konto, um datengestützte Produkte zu entwickeln

Serverseitig

Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie unsere 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:

• Navigieren Sie für iOS zum Verzeichnis ios und führen Sie pod install aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Abhängigkeiten installieren.
• 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>
  );
}

Erstellen Sie ein Kundenobjekt, wenn Nutzer/innen ein Konto bei Ihrem Unternehmen erstellen. Durch die Angabe einer E-Mail-Adresse kann Financial Connections den Authentifizierungsablau optimieren, indem es dynamisch eine optimierte Benutzeroberfläche für wiederkehrende Link-Nutzer/innen anzeigt.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d email={{CUSTOMER_EMAIL}} \
  -d name={{CUSTOMER_NAME}}

Bevor Sie mit Financial Connections Daten vom Bankkonto eines Nutzers/einer Nutzerin abrufen können, muss Ihr/e Nutzer/in sein/ihr Konto über den Authentifizierungsvorgang authentifizieren.

Der/die Nutzer/in beginnt mit dem Authentifizierungsvorgang, wenn er/sie sein/ihr Konto mit Ihrer Website oder Anwendung verbinden möchte. Fügen Sie auf Ihrer Website oder in Ihrer Anwendung eine Schaltfläche oder einen Link ein, über den ein/e Nutzer/in seine/ihre Konten verknüpfen kann – zum Beispiel “Bankkonto verknüpfen”.

Erstellen Sie eine Financial Connections-Sitzung, indem Sie sie unter /v1/financial_connections/sessions angeben:

curl https://api.stripe.com/v1/financial_connections/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "account_holder[type]"=customer \
  -d "account_holder[customer]"=
{{CUSTOMER_ID}} \
  -d "permissions[]"=balances \
  -d "permissions[]"=ownership \
  -d "permissions[]"=payment_method \
  -d "permissions[]"=transactions

1. Legen Sie account_holder[customer] auf die Kunden-id fest.
2. Legen Sie den Parameter Daten-permissions so fest, dass er die für Ihren Use case erforderlichen Daten enthält.
3. (Optional) Legen Sie den Parameter prefetch zum Abrufen der Daten bei der Kontoerstellung fest.

Der Parameter Berechtigungen steuert, auf welche Kontodaten Sie zugreifen können. Sie müssen mindestens eine Berechtigung anfordern. Wenn Sie den Authentifizierungsablauf abschließen, können Ihre Nutzer/innen die Daten sehen, auf die Sie Zugriff beantragt haben, und ihre Zustimmung zur Weitergabe erteilen.

Überlegen Sie sorgfältig, welche Daten Sie für Ihren Use Case benötigen und fordern Sie die Berechtigung zum Zugriff nur für die von Ihnen benötigten Daten an. Wenn Sie Berechtigungen anfordern, die über den Umfang Ihrer Anwendung hinausgehen, ist es möglich, dass Nutzer/innen Ihnen nicht mehr volles Vertrauen schenken, da sie sich fragen, wie ihre Daten verwendet werden. Wenn Sie zum Beispiel eine Anwendung für die persönliche Finanzverwaltung oder ein Kreditprodukt entwickeln, möchten Sie möglicherweise die transactions-Daten anfordern. Zur Eindämmung von Betrug fordern Sie möglicherweise Details zur ownership an.

Nachdem Ihre Nutzer/innen ihr Konto authentifiziert haben, können Sie Datenberechtigungen nur erweitern, indem Sie eine neue Financial Connections-Sitzung erstellen und einen neuen Wert im Parameter permissions angeben. Ihr/e Nutzer/in muss das Authentifizierungsverfahren erneut durchführen, wobei er/sie die zusätzlichen Daten sieht, für die Sie die Zugriffsberechtigung angefordert haben, und seine/ihre Zustimmung zum Teilen der Daten erteilt.

Der optionale Prefetch-Parameter steuert, welche Daten Sie unmittelbar nach der Verbindung des Nutzers/der Nutzerin mit seinem/ihren Konto abrufen. Verwenden Sie diese Option, wenn Sie wissen, dass Sie immer eine bestimmte Art von Daten wünschen. So entfällt die Notwendigkeit, einen zusätzlichen API-Aufruf durchzuführen, um eine Datenaktualisierung zu initiieren.

Um die Option zum Annahme von ACH Direct Debit beizubehalten, fordern Sie die Berechtigung payment_method an.

Importieren Sie die Funktion collectFinancialConnectionsAccounts aus dem React Native SDK von Stripe.

import {collectFinancialConnectionsAccounts} from '@stripe/stripe-react-native';

Verwenden Sie collectFinancialConnectionsAccounts, um das Bankkonto zu erfassen, indem Sie das client_secret von oben übergeben, und das Ergebnis dann folgendermaßen behandeln:

// Assume you have a <Button /> to collect payout accounts, whose onPress is handleCollectPress
const handleCollectPress = async () => {
  // Fetch the clientSecret you created above and pass it to collectFinancialConnectionsAccounts
  const {session, error} = await collectFinancialConnectionsAccounts(
    clientSecret,
  );

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else {
    Alert.alert('Success');
    console.log(
      'Successfully obtained session: ',
      JSON.stringify(session, null, 2),
    );
  }
};

collectFinancialConnectionsAccounts gibt ein Promise zurück. Wenn Nutzer/innen den Modal-Flow abschließen, wird Promise mit einem der folgenden Punkte aufgelöst:

• Eine session, die die abgeschlossene Financial Connections-Sitzung darstellt, wenn die Nutzer/innen ihr Konto erfolgreich verknüpfen können. Diese session enthält das Array accounts, das die Liste der verbundenen Konten enthält.
• Es wird error ausgegeben, wenn die Sitzung fehlschlägt oder abgebrochen wird.

Standardmäßig können Ihre verbundenen Konten im Authentifizierungsablauf nur Kontotypen wie Giro- oder Sparkonten hinzufügen, da Stripe nur Auszahlungen an ein ACH-fähiges Konto ermöglichen kann.

When a customer exits your app (for example to authenticate in Safari or their banking app), provide a way for them to automatically return to your app. Many payment method types require a return URL. If you don’t provide one, we can’t present payment methods that require a return URL to your users, even if you’ve enabled them.

So geben Sie eine Rückgabe-URL an:

1. Registrieren Sie eine benutzerdefinierte URL. Universelle Links werden nicht unterstützt.
2. Konfigurieren Sie Ihre benutzerdefinierte URL.
3. Richten Sie Ihre Root-Komponente so ein, dass sie die URL an das Stripe SDK weitergibt, wie unten gezeigt.

import { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

Weitere Informationen zu nativen URL-Schemen finden Sie in der Dokumentation für Android und iOS.

Nachdem Ihr/e Nutzer/in das Authentifizierungsverfahren erfolgreich abgeschlossen hat, greifen Sie auf die Kontodaten zu, die Sie im Parameter permissions der Financial Connections-Sitzung angegeben haben, oder aktualisieren Sie diese.

Um die Privatsphäre der Daten Ihrer Nutzer/innen zu schützen, sind die für Sie zugänglichen Kontodaten auf die Daten beschränkt, die Sie im Parameter permissions angegeben haben.

Beachten Sie die Leitfäden für Salden, Inhaberschaft und Transaktionen, um mit dem Abrufen von Kontodaten zu beginnen.