Swish-ZahlungenNur auf Einladung

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 diese 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, repräsentiert und den gesamten Zahlungsvorgang dokumentiert.

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

• Geben Sie den einzuziehenden Betrag und die Währung an.
• Fügen Sie swish zur Liste der Zahlungsmethoden für Ihren PaymentIntent hinzu. Vergewissern Sie sich, dass Swish im Dashboard aktiviert ist.

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

Der zurückgegebene PaymentIntent enthält ein Client-Geheimnis, das Sie verwenden werden, um den PaymentIntent zu bestätigen. Übermitteln Sie das Client-Geheimnis zurück an den Client, damit Sie es im nächsten Schritt verwenden können.

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: 'sek',
      }),
    });
    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 Kundinnen/Kunden die Zahlung mit Swish auswählen, führen Sie die Zahlung durch Aufrufen von confirmPayment durch. Dies entspricht einer Webansicht, über die die Kundinnen/Kunden die Zahlung per Swish abschließen können. Nach Abschluss 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: 'Swish',
    });

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