Cash App Pay-Zahlungen

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:

• Für iOS wechseln Sie in das Verzeichnis ios und führen Sie pod install aus, um sicherzustellen, dass Sie auch die erforderlichen nativen Dependencies installiert haben.
• 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 die Währung an.
• Fügen Sie cashapp zur Liste der Zahlungsmethoden für Ihren PaymentIntent hinzu. Vergewissern Sie sich, dass Cash App Pay im Dashboard aktiviert ist.

curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=6000 \
  -d currency=usd \
  -d "payment_method_types[]"=cashapp \
  --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: 'usd',
      }),
    });
    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 Kundinnen/Kunden die Zahlung mit CashApp auswählen, führen Sie die Zahlung durch Aufrufen von confirmPayment durch. Dies entspricht einer Webansicht, über die die Kundinnen/Kunden die Zahlung per CashApp 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: 'CashApp',
    });

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

Testen Sie Ihre Cash App Pay-Integration mit Ihren Test-API-Schlüsseln, indem Sie die Weiterleitungsseite anzeigen. Sie können die erfolgreiche Zahlung testen, indem Sie die Zahlung auf der Weiterleitungsseite authentifizieren. Der PaymentIntent wechselt von requires_action zu succeeded.

Um den Fall zu testen, in dem sich Nutzer/innen nicht authentifizieren können, verwenden Sie Ihre Test-API-Schlüssel und zeigen Sie die Weiterleitungsseite an. Klicken Sie auf der Weiterleitungsseite auf Fail test payment (Testzahlung fehlschlagen lassen). Der PaymentIntent wechselt von requires_action zu requires_payment_method.

Bei der manuellen Testerfassung von PaymentIntents läuft der nicht erfasste PaymentIntent 60 Minuten nach erfolgreicher Autorisierung automatisch ab.

Wenn Sie im Live-Modus den PaymentIntent bestätigen, werden Sie zur Cash App weitergeleitet. Als Best Practice wird empfohlen, ein echtes Cash App-Konto im Live-Modus zu testen, bevor Sie es für Ihre Kundinnen/Kunden freigeben. Im Live-Modus haben Sie nicht die Möglichkeit, die Zahlung in der Cash App zu genehmigen oder abzulehnen. Sie wird automatisch genehmigt, nachdem Ihre Kundinnen/Kunden zur Cash App weitergeleitet wurden.