Zahlungen mit MobilePay

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Serverseitig

Für diese Integration sind Endpoints auf Ihrem Server erforderlich, die mit der Stripe API kommunizieren können. Nutzen Sie die 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:

• For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
• 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>
  );
}

Serverseitig

Ein PaymentIntent ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

So erstellen und bestätigen Sie einen PaymentIntent auf Ihrem Server:

• Geben Sie den einzuziehenden Betrag und eine unterstützte Währung an (eur, dkk, sek, or nok).
• Fügen Sie mobilepay zur Liste der Zahlungsmethodentypen hinzu. Vergewissern Sie sich, dass Sie MobilePay im Dashboard aktiviert haben.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=dkk \
  -d "payment_method_types[]"=mobilepay \
  --data-urlencode return_url="payments-example://stripe-redirect"

Der PaymentIntent enthält ein Client-Geheimnis. Senden Sie das Client-Geheimnis an den Client, um im nächsten Schritt den PaymentIntent zu bestätigen.

Clientseitig

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

function PaymentScreen() {
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        currency: 'dkk',
      }),
    });
    const {clientSecret} = await response.json();

    return clientSecret;
  };

  const handlePayPress = async () => {
    // See below
  };

  return (
    <View>
      <Button onPress={handlePayPress} title="Pay" />
    </View>
  );
}

Das Client-Geheimnis unterscheidet sich von Ihren API-Schlüsseln, die die Stripe API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlungen abgeschlossen werden können. Es darf nicht protokolliert, in URLs eingebettet oder anderen Personen zugänglich gemacht werden.

Wenn Kundinnen/Kunden Ihre App verlassen (zum Beispiel um sich in Safari oder ihrer Banking-App zu authentifizieren), bieten Sie ihnen eine Möglichkeit, automatisch zu Ihrer App zurückzukehren. Für viele Arten von Zahlungsmethoden ist eine Rückgabe-URL erforderlich. Wenn Sie keine angeben, können wir Ihren Nutzer/innen keine Zahlungsmethoden anbieten, für die eine Rückgabe-URL erforderlich ist, selbst wenn Sie diese aktiviert haben.

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.

Wenn der Kunde/die Kundin die Zahlung mit MobilePay auswählt, führen Sie die Zahlung durch Aufrufen von confirmPayment durch. Dies entspricht einer Webansicht, in der die Kundinnen/Kunden die Zahlung in der MobilePay-Anwendung autorisieren können. Nachdem der Kunde/die Kundin die Zahlung autorisiert hat, wird das Promise entweder mit einem Objekt mit paymentIntent-Feld aufgelöst oder mit einem error-Feld, wenn bei der Zahlung ein Fehler aufgetreten ist.

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

function PaymentScreen() {
  const {confirmPayment, loading} = useConfirmPayment();

  const fetchPaymentIntentClientSecret = async () => {
    // See above
  };

  const handlePayPress = async () => {
    // Fetch the client secret from the backend.
    const clientSecret = await fetchPaymentIntentClientSecret();

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'MobilePay',
    });

    if (error) {
      console.log('Payment confirmation error: ', error);
    } else if (paymentIntent) {
      console.log('Successfully confirmed payment: ', paymentIntent);
    }
  };

  return (
    <View>
      <Button onPress={handlePayPress} title="Pay" disabled={loading} />
    </View>
  );
}

Ihr Kunde/Ihre Kundin hat 5 Minuten Zeit, die Zahlung in der App zu autorisieren. Wenn die zugrunde liegende Kartenzahlung fehlschlägt, kann kundenseitig eine andere Karte ausgewählt und es in der MobilePay-App erneut versucht werden.

Stripe übermittelt ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen Webhook oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den Unterschieden zwischen allen unterstützten Zahlungsmethoden.

Manuell

Im Stripe-Dashboard können Sie alle Stripe-Zahlungen anzeigen, Zahlungsbelege per E-Mail versenden, Auszahlungen abwickeln oder fehlgeschlagene Zahlungen erneut durchführen.

• Testzahlungen im Dashboard anzeigen

Benutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

• Nutzerdefinierten Webhook erstellen

Vorgefertigte Apps

Verarbeiten Sie häufige Geschäftsereignisse, wie Automatisierung oder Marketing und Vertrieb durch Integration einer Partneranwendung.

Erstellen Sie mit Ihren Test-API-Schlüsseln einen PaymentIntent. Nachdem Sie den PaymentIntent bestätigt haben, folgen Sie der next_action-Weiterleitungs-URL zu einer Testseite mit Optionen zur Autorisierung oder Ablehnung der Zahlung.

• Klicken Sie auf Authorize test payment, um das Szenario zu testen, bei dem die Zahlung erfolgreich ist. Der Status des PaymentIntent wechselt von requires_action zu succeeded
• Klicken Sie auf Fail test payment (Testzahlung ablehnen), um das Szenario zu testen, bei dem der/die Kund/in nicht authentifiziert werden kann. Der Status des PaymentIntent wechselt von requires_action zu requires_payment_method.