Kartenzahlungen ohne Webhooks akzeptieren

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

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

Führen Sie Ihre App aus und stellen Sie sicher, dass auf der Checkout-Seite die Komponente CardField angezeigt wird.

Wenn Ihre Kundin/Ihr Kunde bereit ist, den Bestellvorgang abzuschließen, erstellen Sie eine PaymentMethod mit den von der CardField-Komponente erfassten Angaben.

import { CardField, useStripe } from '@stripe/stripe-react-native';
function PaymentScreen() {
  const { createPaymentMethod, handleNextAction } = useStripe();
  const pay = () => {
    // Gather customer billing information (for example, email)
    const billingDetails: CreatePaymentMethod.BillingDetails = {
      email: 'email@stripe.com',
      phone: '+48888000888',
      addressCity: 'Houston',
      addressCountry: 'US',
      addressLine1: '1459  Circle Drive',
      addressLine2: 'Texas',
      addressPostalCode: '77063',
    };
    // Create payment method
    const { paymentMethod, error } = await createPaymentMethod({
      paymentMethodType: 'Card',
      paymentMethodData: {
        billingDetails,
      }
    });
  };
  // ...
}

Wenn die PaymentMethod erfolgreich erstellt wurde, übermitteln Sie ihre ID an Ihren Server.

// ...
const pay = () => {
  // ...
  // Send the PaymentMethod to your server to create a PaymentIntent
  const response = await fetch(`/pay`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ paymentMethodId: paymentMethod.id }),
  });
  const { error, requires_action, payment_intent_client_secret } = await response.json();
  if (error) {
    // Error creating or confirming PaymentIntent
    Alert.alert('Error', paymentIntentError);
    return;
  }
  if (payment_intent_client_secret && !requires_action) {
    // Payment succeeded
    Alert.alert('Success', 'The payment was confirmed successfully!');
  }
  if (payment_intent_client_secret && requires_action) {
    // ...continued below
  }
};
// ...

Richten Sie auf Ihrem Server einen Endpoint für den Empfang der Anfrage ein. Dieser Endpoint wird auch später verwendet, um Karten zu verarbeiten, die einen zusätzlichen Authentifizierungsschritt erfordern.

Erstellen Sie einen neuen PaymentIntent mit der ID der auf Ihrem Client erstellten PaymentMethod. Sie können den PaymentIntent bestätigen, indem Sie die Eigenschaft Bestätigen auf „true“ festlegen, wenn der PaymentIntent erstellt wird oder indem Sie nach der Erstellung Bestätigen aufrufen. Die separate Autorisierung und Erfassung wird für Kartenzahlungen ebenfalls unterstützt.

Wenn für die Zahlung weitere Aktionen wie 3D Secure-Authentifizierung erforderlich sind, wird der Status des PaymentIntent auf requires_action gesetzt. Wenn die Zahlung fehlschlägt, wird der Status wieder auf requires_payment_method gesetzt und Sie sollten dem/der Nutzer/in eine Fehlermeldung anzeigen. Wenn für die Zahlung keine zusätzliche Authentifizierung erforderlich ist, wird eine Abbuchung erstellt und der Status des PaymentIntent wird auf succeeded gesetzt.

curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -d "payment_method"="{{PAYMENT_METHOD_ID}}" \
  -d "amount"=1099 \
  -d "currency"="usd" \
  -d "confirmation_method"="manual" \
  -d "confirm"="true"

Wenn Sie die Karte für die spätere Wiederverwendung speichern möchten, erstellen Sie ein Customer-Objekt, um die PaymentMethod zu speichern, und übergeben Sie beim Erstellen der PaymentIntent die folgenden zusätzlichen Parameter:

• customer. Legen Sie die Eigenschaft auf die ID des/der Kunden/Kundin fest.
• setup_future_usage. Legen Sie die Eigenschaft auf off_session fest, damit Stripe darüber informiert wird, dass Sie diese PaymentMethod für Off-Session-Zahlungen wiederverwenden möchten, wenn die Kundin/der Kunde nicht anwesend ist. Wenn Sie diese Eigenschaft festlegen, wird die PaymentMethod nach der Bestätigung des PaymentIntent und nach Durchführung aller erforderlichen Aktionen der Nutzerin/des Nutzers für die Kundin/den Kunden gespeichert. Mehr dazu finden Sie im Code-Beispiel unter Karten nach einer Zahlung speichern.

In der Regel werden Zahlungen erfolgreich durchgeführt, nachdem Sie sie in Schritt 4 auf dem Server bestätigt haben. Einige Zahlungsabläufe erfordern jedoch zusätzliche Schritte vom Kunden/von der Kundin, wie die Authentifizierung mit 3D Secure.

​​Für Fälle, in denen weitere Aktionen erforderlich sind, lautet der Status der PaymentIntent requires_action. Übergeben Sie auf dem Client das Client-Geheimnis des PaymentIntent an handleNextAction. Der native Handler zeigt eine Ansicht an und führt die Kundinnen/Kunden durch den Authentifizierungsvorgang. Nach Ausführung der erforderlichen Aktionen auf dem Client wechselt der Status des PaymentIntent zu requires_confirmation. Dieser Schritt ermöglicht es der Integration, die Bestellung synchron auf Ihrem Backend abzuwickeln und das Ergebnis des Fulfillments an Ihren Client zurückzugeben.

Senden Sie die PaymentIntent-ID an Ihr Backend und bestätigen Sie sie innerhalb einer Stunde erneut, um die Zahlung abzuschließen. Andernfalls schlägt der Zahlungsversuch fehl und wird auf requires_payment_method zurückgesetzt.

// ...
const pay = () => {
  // ...
  // If PaymentIntent requires action, call handleNextAction
  if (payment_intent_client_secret && requires_action) {
    const { error, paymentIntent } = await handleNextAction(payment_intent_client_secret);
    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
        if (
          paymentIntent.status === PaymentIntents.Status.RequiresConfirmation
        ) {
          // Confirm the PaymentIntent again on your server
          const response = await fetch(`/pay`, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ payment_intent_id: paymentIntent.id }),
          });
          const { error, success } = await response.json();
          if (error) {
            // Error during confirming Intent
            Alert.alert('Error', error);
          } else if (success) {
            Alert.alert('Success', 'The payment was confirmed successfully!');
          }
        } else {
          // Payment succedeed
          Alert.alert('Success', 'The payment was confirmed successfully!');
        }
      }
  }
};
// ...

Dieser Code wird nur ausgeführt, wenn für eine Zahlung – wie bei der Vorgehensweise im vorherigen Schritt – eine zusätzliche Authentifizierung erforderlich ist. Der Code selbst ist nicht optional, da jede Zahlung diesen zusätzlichen Schritt erfordern kann.

Bestätigen Sie den PaymentIntent erneut mit demselben Endpoint, den Sie zuvor eingerichtet haben, um die Zahlung abzuschließen und die Bestellung abzuwickeln. Stellen Sie sicher, dass diese Bestätigung innerhalb einer Stunde nach dem Zahlungsversuch erfolgt. Andernfalls schlägt die Zahlung fehl und der Status wird auf requires_payment_method zurückgesetzt.

curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

​​Ihnen stehen mehrere Testkarten zur Verwendung in einer Sandbox zur Verfügung, um sicherzustellen, dass diese Integration bereit ist. Sie können sie mit einer beliebigen Prüfziffer/CVC und einem Ablaufdatum in der Zukunft verwenden.

Eine vollständige Liste der Testkarten finden Sie in unserem Leitfaden zum Testbetrieb.