Eine Klarna-Zahlung 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:

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

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden Ihre Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Serverseitig

Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden Betrag sowie eine unterstützte Währung an. Wenn Sie bereits eine Integration mit der Payment Intents API haben, fügen Sie klarna zur Liste der Zahlungsmethoden für Ihren PaymentIntent hinzu.

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

Clientseitig

Ein PaymentIntent enthält ein Client-Geheimnis. Sie können das Client-Geheimnis in Ihrer React Native-App verwenden, um den Zahlungsvorgang sicher abzuschließen, anstatt das gesamte PaymentIntent-Objekt zurückzugeben. Fordern Sie in Ihrer App einen PaymentIntent von Ihrem Server an und speichern Sie dessen 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;
  };

  return <View>...</View>;
}

Damit die Zahlung an Stripe übermittelt werden kann, ist das Client-Geheimnis aus dem von Ihnen erstellten PaymentIntent erforderlich. Fügen Sie es in Ihren Aufruf von confirmPayment ein:

import {Picker} from '@react-native-picker/picker';
import {confirmPayment} from '@stripe/stripe-react-native';

export default function MyPaymentScreen() {

  const handlePayPress = async () => {
    // Fetch the intent client secret from the backend.
    // See `fetchPaymentIntentClientSecret()`'s implementation above.
    const clientSecret = await fetchPaymentIntentClientSecret();

    const {error, paymentIntent} = await confirmPayment(clientSecret, {
      paymentMethodType: 'Klarna'
      },
    });

    if (error) {
      console.log('Payment confirmation error', error.message);
      // Update UI to prompt user to retry payment (and possibly another payment method)
    } else if (paymentIntent) {
      Alert.alert('Success', `The payment was confirmed successfully!`);
    }
  };

Nachfolgend haben wir speziell ausgewählte Testdaten für die derzeit unterstützten Kundenländer zusammengestellt. In einer Sandbox nutzt Klarna die angegebene E-Mail-Adresse, um eine Transaktion zu genehmigen oder abzulehnen.

Zwei-Schritte-Authentifizierung

Jede 6-stellige Zahl ist ein gültiger Code für die Zwei-Schritte-Authentifizierung. Verwenden Sie 999999, damit die Authentifizierung fehlschlägt.

Rückzahlungmethode

Innerhalb des Klarna-Ablaufs können Sie die folgenden Testwerte verwenden, um verschiedene Rückzahlungsarten auszuprobieren: