Zukünftige Kartenzahlungen einrichten

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 { 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 eine Karte für zukünftige Zahlungen einzurichten, müssen Sie sie einem/einer Kund/in hinzufügen. Erstellen Sie ein Customer-Objekt, wenn Ihr/e Kund/in ein Konto bei Ihrem Unternehmen erstellt. Customer-Objekte ermöglichen die Wiederverwendung von Zahlungsmethoden und die Nachverfolgung über mehrere Zahlungen hinweg.

curl https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

Bei erfolgreicher Erstellung wird das Kundenobjekt zurückgegeben. Sie können das Objekt bezüglich der Kunden-id überprüfen and den Wert zum späteren Abruf in Ihrer Datenbank speichern.

Sie finden diese Kundinnen/Kunden auf der Seite Kundinnen/Kunden im Dashboard.

Ein SetupIntent ist ein Objekt, mit dem Sie eine Zahlungsmethode für zukünftige Zahlungen einrichten können. Das SetupIntent-Objekt enthält ein Client-Geheimnis, also einen eindeutigen Schlüssel, den Sie an Ihre App übergeben können.

Mit dem Client-Geheimnis können Sie bestimmte Aktionen auf dem Client durchführen (z. B. die Einrichtung bestätigen und Details zur Zahlungsmethode ändern) und dabei gleichzeitig sensible Informationen wie customer verbergen. Außerdem können Sie mit dem Client-Geheimnis Kartenangaben bei den Kreditkartennetzwerken validieren und authentifizieren. Das Client-Geheimnis ist vertraulich – protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nicht an andere Personen als die Kund/innen weiter.

Serverseitig

Erstellen Sie auf Ihrem Server einen Endpoint, der einen SetupIntent erstellt und dessen Client-Geheimnis an Ihre App zurückgibt.

curl https://api.stripe.com/v1/setup_intents/ \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d "customer"="{{CUSTOMER_ID}}"

If you only plan on using the card for future payments when your customer is present during the checkout flow, set the usage parameter to on_session to improve authorization rates.

Erfassen Sie Kartendaten mit CardField, einer vom SDK bereitgestellten Nutzeroberflächenkomponente, die Kartennummer, Ablaufdatum, Prüfziffer und Postleitzahl erfasst, sicher auf dem Client.

Fügen Sie Ihrem Zahlungsbildschirm die Komponente CardField hinzu, um die Kartendaten Ihrer Kund/innen sicher zu erfassen. Verwenden Sie den Rückruf onCardChange, um nicht vertrauliche Informationen, wie die Marke der Karte und die Vollständigkeit der Angaben, zu prüfen.

import { CardField, useStripe } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={true}
        placeholders={{
          number: '4242 4242 4242 4242',
        }}
        cardStyle={{
          backgroundColor: '#FFFFFF',
          textColor: '#000000',
        }}
        style={{
          width: '100%',
          height: 50,
          marginVertical: 30,
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
        onFocus={(focusedField) => {
          console.log('focusField', focusedField);
        }}
      />
    </View>
  );
}

Zum Abschließen der Einrichtung übergeben Sie die Kundenkarte und die Abrechnungsinformationen an confirmSetupIntent. Sie können diese Methode entweder mit useConfirmSetupIntent oder useStripe aufrufen.

function PaymentScreen() {
  // ...

  const { confirmSetupIntent, loading } = useConfirmSetupIntent();

  // ...

  const handlePayPress = async () => {
    // Gather the customer's billing information (for example, email)
    const billingDetails: BillingDetails = {
      email: 'jenny.rosen@example.com',
    };
    // Create a setup intent on the backend
    const clientSecret = await createSetupIntentOnBackend();
    const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails,
      }
    });

    if (error) {
      //Handle the error
    }
    // ...
  };

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

Bei manchen Zahlungsmethoden sind für den Abschluss der Zahlung zusätzliche Authentifizierungsschritte erforderlich. Der Ablauf der Zahlungsbestätigung und Authentifizierung wird vom SDK verwaltet, was die Einblendung zusätzlicher Authentifizierungsmasken beinhalten kann. Verwenden Sie die Testkarte 4000 0025 0000 3155 mit einer beliebigen Prüfziffer (CVC) und Postleitzahl und einem beliebigen Ablaufdatum, um den Authentifizierungsprozess zu testen.

Wenn der SetupIntent erfolgreich war, wird die sich daraus ergebene PaymentMethod-ID (in setupIntent.paymentMethodID) im bereitgestellten Customer gespeichert.

Wenn Sie eine Off-Session-Belastung eines Kundenkontos vornehmen möchten, erstellen Sie anhand der Kunden-ID und der PaymentMethod-ID einen PaymentIntent. Um eine belastbare Karte zu finden, lassen Sie sich die mit Ihren Kundinnen/Kunden verknüpften PaymentMethods auflisten auflisten.

curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d customer=
{{CUSTOMER_ID}} \
  -d type=card

Wenn Ihnen die Kunden-ID und die PaymentMethod-ID vorliegen, erstellen Sie eine PaymentIntent mit dem Betrag und der Währung der Zahlung. Legen Sie einige weitere Parameter fest, um die Off-Session-Zahlung durchzuführen:

