PayPal-Zahlungen 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 { 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

Stripe verwendet ein Zahlungsobjekt (als PaymentIntent bezeichnet), um sämtliche Status der Zahlung zu dokumentieren und zu verarbeiten, bis sie abgeschlossen ist. Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung an. Falls Sie bereits über eine Integration verfügen, die die Payment Intents API verwendet, fügen Sie der Liste der Zahlungsmethoden für Ihren PaymentIntent die Zahlungsmethode paypal hinzu.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=paypal

Im zurückgegebenen PaymentIntent ist ein Client-Geheimnis enthalten, das verwendet wird, um Zahlungen sicher abzuschließen, anstatt das gesamte PaymentIntent-Objekt zu übergeben. Senden Sie das Client-Geheimnis zurück an den Client, damit Sie es in späteren Schritten verwenden können.

Nutzerdefinierte Beschreibung einfügen

Standardmäßig wird in den Bestellungsdetails auf der PayPal-Aktivitätsseite der Nutzerin/des Nutzers der Bestellungsbetrag angezeigt. Sie können das ändern, indem Sie eine nutzerdefinierte Beschreibung in der Eigenschaft description angeben.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d description="A sample description" \
  -d "payment_method_types[]"=paypal

Bevorzugtes Gebietsschema anpassen

Standardmäßig wird die PayPal-Autorisierungsseite basierend auf Variablen, wie z. B. dem Land der Händlerin/des Händlers, lokalisiert. Sie können dies mithilfe der Eigenschaft preferred_locale an das bevorzugte Gebietsschema Ihrer Kundinnen/Kunden anpassen. Bei dem Wert muss es sich um einen zweistelligen Sprachcode in Kleinbuchstaben handeln, gefolgt von einem Bindestrich (-) und einem zweistelligen Ländercode in Großbuchstaben. Beispiel: Der Wert für einen/eine französischsprachige/n Nutzer/in in Belgien ist fr-BE. Siehe Unterstützte Gebietsschemata für weitere Informationen.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=paypal \
  -d "payment_method_options[paypal][preferred_locale]"=fr-BE

Zahlungsbeschreibungen bei PayPal

Die Zahlungsbeschreibung auf dem Kontoauszug des Käufers/der Käuferin wird von PayPal festgelegt und lautet standardmäßig PAYPAL *YOUR_BUSINESS_NAME. Wenn Sie das Feld statement_descriptor beim Erstellen des PaymentIntent festlegen, wird sein Wert bis zu 22 Zeichen an den von PayPal festgelegten angehängt.

Wenn Ihr Unternehmensname in PayPal beispielsweise BUSINESS lautet und Sie statement_descriptor auf order_id_1234 festlegen, sehen die Käufer/innen auf ihrem Kontoauszug die Angabe PAYPAL *BUSINESS order.

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: 'eur',
      }),
    });
    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 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 ein/e Kund/in die Zahlung mit PayPal auswählt, führen Sie durch Aufrufen von confirmPayment die Zahlung durch. Dies entspricht einer Webansicht, über die die Kund/innen die Zahlung per PayPal durchführen können. Nach Abschluss wird das Promise entweder mit einem paymentIntent-Objekt oder einem error-Objekt aufgelöst, 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: 'PayPal',
    });

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

Sie finden den Namen, die E-Mail-Adresse, die Zahler-ID und die Transaktions-ID des des Inhabers/der Inhaberin der Zahlung in der Eigenschaft payment_method_details.

{
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "paypal": {
            "payer_id": "H54KFE9XXVVYJ",
            "payer_email": "jenny@example.com",
            "payer_name": "Jenny Rosen",
            "transaction_id": "89W40396MK104212M"
          },
          "type": "paypal"
        },
        "id": "src_16xhynE8WzK49JbAs9M21jaR",
        "object": "source",
        "amount": 1099,
        "client_secret": "src_client_secret_UfwvW2WHpZ0s3QEn9g5x7waU",
        "created": 1445277809,
        "currency": "eur",
        "flow": "redirect",