Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellenAnmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
APIs und SDKsHilfe
Übersicht
Informationen zu Stripe Payments
Aktualisieren Sie Ihre Integration
Zahlungsanalysefunktionen
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed Payments
Payment Links verwenden
Vorgefertigte Checkout-Seite verwenden
Erstellen Sie eine benutzerdefinierte Integration mit Elements
In-App-Integration erstellen
    Übersicht
    Zahlungsformular
    Payment Element
    Ausgehender Link für In-App-Käufe
    Adressen erfassen
    Verwalten der Zahlungsmethoden in den Einstellungen
    Karten in den USA und Kanada
Zahlungsmethoden
Zahlungsmethoden hinzufügen
Zahlungsmethoden verwalten
Schnellerer Bezahlvorgang mit Link
Zahlungsschnittstellen
Payment Links
Checkout
Web Elements
In-App Zahlungen
Zahlungsszenarien
Umgang mit mehreren Währungen
Nutzerdefinierte Zahlungsabläufe
Flexibles Acquiring
Orchestrierung
Präsenzzahlungen
Terminal
Mehr als Zahlungen
Unternehmensgründung
Krypto
Agentenbasierter Handel
Financial Connections
Climate
Betrug verstehen
Betrugsprävention von Radar
Zahlungsanfechtungen verwalten
Identitäten verifizieren
Vereinigte Staaten
Deutsch
StartseiteZahlungenBuild an in-app integration

Zahlungsmethoden in den Einstellungen verwalten

Verwenden Sie das Einstellungsformular für Zahlungsmethoden, damit Ihre Kundinnen und Kunden ihre Zahlungsmethoden auf der Seite mit Ihren App-Einstellungen verwalten können.

Notiz

Das Einstellungsformular für Zahlungsmethoden ist für die Verwendung auf einer Seite mit App-Einstellungen vorgesehen. Verwenden Sie für den Bezahlvorgang und Zahlungen In-App Payments, das auch einen integrierten Support zum Speichern und Anzeigen von Zahlungsmethoden bietet und mehr Zahlungsmethoden unterstützt als das Einstellungsformular für Zahlungsmethoden.

Notiz

Im Code wird diese Komponente aus historischen Gründen als CustomerSheet bezeichnet. Wenn Sie CustomerSheet in Codebeispielen sehen, bezieht sich dies in der Dokumentation auf das Einstellungsformular für Zahlungsmethoden.

Das Einstellungsformular für Zahlungsmethoden ist eine Komponente der Nutzeroberfläche, mit der Ihre Kundinnen/Kunden ihre gespeicherten Zahlungsmethoden verwalten können. Sie können die Nutzeroberfläche des Einstellungsformular für Zahlungsmethoden außerhalb eines Bezahlvorgangs verwenden, und das Erscheinungsbild und das Design können an das Erscheinungsbild und die Ästhetik Ihrer App angepasst werden. Kundinnen/Kunden können Zahlungsmethoden, die im Kundenobjekt gespeichert werden, hinzufügen und entfernen und ihre lokal auf dem Gerät gespeicherte Standard-Zahlungsmethode festlegen. Nutzen Sie sowohl In-App Payments als auch das Einstellungsformular für Zahlungsmethoden, um Ihren Kundinnen/Kunden eine einheitliche, umfassende Lösung für gespeicherte Zahlungsmethoden zur Verfügung zu stellen.

Screenshot eines Einstellungsformular für Zahlungsmethoden mit mehreren gespeicherten Zahlungsmethoden in einer iOS-App.

Stripe einrichten

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

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:

  • 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.

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.

Zahlungsmethoden aktivieren

Zeigen Sie Ihre Einstellungen für Zahlungsmethoden an und aktivieren Sie die Zahlungsmethoden, die Sie unterstützen möchten. Sie müssen mindestens eine Zahlungsmethode aktiviert haben, um einen SetupIntent zu erstellen.