• Setzen Sie off_session auf true, um anzugeben, dass sich der Kunde/die Kundin während dieses Zahlungsversuchs nicht in Ihrem Bezahlvorgang befindet. Dies hat zur Folge, dass der PaymentIntent einen Fehler ausgibt, wenn eine Authentifizierung erforderlich ist.
• Legen Sie den Wert der Eigenschaft confirm des PaymentIntent auf true fest. Dadurch erfolgt die Bestätigung sofort, wenn der PaymentIntent erstellt wird.
• Setzen Sie payment_method auf die ID der PaymentMethod und Kunde/Kundin auf die ID des Kunden/der Kundin.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_4eC39HqLyjWDarjtT1zdp7dc
: \
  -d amount=1099 \
  -d currency=usd \
  -d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d off_session=true \
  -d confirm=true

Wiederherstellungsablauf starten

Falls der PaymentIntent einen anderen Status hat, wurde die Zahlung nicht erfolgreich durchgeführt, und die Anfrage schlägt fehl. Bitten Sie Ihre Kund/innen, zu Ihrer Anwendung zurückzukehren (zum Beispiel per E-Mail, Textnachricht, Push-Benachrichtigung), um die Zahlung abzuschließen. Wir empfehlen, in Ihrer App einen Wiederherstellungsablauf zu erstellen, der zeigt, warum die Zahlung zuerst nicht durchgeführt werden konnte, und Ihre Kund/innen einen erneuten Versuch unternehmen lässt.

Rufen Sie in Ihrem Wiederherstellungsablauf den PaymentIntent über dessen Client-Geheimnis ab. Überprüfen Sie den lastPaymentError des PaymentIntent, um zu erfahren, warum der Zahlungsversuch fehlgeschlagen ist. Bei Kartenfehlern können Sie dem Nutzer/der Nutzerin die Fehlermeldung zum letzten Zahlungsfehler anzeigen. Alternativ können Sie eine allgemeine Fehlermeldung anzeigen.

function PaymentScreen() {
  // ...

  const {retrievePaymentIntent} = useStripe();

  // ...

  const handleRecoveryFlow = async () => {
    const {paymentIntent, error} = await retrievePaymentIntent(clientSecret);

    if (error) {
      Alert.alert(`Error: ${error.code}`, error.message);
    } else if (paymentIntent) {
      // Default to a generic error message
      const failureReason = 'Payment failed, try again.';
      if (paymentIntent.lastPaymentError.type === 'Card') {
        failureReason = paymentIntent.lastPaymentError.message;
      }
    }
  };

  return (
    <View>
      // ...
      <Button
        onPress={handleRecoveryFlow}
        title="Recovery flow"
        loading={loading}
      />
    </View>
  );
}

Kundin/Kunden erneut versuchen lassen

Geben Sie Kundinnen und Kunden die Möglichkeit, ihre gespeicherten Karten zu aktualisieren oder zu entfernen. Führen Sie dann die Zahlung in Ihrem Wiederherstellungsverfahren erneut durch. Gehen Sie dabei genauso vor wie bei der Annahme der ersten Zahlung, mit einem Unterschied: Bestätigen Sie den ursprünglichen fehlgeschlagenen PaymentIntent, indem Sie das Client-Geheimnis wiederverwenden, statt ein neues zu erstellen.

Wenn die Zahlung fehlgeschlagen ist, weil eine Authentifizierung erforderlich war, versuchen Sie es erneut mit der vorhandenen PaymentMethod, statt eine neue zu erstellen.

function PaymentScreen() {
  // ...

  const {retrievePaymentIntent} = useStripe();

  // ...

  const handleRecoveryFlow = async () => {
    const {paymentIntent, error} = await retrievePaymentIntent(clientSecret);

    if (error) {
      Alert.alert(`Error: ${error.code}`, error.message);
    } else if (paymentIntent) {
      // Default to a generic error message
      let failureReason = 'Payment failed, try again.';
      if (paymentIntent.lastPaymentError.type === 'Card') {
        failureReason = paymentIntent.lastPaymentError.message;
      }

      // If the last payment error is authentication_required, let the customer
      // complete the payment without asking them to reenter their details.
      if (paymentIntent.lastPaymentError?.code === 'authentication_required') {
        // Let the customer complete the payment with the existing PaymentMethod
        const {error} = await confirmPayment(paymentIntent.clientSecret, {
          paymentMethodType: 'Card',
          paymentMethodData: {
            billingDetails,
            paymentMethodId: paymentIntent.lastPaymentError?.paymentMethod.id,
          },
        });

        if (error) {
          // handle error
        }
      } else {
        // Collect a new PaymentMethod from the customer
      }
    }
  };

  return (
    <View>
      // ...
      <Button
        onPress={handleRecoveryFlow}
        title="Recovery flow"
        loading={loading}
      />
    </View>
  );
}

An diesem Punkt sollten Sie über eine Integration verfügen, für die Folgendes gilt:

1. Kartenangaben werden mit einem SetupIntent erfasst und gespeichert, ohne die Karte des/der Kund/in zu belastet.
2. Off-Session-Belastung von Karten wird durchgeführt, und Ablehnungen und Authentifizierungsanfragen werden über einen Wiederherstellungsablauf abgewickelt.

Sie können mehrere Testkarten einsetzen, um sicherzustellen, dass diese Integration bereit für den Einsatz in einer Produktionsumgebung ist. Die Karten können Sie mit beliebigen CVCs, Postleitzahlen und zukünftigem Ablaufdatum verwenden.

Siehe dazu die vollständige Liste der Testkarten.