Angaben für zukünftige SEPA-Lastschriftzahlungen speichern

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>
  );
}

Um ein SEPA-Lastschriftkonto für zukünftige Zahlungen wiederzuverwenden, muss es einem Customer-Objekt zugeordnet werden.

Sie sollten ein Customer-Objekt erstellen, wenn Ihre Kund/innen ein Konto bei Ihrem Unternehmen anlegen. Wenn Sie die ID des Customer-Objekts mit Ihrer eigenen Darstellung einer Kundin/eines Kunden verknüpfen, können Sie später die gespeicherten Angaben zur Zahlungsmethode abrufen und verwenden. Wenn Ihre Kund/innen noch kein Konto erstellt haben, können Sie jetzt trotzdem ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen.

Legen Sie neue Kund/innen an oder rufen Sie bestehende Kund/innen ab, um sie mit diesen Kartendaten zu verknüpfen. Fügen Sie den folgenden Code auf Ihrem Server ein, um neue Kund/innen zu erstellen.

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

Ein SetupIntent ist ein Objekt, das Ihre Absicht darstellt, die Zahlungsmethode einer Kundin/eines Kunden für zukünftige Zahlungen einzurichten, und die dafür erforderlichen Schritte dokumentiert. Für SEPA-Lastschrift beinhaltet dies das Erfassen eines Lastschriftmandats von der Kundin/dem Kunden und die Überprüfung der Gültigkeit der IBAN.

Erstellen Sie einen SetupIntent auf Ihrem Server, wobei die payment_method_types auf sepa_debit festgelegt sind, und geben Sie die ID des Kunden/der Kundin an:

curl https://api.stripe.com/v1/setup_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method_types[]"="sepa_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

Erfassen Sie die IBAN der Kund/innen in Ihrem Zahlungsformular und zeigen Sie den folgenden Standard-Autorisierungstext an, damit Ihre Kund/innen das Mandat implizit akzeptieren.

Zeigen Sie den folgenden Standard-Autorisierungstext an, damit Ihre Kund/innen das Mandat implizit akzeptieren.

Ersetzen Sie Rocket Rides durch den Namen Ihres Unternehmens.

Beim Einrichten einer Zahlungsmethode wird das akzeptierte Mandat erstellt. Da die Kund/innen das Mandat mit der Zustimmung zu diesen Bedingungen implizit akzeptiert haben, müssen Sie diese Bedingungen in Ihrem Formular oder per E-Mail mitteilen.

export default function SepaSetupFuturePaymentScreen() {
  const [email, setEmail] = useState('');
  const [iban, setIban] = useState('');

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        keyboardType="email-address"
        onChange={(value) => setEmail(value.nativeEvent.text)}
        style={styles.input}
      />
      <TextInput
        placeholder="Iban"
        onChange={(value) => setIban(value.nativeEvent.text.toLowerCase())}
        style={styles.input}
      />
      <Button
        variant="primary"
        onPress={handlePayPress}
        title="Save IBAN"
        loading={loading}
      />
    </Screen>
  );
}

Rufen Sie das Client-Geheimnis von der erstellten SetupIntent ab und rufen Sie confirmSetupIntent auf.

Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Einrichtung abgeschlossen werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer den Kund/innen selbst zugänglich gemacht werden.

export default function SepaSetupFuturePaymentScreen() {
  const [iban, setIban] = useState('');
  const {confirmSetupIntent, loading} = useConfirmSetupIntent();

  const handlePayPress = async () => {
    const clientSecret = await createSetupIntentOnBackend(email);

    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name: 'Jenny Rosen',
      email: 'jenny.rosen@example.com',
    };

    const {error, setupIntent} = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'SepaDebit',
      paymentMethodData: {
        billingDetails,
        iban,
      }
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
      console.log('Setup intent confirmation error', error.message);
    } else if (setupIntent) {
      Alert.alert(
        `Success: Setup intent created. Intent status: ${setupIntent.status}`,
      );
    }
  };

  return <Screen>{/* ... */}</Screen>;
}

Sie können Ihr Testkonto unter Verwendung der unten aufgeführten IBANs mit Ihrer confirmSepaDebitSetup-Anfrage testen. Die Zahlungsmethodendetails werden für jede IBAN erfolgreich erfasst, weisen jedoch bei Abbuchung ein unterschiedliches Verhalten auf.

Test-IBANs