Zahlungen per iDEAL akzeptieren
So akzeptieren Sie Zahlungen per iDEAL, einer gängigen Zahlungsmethode in Belgien.
Vorsicht
Wir empfehlen Ihnen, den Leitfaden Zahlung akzeptieren zu befolgen, es sei denn, Sie müssen eine manuelle serverseitige Bestätigung verwenden oder Ihre Integration erfordert die separate Angabe von Zahlungsmethoden. Wenn Sie Elements bereits integriert haben, lesen Sie den Migrationsleitfaden für Payment Element.
Wenn Ihre App iDEAL akzeptiert, wird für die Kundinnen/Kunden eine Webansicht angezeigt, sodass sie die Zahlung im Onlineportal ihrer Bank autorisieren können. Danach kehren sie zu Ihrer App zurück und Sie werden sofort benachrichtigt, ob die Zahlung erfolgreich war oder fehlgeschlagen ist.
Notiz
Um Zahlungen per iDEAL akzeptieren zu können, müssen Sie unseren Allgemeinen Geschäftsbedingungen für iDEAL zustimmen.
Stripe einrichtenServerseitigClientseitig
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:
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):
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.
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.
Erstellen Sie ein PaymentIntentServerseitigClientseitig
Ein PaymentIntent ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.
Serverseitig
Erstellen Sie zunächst einen PaymentIntent
auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung eur
an (iDEAL unterstützt keine anderen Währungen). Für iDEAL gibt es keinen Mindestabbuchungsbetrag, sodass der Wert für amount
in der Zahlung durchaus so gering wie 1 sein kann. Falls Sie bereits über eine Integration verfügen, die die Payment Intents API verwendet, fügen Sie der Liste der Zahlungsmethoden für Ihre PaymentIntent
die Zahlungsmethode ideal
hinzu.
Statt das gesamte PaymentIntent-Objekt an Ihre App zu übergeben, übergeben Sie nur das Client-Geheimnis. Das Client-Geheimnis des PaymentIntent ist ein eindeutiger Schlüssel, mit dem Sie die Zahlung bestätigen und Zahlungsdetails auf dem Client aktualisieren können, ohne dass eine Manipulation vertraulicher Daten, wie beispielsweise des Zahlungsbetrags, möglich ist.
Clientseitig
Fordern Sie auf dem Client einen PaymentIntent von Ihrem Server an und speichern Sie das zugehörige Client-Geheimnis.
const fetchPaymentIntentClientSecret = async () => { const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ email, currency: 'eur', payment_method_types: ['ideal'], }), }); const {clientSecret, error} = await response.json(); return {clientSecret, error}; };
Angaben zur Zahlungsmethode erfassenClientseitig
Erfassen Sie in Ihrer App den vollständige Namen der Kundin/des Kunden.
export default function IdealPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { // ... }; return ( <Screen> <TextInput placeholder="Name" onChange={(value) => setName(value.nativeEvent.text)} /> </Screen> ); }
Zahlung an Stripe sendenClientseitig
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 IdealPaymentScreen() { const [name, setName] = useState(); const handlePayPress = async () => { const {clientSecret} = await fetchPaymentIntentClientSecret(); const {error, paymentIntent} = await confirmPayment(clientSecret, { paymentMethodType: 'Ideal', paymentMethodData: { billingDetails: { name, }, }, }); 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>{/* ... */}</Screen>; }
Integration testen
Verwenden Sie Ihre Test-API-Schlüssel, um den PaymentIntent zu bestätigen. Nach der Bestätigung werden Sie an eine Testseite mit Optionen zur Autorisierung oder Ablehnung der Zahlung weitergeleitet.
- Klicken Sie auf Authorize test payment (Testzahlung autorisieren), um den Fall zu testen, wenn die Zahlung erfolgreich durchgeführt wird. Die PaymentIntent wechselt von
requires_
zuaction succeeded
. - Klicken Sie auf Fail test payment (Testzahlung ablehnen), um den Fall zu testen, wenn der/die Kund/in nicht authentifiziert werden kann. Die PaymentIntent wechselt von
requires_
zuaction requires_
.payment_ method
Bankreferenz
Bankname | Value |
---|---|
ABN AMRO | abn_ |
ASN Bank | asn_ |
Bunq | bunq |
ING | ing |
Knab | knab |
N26 | n26 |
Nationale-Nederlanden | nn |
Rabobank | rabobank |
Revolut | revolut |
RegioBank | regiobank |
SNS Bank (De Volksbank) | sns_ |
Triodos Bank | triodos_ |
Van Lanschot | van_ |
Yoursafe | yoursafe |