Standardmäßig aktiviert Stripe Karten und andere gängige Zahlungsmethoden, mit denen Sie mehr Kundinnen und Kunden erreichen können. Wir empfehlen jedoch, zusätzliche Zahlungsmethoden zu aktivieren, die für Ihr Unternehmen und Ihre Kundschaft relevant sind. Weitere Informationen zur Unterstützung von Produkten und Zahlungsmethoden finden Sie auf der Seite Unterstützte Zahlungsmethoden und der Preisseite für Gebühren.

Notiz

Aktuell unterstützt CustomerSheet nur Karten und US-Bankkonten.

Kunden-Endpoints hinzufügen
Serverseitig

Erstellen Sie zwei Endpoints auf Ihrem Server: einen zum Abrufen des temporären Schlüssels einer Kundin/eines Kunden und einen zum Erstellen eines SetupIntent zum Speichern einer neuen Zahlungsmethode für die Kundin/den Kunden.

  1. Erstellen Sie einen Endpoint, um eine Kunden-ID und einen zugehörigen temporären Schlüssel zurückzugeben. Die vom SDK verwendete API Version können Sie hier einsehen.
Command Line
curl
Ruby
Python
PHP
Node.js
Java
No results
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -X "POST" curl https://api.stripe.com/v1/ephemeral_keys \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -X "POST" \ -d "customer"="{{CUSTOMER_ID}}" \
  1. Erstellen Sie einen Endpoint, um einen SetupIntent zurückzugeben, der mit der Kunden-ID konfiguriert ist.
Command Line
curl
Ruby
Python
PHP
Node.js
Java
No results
# Create a Customer (skip this and get the existing Customer ID if this is a returning customer) curl https://api.stripe.com/v1/customers \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -X "POST" curl https://api.stripe.com/v1/setup_intents \ -u
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:
\ -d "customer"="{{CUSTOMER_ID}}" \

Wenn Sie die Zahlungsmethode nur dann für zukünftige Zahlungen verwenden möchten, wenn Ihre Kundin/Ihr Kunde während des Bezahlvorgangs anwesend ist, setzen Sie den Nutzungsparameter auf on_session, um die Autorisierungsquoten zu verbessern.

Formular initialisieren

Konfigurieren Sie als Nächstes das Einstellungsformular für Zahlungen mit der Klasse CustomerSheetBeta, indem Sie die gewünschten Einstellungen für CustomerSheetBeta.initialize angeben.

import {CustomerSheetBeta} from '@stripe/stripe-react-native'; const {error} = await CustomerSheetBeta.initialize({ setupIntentClientSecret: 'SETUP-INTENT', customerEphemeralKeySecret: 'EPHEMERAL-KEY', customerId: 'CUSTOMER-ID', headerTextForSelectionScreen: 'Manage your payment method', returnURL: 'my-return-url://', });

Formular anzeigen

Zeigen Sie das Einstellungsformular für Zahlungen mit CustomerSheetBeta an. Wenn die Kundin/der Kunde das Formular ablehnt, wird das Versprechen mit einem CustomerSheetResult aufgelöst.

