Daten zu BECS-Lastschriftverfahren in Australien für zukünftige Zahlungen 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 BECS-Lastschriftkonto für zukünftige Zahlungen zu verwenden, müssen Sie es einem Customer-Objekt zuordnen.

Erstellen Sie ein Customer-Objekt, 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
:"

Mit der im SDK enthaltenen Drop-in-Nutzeroberflächenkomponente AuBECSDebitForm können Sie Zahlungsdaten zum BECD-Lastschriftverfahren in Australien sicher erfassen. AuBECSDebitForm stellt eine Nutzeroberfläche bereit, in der die Kundinnen/Kunden ihren Namen, ihre E-Mail-Adresse, die BSB-Nummer und die Kontonnummer eingeben können. Außerdem werden die Bedingungen des BECS-Lastschriftverfahrens in Australien angezeigt.

Fügen Sie die Komponente AuBECSDebitForm samt ihrem Firmennamen in die Benutzeroberfläche ein. Mit der Eigenschaft formStyle können Sie AuBECSDebitForm individuell an das Erscheinungsbild Ihrer Anwendung anpassen. Formulardetails erfassen Sie mit der Eigenschaft onComplete.

function BECSSetupFuturePaymentScreen() {
  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  return (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Serverseitig

Ein SetupIntent ist ein Objekt, das Ihre Absicht darstellt, die Zahlungsmethode einer Kundin/eines Kunden für zukünftige Zahlungen einzurichten. Mit dem SetupIntent werden die Schritte dieses Einrichtungsprozesses verfolgt. Für BECS-Lastschriftverfahren beinhaltet dies das Erfassen eines Mandats von der Kundin/dem Kunden und die Überprüfung der Gültigkeit während der Laufzeit des Mandats.

Erstellen Sie einen SetupIntent auf Ihrem Server, wobei die payment_method_types auf au_becs_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[]"="au_becs_debit" \
  -d "customer"="{{CUSTOMER_ID}}"

Nach Erstellen eines SetupIntent auf Ihrem Server können Sie die SetupIntent-ID im Datenmodell Ihrer Anwendung mit dem Kunden/der Kundin der aktuellen Sitzung verknüpfen. Dadurch können Sie nach erfolgreichem Einholen einer Zahlungsmethode die Informationen abrufen.

Das zurückgegebene SetupIntent-Objekt enthält die Eigenschaft client_secret. Übergeben Sie das Client-Geheimnis an die Anwendung auf Client-Seite, um mit der Einrichtung fortzufahren.

Clientseitig

Fordern Sie auf dem Client eine SetupIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis.

const fetchSetupIntentClientSecret = async (customerEmail: string) => {
  const response = await fetch(`${API_URL}/create-setup-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: customerEmail,
      payment_method_types: ['au_becs_debit'],
    }),
  });
  const {clientSecret, error} = await response.json();

  return {clientSecret, error};
};

Rufen Sie das Client-Geheimnis von der erstellten SetupIntent ab und rufen Sie confirmSetupIntent auf. Dadurch wird eine Webansicht angezeigt, in der die Kund/innen die Einrichtung auf der Website oder in der App der Bank durchführen können.

function BECSSetupFuturePaymentScreen() {
  const { confirmSetupIntent } = useConfirmSetupIntent();

  const [formDetails, setFormDetails] = useState<
    AuBECSDebitFormComponent.FormDetails
  >();

  const handlePayPress = async () => {
    const { error, setupIntent } = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'AuBecsDebit',
      paymentMethodData: {
        formDetails,
      }
    });

    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 (
    <View>
      <AuBECSDebitForm
        onComplete={(value) => setFormDetails(value)}
        companyName="Example Company Inc."
        formStyle={{
          textColor: '#000000',
          fontSize: 22,
          placeholderColor: '#999999',
        }}
      />
      <Button title="Save" variant="primary" onPress={handlePayPress} />
    </View>
  );
}

Testen Sie Ihr Formular mit der BSB-Prüfnummer 000-000 und einer der unten aufgeführten Testkontonummern, wenn Sie confirmSetupIntent aufrufen.