Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Zahlungsmethoden
Zahlungsschnittstellen
Zahlungsszenarien
Präsenzzahlungen
Mehr als Zahlungen

Zahlungen per EPS akzeptieren

So akzeptieren Sie Zahlungen per EPS, einer gängigen Zahlungsmethode in Österreich.

Bei EPS handelt es sich um eine Zahlungsmethode für die einmalige Nutzung, bei der Kundinnen/Kunden ihre Zahlungen authentifizieren müssen. Bei Zahlungen mit EPS werden Kundinnen/Kunden zur Autorisierung der Zahlung von Ihrer Website weggeleitet und dann wieder auf Ihre Website zurückgeleitet, wo Sie eine sofortige Benachrichtigung über den Erfolg oder das Fehlschlagen der Zahlung erhalten.

Notiz

Bei der Nutzung von EPS gelten die Allgemeinen Geschäftsbedingungen zu EPS.

Stripe einrichten
Serverseitig
Clientseitig

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:

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# 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):

Command Line
yarn add @stripe/stripe-react-native

Installieren Sie als Nächstes einige weitere erforderliche Abhängigkeiten:

  • For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
  • Für Android müssen keine Abhängigkeiten mehr installiert werden.

Notiz

Wir empfehlen Ihnen, die offizielle Anleitung zu TypeScript zu befolgen, um TypeScript zu unterstützen.

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

Notiz

Verwenden Sie Ihre API-Testschlüssel beim Testen und Entwickeln Ihrer App und Ihre Live-Modus-Schlüssel beim Veröffentlichen Ihrer App.

PaymentIntent erstellen
Serverseitig
Clientseitig

Ein PaymentIntent stellt Ihre Absicht dar, Zahlungen von Kundinnen und Kunden einzuziehen, und dokumentiert den gesamten Zahlungsvorgang.

Serverseitig

Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden amount und die Währung eur an (EPS unterstützt keine anderen Währungen). Wenn Sie über eine bestehende Payment Intents-Integration verfügen, fügen Sie eps der Liste der Arten von Zahlungsmethoden hinzu.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=eps

Clientseitig

Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie sein Client-Geheimnis.

const fetchPaymentIntentClientSecret = async () => {
  const response = await fetch(`${API_URL}/create-payment-intent`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      currency: 'eur',
      payment_method_types: ['eps'],
    }),
  });
  const { clientSecret, error } = await response.json();

  return { clientSecret, error };
};

Angaben zur Zahlungsmethode erfassen
Clientseitig

Erfassen Sie in Ihrer App den vollständige Namen der Kundin/des Kunden.

export default function EpsPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    // ...
  };

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}

Zahlung an Stripe senden
Clientseitig

Rufen Sie das Client-Geheimnis von der erstellten PaymentIntent ab und rufen Sie confirmPayment auf. Dies entspricht einer Webansicht, in der die Kund/innen die Zahlung auf der Website oder in der App ihrer Bank durchführen können. Anschließend wird das Promise mit dem Ergebnis der Zahlung aufgelöst.

export default function EPSPaymentScreen() {
  const [name, setName] = useState();

  const handlePayPress = async () => {
    const billingDetails: PaymentMethodCreateParams.BillingDetails = {
      name,
    };
  };

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

  if (error) {
    Alert.alert(`Error code: ${error.code}`, error.message);
  } else if (paymentIntent) {
    Alert.alert(
      'Success',
      `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
    );
  }

  return (
    <Screen>
      <TextInput
        placeholder="Name"
        onChange={(value) => setName(value.nativeEvent.text)}
      />
    </Screen>
  );
}
War diese Seite hilfreich?
JaNein