import {CustomerSheetBeta} from '@stripe/stripe-react-native'; const {error, paymentOption, paymentMethod} = await CustomerSheetBeta.present(); if (error) { if (error.code === CustomerSheetError.Canceled) { // Customer dismissed the sheet without changing their payment option } else { // Show the error in your UI } } else { if (paymentOption) { // Configure your UI based on the payment option MyBackend.setDefaultPaymentMethod(paymentMethod.id); } if (paymentMethod) { console.log(JSON.stringify(paymentMethod, null, 2)); } }
  • Wenn der Kunde/die Kundin eine Zahlungsmethode auswählt, enthält das Ergebnis eine paymentOption. Der zugehörige Wert ist die ausgewählte PaymentOption bzw. nil, wenn der/die Nutzer/in die zuvor ausgewählte Zahlungsmethode gelöscht hat. Die vollständigen Details zur Zahlungsmethode finden Sie im Feld paymentMethod.
  • Wenn der/die Nutzer/in das Formular abbricht, enthält das Ergebnis einen error mit dem error.code === CustomerSheetError.Canceled. Die ausgewählte Zahlungsmethode ändert sich nicht.
  • Wenn ein Fehler auftritt, werden die Details in error aufgenommen.

Erfahren Sie mehr darüber, wie Sie Apple Pay aktivieren.

OptionalACH-Zahlungen optimieren

So aktivieren Sie ACH-Lastschriftzahlungen: Aktivieren Sie in den Einstellungen Ihres Dashboards die Zahlungsmethode für US-Bankkonten.

OptionalAusgewählte Zahlungsmethode abrufen

Um die Standardzahlungsmethode abzurufen, ohne das Formular Einstellungen für Zahlungsmethoden anzuzeigen, rufen Sie nach der Initialisierung des Formulars CustomerSheetBeta.retrievePaymentOptionSelection() auf.

// Call CustomerSheetBeta.initialize() ... const { error, paymentOption, paymentMethod, } = await CustomerSheetBeta.retrievePaymentOptionSelection();

OptionalFormular anpassen

Erscheinungsbild

Passen Sie mit der Appearance API die Farben, Schriftarten und andere Darstellungsattribute an das Erscheinungsbild Ihrer App an.

Verhalten

Um ein benutzerdefiniertes Verhalten zum Anhängen, Trennen und Auflisten gespeicherter Zahlungsmethoden hinzuzufügen, übergeben Sie einen CustomerAdapter entweder an CustomerSheetBeta.initialize oder als Eigenschaft für <CustomerSheetBeta.CustomerSheet />

const { error } = await CustomerSheetBeta.initialize({ ... customerAdapter: { fetchPaymentMethods: async () => { const paymentMethods = // Get your Stripe payment methods from the server const filteredPaymentMethods = // Perform custom filtering return filteredPaymentMethods; } }, });

Notiz

fetchPaymentMethods kann gespeicherte Zahlungsmethoden herausfiltern und nicht anzeigen, hat aber keinen Einfluss auf die Art der Zahlungsmethoden, die hinzugefügt werden können.

Standardabrechnungsdetails

Um Standardwerte für die im Einstellungsformular für Zahlungsmethoden erfassten Abrechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft defaultBillingDetails. Die Felder im Einstellungsformular für Zahlungsmethoden werden vorab mit den von Ihnen angegebenen Werten ausgefüllt.

await CustomerSheetBeta.initialize({ // ... defaultBillingDetails: { email: 'foo@bar.com', address: { country: 'US', }, }, });

Erfassung der Rechnungsdetails

Verwenden Sie billingDetailsCollectionConfiguration, um anzugeben, wie Sie Abrechnungsdetails im Einstellungsformular für Zahlungsmethoden erfassen möchten.

Sie können den Namen, die E-Mail-Adresse, die Telefonnummer und die Adresse Ihrer Kundinnen und Kunden erfassen.

Wenn Sie nicht beabsichtigen, die Werte zu erfassen, die für die Zahlungsmethode erforderlich sind, müssen Sie Folgendes tun:

  1. Hängen Sie die Werte, die nicht vom Einstellungsformular für Zahlungsmethoden erfasst werden, an die Eigenschaft defaultBillingDetails an.
  2. Legen Sie billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod auf true fest.
await CustomerSheetBeta.initialize({ // ... defaultBillingDetails: { email: 'foo@bar.com', } billingDetailsCollectionConfiguration: { name: PaymentSheet.CollectionMode.ALWAYS, email: PaymentSheet.CollectionMode.NEVER, address: PaymentSheet.AddressCollectionMode.FULL, attachDefaultsToPaymentMethod: true }, });

Notiz

Wenden Sie sich an Ihren Rechtsbeistand bezüglich der Gesetze, die für das Erfassen von Informationen gelten. Erfassen Sie eine Telefonnummer nur, wenn Sie sie für die Transaktion benötigen.

War diese Seite hilfreich?
JaNein
  • Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
  • Schauen Sie sich unser Änderungsprotokoll an.
  • Fragen? Sales-Team kontaktieren.
  • LLM? Lesen Sie llms.txt.
  • Unterstützt von Markdoc