SEPA-Lastschriftzahlungen annehmen

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 React, { 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 zu verwenden, 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.

Legen Sie neue Kund/innen an oder rufen Sie bestehende Kund/innen ab, um sie mit dieser Zahlung 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
:"

Serverseitig

Ein PaymentIntent ist ein Objekt, das Ihre Absicht, Zahlungen von Kundinnen/Kunden einzuziehen, repräsentiert und den gesamten Zahlungsvorgang dokumentiert. Erstellen Sie zunächst ein PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung eur an (andere Währungen werden von SEPA-Lastschrift nicht unterstützt). Falls Sie bereits über eine Integration verfügen, die die Payment Intents API nutzt, fügen Sie der Liste der Zahlungsmethoden für Ihren PaymentIntent die Zahlungsmethode sepa_debit hinzu. Geben Sie die id des/der Kund/in an.

Um ein SEPA-Lastschriftkonto für eine erneute Verwendung zu speichern, legen Sie den Parameter setup_future_usage auf off_session fest. SEPA-Lastschrift akzeptiert für diesen Parameter nur den Wert off_session.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "amount"=1099 \
  -d "currency"="eur" \
  -d "setup_future_usage"="off_session" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "payment_method_types[]"="sepa_debit" \
  -d "metadata[integration_checker]"="sepa_debit_accept_a_payment"

Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email,
      currency: 'eur',
      payment_method_types: ['sepa_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

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 oder Bestätigen einer PaymentIntent wird das akzeptierte Mandat erstellt. Da die Kund/innen das Mandat implizit akzeptiert haben, müssen Sie diese Bedingungen in Ihrem Formular oder per E-Mail mitteilen.

export default function SepaPaymentScreen() {
  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 PaymentIntent ab und rufen Sie confirmPayment auf.

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

export default function SepaPaymentScreen() {
  const [iban, setIban] = useState('');
  const {confirmPayment, loading} = useConfirmPayment();

  const handlePayPress = async () => {
    const {
      clientSecret,
      error: clientSecretError,
    } = await fetchPaymentIntentClientSecret();

    if (clientSecretError) {
      Alert.alert(`Error`, clientSecretError);
      return;
    }

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

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

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      if (paymentIntent.status === PaymentIntents.Status.Processing) {
        Alert.alert(
          'Processing',
          `The debit has been successfully submitted and is now processing.`,
        );
      } else if (paymentIntent.status === PaymentIntents.Status.Succeeded) {
        Alert.alert(
          'Success',
          `The payment was confirmed successfully! currency: ${paymentIntent.currency}`,
        );
      } else {
        Alert.alert('Payment status:', paymentIntent.status);
      }
    }
  };

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

SEPA-Lastschrift ist eine Zahlungsmethode mit verzögerter Benachrichtigung. Das bedeutet, dass Gelder nicht sofort verfügbar sind. Wenn die Zahlung erfolgreich übermittelt wurde, wird der Status des PaymentIntent von requires_confirmation auf processing aktualisiert. Nach erfolgreicher Zahlung wird der PaymentIntent-Status von processing auf succeeded aktualisiert.

Die folgenden Ereignisse werden übermittelt, wenn der PaymentIntent-Status aktualisiert wird:

Wir empfehlen die Verwendung von Webhooks, um die erfolgreiche Abbuchung zu bestätigen und die Kundinnen/Kunden zu informieren, dass die Zahlung abgeschlossen ist.

Beachten Sie, dass die PaymentMethod dem Customer-Objekt zugeordnet wird, sobald die Zahlung den Status processing hat, da setup_future_usage und Kunde/Kundin festgelegt wurden. Diese Zuordnung erfolgt unabhängig davon, ob die Zahlung später erfolgt oder fehlschlägt.

Sie können Ihr Formular unter Verwendung der Testkontonummern für SEPA-Lastschrift mit Ihrer confirmSepaDebitPayment-Anfrage testen.