Künftige SEPA-Lastschriftzahlungen mit iDEAL einrichten

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 Kund/innen, wenn diese ein Konto bei Ihrem Unternehmen anlegen, und verknüpfen Sie sie mit Ihrer internen Darstellung ihres Kontos. So können Sie zu einem späteren Zeitpunkt die gespeicherten Details zur Zahlungsmethode abrufen und verwenden.

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

Erstellen Sie einen SetupIntent mit der Kunden-ID und legen Sie payment_method_types auf ideal fest. Der SetupIntent verfolgt die Schritte des Einrichtungsvorgangs. Bei iDEAL beinhaltet dies das Erfassen eines SEPA-Lastschriftmandats von den Kundinnen/Kunden und die Nachverfolgung seiner Gültigkeit.

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

Erfassen Sie in Ihrer App den vollständigen Namen, die E-Mail-Adresse und den Namen ihrer Bank Ihrer Kundinnen/Kunden (zum Beispiel abn_amro).

export default function IdealPaymentScreen() {
  const [name, setName] = useState();
  const [bankName, setBankName] = useState();
  const [email, setEmai] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Email"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
      <TextInput
        placeholder="Bank name"
        onChange={(value) => setBankName(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Wenn Sie Zahlungen per SEPA-Lastschrift abwickeln möchten, müssen Ihre Kund/innen dem Lastschriftmandat zustimmen. 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.

Rufen Sie das Client-Geheimnis von der erstellten SetupIntent ab und rufen Sie confirmSetupIntent auf. Dies entspricht einer Webansicht, in der die Kund/innen die Einrichtung auf der Website oder in der App der Bank durchführen können. Anschließend wird das Promise mit dem Ergebnis der SetupIntent aufgelöst.

export default function IdealPaymentScreen() {
  const [name, setName] = useState();
  const [bankName, setBankName] = useState();
  const [email, setEmai] = useState();

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

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

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

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

Wenn Sie das Konto Ihrer Kundin/Ihres Kunden erneut belasten müssen, erstellen Sie einen neuen PaymentIntent. Suchen Sie nach der ID der SEPA-Lastschrift-Zahlungsmethode, indem Sie den SetupIntent abrufen und das Feld latest_attempt erweitern, in dem Sie die ID generated_sepa_debit im Innern von payment_method_details finden.

curl -G https://api.stripe.com/v1/setup_intents/{{SETUP_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "expand[]"=latest_attempt

Erstellen Sie eine PaymentIntent mit der SEPA-Lastschrift und Kunden-IDs.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}} \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

Bestätigen Sie den SetupIntent mit Ihren Test-API-Schlüsseln. Nach der Bestätigung werden Sie an eine Testseite mit Optionen zur Autorisierung oder Ablehnung der Einrichtung der Zahlungsmethode weitergeleitet.

• Klicken Sie auf Authorize test payment (Testzahlung autorisieren), um den Fall zu testen, wenn die Einrichtung erfolgreich durchgeführt wird. Die SetupIntent wechselt von requires_action zu succeeded.
• Klicken Sie auf Fail test payment (Testzahlung ablehnen), um den Fall zu testen, wenn der/die Kund/in nicht authentifiziert werden kann. Die SetupIntent wechselt von requires_action zu requires_payment_method.

Ihre Integration von SEPA-Lastschrift testen