Destination Charges erstellen

Erstellen Sie Zahlungen auf Ihrem Plattformkonto, ziehen Sie Gebühren ein und übertragen Sie die verbleibenden Gelder sofort auf Ihre verbundenen Konten.

Erstellen Sie Destination Charges, wenn Kundinnen/Kunden mit Ihrer Plattform im Zusammenhang mit Produkten oder Dienstleistungen interagieren, die von Ihren verbundenen Konten zur Verfügung gestellt werden, und Sie sofort Gelder an Ihre verbundenen Konten überweisen. Mit diesem Zahlungstyp:

Sie erstellen eine Abbuchung auf dem Konto Ihrer Plattform.
Sie bestimmen, ob diese Gelder teilweise oder vollständig auf das verbundene Konto übertragen werden sollen.
Ihr Kontoguthaben wird mit Stripe-Gebühren, Rückerstattungen und Rückbuchungen belastet.

Diese Art der Zahlung eignet sich optimal für Marktplätze wie Airbnb, einen Marktplatz für Unterkünfte, oder Lyft, eine Mitfahr-App.

Wenn sich Ihre Plattform und ein verbundenes Konto nicht in derselben Region befinden, müssen Sie, abgesehen von bestimmten Ausnahmen, das verbundene Konto als Abwicklungshändler mit dem Parameter on_behalf_of für den Payment Intent angeben.

Wir empfehlen, Destination Charges für verbundene Konten zu verwenden, die keinen Zugriff auf das vollständige Stripe-Dashboard haben.

Web

iOS

Android

React Native

Diese Integration kombiniert alle erforderlichen Schritte zur Zahlung – die Erfassung der Zahlungsdaten und die Bestätigung der Zahlung – in ein einziges Blatt, das ganz oben in Ihrer App angezeigt wird.

Stripe einrichten
Serverseitig
Clientseitig

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

Serverseitig

Für diese Integration sind Endpoints auf Ihrem Server erforderlich, die mit der Stripe-API kommunizieren können. Nutzen Sie die 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):

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.

Endpoint hinzufügen
Serverseitig

Hinweis

Um das PaymentSheet vor dem Erstellen eines PaymentIntent anzuzeigen, finden Sie weitere Informationen unter Erfassen von Zahlungsdetails vor dem Erstellen eines Intent.

Diese Integration verwendet drei Stripe-API-Objekte:

PaymentIntent: Stripe verwendet diesen, um Ihre Absicht darzustellen, Zahlungen von Ihren Kundinnen/Kunden anzufordern, wobei Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang dokumentiert werden.
(Optional) Kunde/Kundin: Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem Kunden/einer Kundin zuordnen. Erstellen Sie ein Customer-Objekt, wenn Ihre Kundin/Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt. Wenn eine Zahlung als Gast durchgeführt wird, können Sie vor der Zahlung ein Customer-Objekt erstellen und es zu einem späteren Zeitpunkt mit Ihrer eigenen internen Darstellung des Kundenkontos verknüpfen.
(Optional) Temporärer Kundenschlüssel: Informationen auf dem Kundenobjekt sind vertraulich und können nicht direkt über die App abgerufen werden. Ein temporärer Schlüssel gewährt dem SDK vorübergehenden Zugriff auf den/die Kund/in.

Notiz

Wenn Sie niemals Karten für eine/n Kund/in speichern und wiederkehrenden Kund/innen nicht erlauben, gespeicherte Karten wiederzuverwenden, können Sie das Customer-Objekt und das temporäre Schlüsselobjekt aus Ihrer Integration weglassen.

Aus Sicherheitsgründen kann Ihre App diese Objekte nicht erstellen. Fügen Sie stattdessen einen Endpoint auf Ihrem Server hinzu, der:

Ruft den Kunden/die Kundin ab oder erstellt einen neuen/eine neue.
Erstellt einen temporären Schlüssel für den Kunden/die Kundin.
Erstellt einen PaymentIntent mit dem Betrag, der Währung und dem Kunden/der Kundin. Den Parameter automatic_payment_methods können Sie optional ebenfalls einfügen. Stripe aktiviert seine Funktionalität standardmäßig in der neuesten Version der API.
Gibt das Client-Geheimnis des PaymentIntent, das secret des temporären Schlüssels, die ID des Kundenobjekts und Ihren veröffentlichbaren Schlüssel an Ihre App zurück.

Die Zahlungsmethoden, die Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls in der PaymentIntent enthalten. Sie können Stripe Zahlungsmethoden aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten. Gleich welche Option Sie wählen, die in der PaymentIntent übergebene Währung filtert die Zahlungsmethoden, die dem/r Kund/in angezeigt werden. Wenn Sie beispielsweise eur für den PaymentIntent übergeben und OXXO im Dashboard aktiviert ist, wird dem/r Kund/in OXXO nicht angezeigt, da OXXO eur-Zahlungen nicht unterstützt.

Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des/r Kund/in am relevantesten sind, erhalten Priorität.

Notiz

Sie können eine Implementierung dieses Endpoints auf CodeSandbox zum Testen abspalten und bereitstellen.

Zahlungsmethoden können Sie über das Dashboard verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird mit den Zahlungsmethoden erstellt, die Sie im Dashboard konfiguriert haben. Wenn Sie das Dashboard nicht verwenden möchten oder wenn Sie Zahlungsmethoden manuell angeben möchten, können Sie sie mit dem Attribut payment_method_types auflisten.

Zahlungsformular integrieren
Clientseitig

Bevor das mobile Payment Element angezeigt wird, sollte Ihr Checkout-Seite folgendes anzeigen:

Die gekauften Produkte und den Gesamtbetrag anzeigen
Alle benötigten Versanddaten erfassen
Fügen Sie eine Checkout-Schaltfläche ein, um die Nutzeroberfläche von Stripe anzuzeigen

Erstellen Sie im Checkout Ihrer App eine Netzwerkanfrage an den im vorigen Schritt erstellten Backend-Endpoint und rufen Sie initPaymentSheet aus dem useStripe-Hook auf.

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

  useEffect(() => {
    initializePaymentSheet();
  }, []);

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Wenn Ihr/e Kund/in auf die Schaltfläche Checkout tippt, rufen Sie bitte presentPaymentSheet() auf, um das Formular anzuzeigen. Nachdem der/die Kund/in die Zahlung abgeschlossen hat, wird das Formular verworfen und das Promise mit einem optionalen StripeError<PaymentSheetError> aufgelöst.

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

Wenn kein Fehler auftritt, informieren Sie den/die Nutzer/in, dass der Vorgang abgeschlossen ist (zum Beispiel durch die Anzeige einer Bestellbestätigung).

Wenn Sie allowsDelayedPaymentMethods auf true festlegen, werden Zahlungsmethoden mit verzögerter Benachrichtigung wie US-Bankkonten zugelassen. Für diese Zahlungsmethoden ist der endgültige Zahlungsstatus nicht bekannt, wenn das PaymentSheet abgeschlossen wird. Stattdessen ist sie erfolgreich oder schlägt fehl. Wenn Sie diese Art von Zahlungsmethoden unterstützen, informieren Sie den Kunden/die Kundin darüber, dass seine/ihre Bestellung bestätigt ist, und führen seine/ihre Bestellung erst aus (z. B. das Produkt versenden), wenn die Zahlung erfolgreich ist.

Rückgabe-URL einrichten (nur für iOS)
Clientseitig

Der Kunde/Die Kundin verlässt ggf. Ihre App, um sich zu authentifizieren (z. B. in Safari oder einer Banking-App). Damit sie nach der Authentifizierung automatisch zu Ihrer App zurückkehren können, konfigurieren Sie ein benutzerdefiniertes URL-Schema und richten Sie Ihren App-Delegate so ein, dass die URL an das SDK weitergeleitet wird. Stripe unterstützt keine universellen Links.

Legen Sie zusätzlich die returnURL in Ihrem PaymentSheet.Configuration-Objekt auf die URL für Ihre App fest.

var configuration = PaymentSheet.Configuration()
configuration.returnURL = "your-app://stripe-redirect"

Ereignisse nach Zahlung verarbeiten

Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Neben der Abwicklung des payment_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

Ereignis	Beschreibung	Aktion
payment_intent.succeeded	Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben.	Senden Sie den Kund/innen eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
payment_intent.processing	Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis.	Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt.
payment_intent.payment_failed	Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt.	Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an.

Integration testen

Kartennummer	Szenario	So führen Sie den Test durch
	Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Für die Kartenzahlung ist eine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.

OptionalApple Pay aktivieren

Für eine Apple-Händler-ID registrieren

Beantragen Sie eine Apple-Händler-ID, indem Sie sich auf der Apple Developer-Website für eine neue Kennung registrieren.

Tragen Sie eine Beschreibung und eine Kennung in das Formular ein. Die Beschreibung ist nur für Ihre internen Zwecke bestimmt und kann später geändert werden. Stripe empfiehlt, dass Sie den Namen Ihrer App als Kennung verwenden, zum Beispiel merchant.com.{{YOUR_APP_NAME}}.

Neues Apple Pay-Zertifikat erstellen

Erstellen Sie ein Zertifikat für Ihre App, um Zahlungsdaten zu verschlüsseln.

Gehen Sie zu den iOS-Zertifikateinstellungen im Dashboard, klicken Sie auf Neue Anwendung hinzufügen und befolgen Sie die Anleitung.

Laden Sie eine Certificate Signing Request (CSR)-Datei herunter, um ein sicheres Zertifikat von Apple zu erhalten, mit dem Sie Apple Pay verwenden können.

Eine CSR-Datei muss verwendet werden, um genau ein Zertifikat auszustellen. Wenn Sie Ihre Apple-Händler-ID wechseln, müssen Sie zu den iOS-Zertifikateinstellungen im Dashboard gehen, um eine neue CSR und ein Zertifikat zu erhalten.

Mit Xcode integrieren

Fügen Sie Ihrer App die Apple Pay-Funktion hinzu. Öffnen Sie in Xcode Ihre Projekteinstellungen, klicken Sie auf die Registerkarte Signing & Capabilities (Anmeldung und Funktionen) und fügen Sie die Apple Pay-Funktion hinzu. Möglicherweise werden Sie an dieser Stelle aufgefordert, sich bei Ihrem Entwicklerkonto anzumelden. Wählen Sie die zuvor erstellte Händler-ID aus. Ihre App sollte nun Apple Pay unterstützen.

Apple Pay-Funktion in Xcode aktivieren

Apple Pay hinzufügen

Übergeben Sie beim Erstellen von StripeProvider Ihre Händler-ID:

import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"

      merchantIdentifier="MERCHANT_ID"
    >
      // Your app code here
    </StripeProvider>
  );
}

Wenn Sie initPaymentSheet aufrufen, übergeben Sie Ihre ApplePayParams:

await initPaymentSheet({
  // ...
  applePay: {
    merchantCountryCode: 'US',
  },
});

Sendungsverfolgung

Um für iOS 16 und neuere Versionen Informationen zur Sendungsverfolgung hinzuzufügen, konfigurieren Sie eine Callback-Funktion für setOrderTracking. Stripe ruft Ihre Implementierung auf, nachdem die Zahlung durchgeführt wurde, aber bevor iOS das Apple Pay-Formular schließt.

Rufen Sie in Ihrer Implementierung der Callback-Funktion setOrderTracking die Bestelldetails für die abgeschlossene Bestellung von Ihrem Server ab. Übergeben Sie die Details an die angegebene completion-Funktion.

Weitere Informationen zur Sendungsverfolgung finden Sie in der Apple-Dokumentation zu Wallet-Bestellungen.

await initPaymentSheet({
  // ...
  applePay: {
    // ...
    setOrderTracking: async complete => {
      const apiEndpoint =
        Platform.OS === 'ios'
          ? 'http://localhost:4242'
          : 'http://10.0.2.2:4567';
      const response = await fetch(
        `${apiEndpoint}/retrieve-order?orderId=${orderId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (response.status === 200) {
        const orderDetails = await response.json();
        // orderDetails should include orderIdentifier, orderTypeIdentifier,
        // authenticationToken and webServiceUrl
        complete(orderDetails);
      }
    },
  },
});

OptionalGoogle Pay aktivieren

Integration einrichten

Um Google Pay zu verwenden, aktivieren Sie zuerst die Google Pay API, indem Sie dem Tag <application> Ihrer Datei AndroidManifest.xml Folgendes hinzufügen:

AndroidManifest.xml
<application>
  ...
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>

Weitere Informationen finden Sie in der Google Pay API für Android.

Google Pay hinzufügen

Setzen Sie bei der Initialisierung von PaymentSheet merchantCountryCode auf den Ländercode Ihres Unternehmens und setzen Sie googlePay auf „true“.

Sie können die Testumgebung auch verwenden, indem Sie den Parameter testEnv übergeben. Sie können Google Pay nur auf einem physischen Android-Gerät testen. Folgen Sie der React Native-Dokumentation, um Ihre Anwendung auf einem physischen Gerät zu testen.

const { error, paymentOption } = await initPaymentSheet({
  // ...
  googlePay: {
    merchantCountryCode: 'US',
    testEnv: true, // use test environment
  },
});

OptionalScannen von Karten aktivieren (nur für iOS)
Clientseitig

Um die Unterstützung für Kartenscans zu aktivieren, setzen Sie NSCameraUsageDescription (Datenschutz – Beschreibung Kameranutzung) in der Info.plist Ihrer Anwendung und geben Sie einen Grund für den Zugriff auf die Kamera an (zum Beispiel „zum Scannen von Karten“). Geräte mit iOS 13 oder höher unterstützen Kartenscans.

OptionalFormular anpassen

Alle Anpassungen werden mithilfe von initPaymentSheet konfiguriert.

Erscheinungsbild

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

Anzeigename des Händlers

Geben Sie einen kundenorientierten Unternehmensnamen an, indem Sie merchantDisplayName festlegen. Standardmäßig handelt es sich dabei um den Namen Ihrer App.

await initPaymentSheet({
  // ...
  merchantDisplayName: 'Example Inc.',
});

Dunkelmodus

Standardmäßig passt PaymentSheet sich automatisch an die systemweiten Erscheinungsbildeinstellungen des/der Nutzer/in an (heller und dunkler Modus). Dies können Sie ändern, indem Sie die Eigenschaft style in iOS auf den Modus alwaysLight oder alwaysDark setzen.

await initPaymentSheet({
  // ...
  style: 'alwaysDark',
});

Wählen Sie auf einem Android-Gerät den Hell- oder Dunkelmodus für Ihre App aus:

// force dark
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
// force light
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)

Standardabrechnungsdetails

Um Standardwerte für die im PaymentSheet erfassten Rechnungsdetails festzulegen, konfigurieren Sie die Eigenschaft defaultBillingDetails. Das PaymentSheet füllt seine Felder vorab mit den von Ihnen angegebenen Werten aus.

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

Abrechnungdaten erfassen

Verwenden Sie billingDetailsCollectionConfiguration, um anzugeben, wie Sie Rechnungsdetails im PaymentSheet 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:

Hängen Sie die Werte, die nicht von PaymentSheet erfasst werden, an die Eigenschaft defaultBillingDetails an.
Legen Sie billingDetailsCollectionConfiguration.attachDefaultsToPaymentMethod auf true fest.

await initPaymentSheet({
  // ...
  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 Telefonnummern nur, wenn Sie sie für die Transaktion benötigen.

OptionalZahlung in Ihrer Nutzeroberfläche abschließen

Sie können das Zahlungsformular anzeigen, um nur die Details einer Zahlungsmethode zu erfassen, und später eine confirm-Methode aufrufen, um die Zahlung in der Nutzeroberfläche Ihrer App abzuschließen. Dies ist nützlich, wenn Sie eine nutzerspezifische Kaufschaltfläche haben oder zusätzliche Schritte erfordern, nachdem die Zahlungsdetails erfasst wurden.

Notiz

Eine Beispiel-Integration ist in unserem GitHub verfügbar.

Rufen Sie zunächst initPaymentSheet auf und übergeben Sie customFlow: true. initPaymentSheet wird mit einer anfänglichen Zahlungsoption aufgelöst, die ein Bild und ein Label enthält, die die Zahlungsmethode des/der Kund/in darstellen. Aktualisieren Sie Ihre Nutzeroberfläche mit diesen Details.

const {
  initPaymentSheet,
  presentPaymentSheet,
  confirmPaymentSheetPayment,
} = useStripe()

const { error, paymentOption } = await initPaymentSheet({
  customerId: customer,
  customerEphemeralKeySecret: ephemeralKey,
  paymentIntentClientSecret: paymentIntent,
  customFlow: true,
  merchantDisplayName: 'Example Inc.',
});
// Update your UI with paymentOption

Verwenden Sie presentPaymentSheet, um Zahlungsdetails zu erfassen. Wenn der/die Kund/in fertig ist, schließt sich das Formular von selbst und löst das Versprechen auf. Aktualisieren Sie Ihre Nutzeroberfläche mit den Angaben zur ausgewählten Zahlungsmethode.

const { error, paymentOption } = await presentPaymentSheet();

Verwenden Sie confirmPaymentSheetPayment, um die Zahlung zu bestätigen. Dies wird mit dem Ergebnis der Zahlung aufgelöst.

const { error } = await confirmPaymentSheetPayment();

if (error) {
  Alert.alert(`Error code: ${error.code}`, error.message);
} else {
  Alert.alert(
    'Success',
    'Your order is confirmed!'
  );
}

OptionalWeitere Zahlungsmethoden aktivieren

Konfigurieren Sie die Zahlungsmethoden für Ihr Konto auf der Seite „Zahlungsmethoden“ im Stripe-Dashboard. Kartenzahlungen, Google Pay und Apple Pay werden standardmäßig aktiviert, Sie können Zahlungsmethoden jedoch nach Bedarf aktivieren und deaktivieren. Ihre verbundenen Konten können ihre eigenen Zahlungsmethoden nicht anpassen.

Bevor Stripe einem Kunden/einer Kundin das Zahlungsformular anzeigt, wertet Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere Parameter aus, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Das Zahlungsformular priorisiert Zahlungsmethoden, die die Konversion steigern und die für die Währung des Kunden/der Kundin am relevantesten sind. Zahlungsmethoden mit niedrigerer Priorität sind in einem Überlaufmenü verborgen.

Gebühren erheben

Anstatt den vollen Transaktionsbetrag auf ein verbundenes Konto zu überweisen, kann Ihre Plattform bei der Verarbeitung einer Zahlung beschließen, einen Teil des Transaktionsbetrags in Form von Gebühren zu erheben. Sie können die Preise für Gebühren auf zwei verschiedene Arten festlegen:

Mit dem Plattform-Preistool können Sie Preisregeln für Plattformgebühren festlegen und testen. Diese No-Code-Funktion im Stripe-Dashboard ist derzeit nur für Plattformen verfügbar, die für die Zahlung von Stripe-Gebühren verantwortlich sind.
Legen Sie intern Ihre Preisregeln fest und legen Sie Gebühren direkt in einem PaymentIntent fest, entweder mit dem Parameter application_fee_amount oder transfer_data[amount]. Die mit dieser Methode festgelegten Gebühren überschreiben die im Plattform-Preistool angegebene Preislogik.

Wenn Zahlungen mit einem application_fee_amount erstellt werden, wird der vollständige Zahlungsbetrag sofort nach Erfassung der Zahlung von der Plattform auf das transfer_data[destination]-Konto übertragen. Der application_fee_amount (bis zum vollen Zahlungsbetrag) wird wieder an die Plattform zurück übertragen.

Nachdem die Plattformgebühr eingezogen wurde, wird ein Plattformgebühr-Objekt erstellt. Sie können eine Liste der Plattformgebühren im Dashboard über die Plattformgebühren oder in Sigma einsehen. Sie können auch die Eigenschaft amount des Plattformgebühr-Objekts verwenden, um die Gebühren nach Posten aufgeschlüsselt auszuweisen.

Wenn Sie einen application_fee_amount verwenden, muss Ihnen Folgendes bekannt sein:

Der application_fee_amount ist auf den Gesamtbetrag der Transaktion begrenzt.
Der application_fee_amount wird immer in der gleichen Währung wie die Transaktion berechnet.
Die Plattformgebühr wird in der gleichen Währung wie die Auszahlungswährung des verbundenen Kontos abgerechnet. Bei Gebühren für grenzüberschreitende Zahlungen kann dies von der Abrechnungswährung Ihrer Plattform abweichen.
Ihre Plattform zahlt die Stripe-Gebühr, nachdem der application_fee_amount auf Ihr Konto überwiesen wurde.
Es fallen keine zusätzlichen Stripe-Gebühren auf den Betrag an.
Ihre Plattform kann die integrierte Berichterstattung zur Plattformgebühr verwenden, um die erhobenen Gebühren abzugleichen.
In von Stripe gehosteten Dashboards oder Komponenten wie der Zahlungsdetails-Komponente kann Ihr verbundenes Konto sowohl den Gesamtbetrag als auch den Betrag der Plattformgebühr einsehen.

Geldbewegungen

Mit dem obigen Code wird der vollständige Zahlungsbetrag (10,00 USD) dem ausstehenden Guthaben des verbundenen Kontos hinzugefügt. Der application_fee_amount(1,23 USD) wird vom Zahlungsbetrag abgezogen und an Ihre Plattform überwiesen. Die Stripe-Gebühren (0,59 USD) vom Guthaben Ihres Plattformkontos abgezogen. Der Betrag der Plattformgebühr abzüglich der Stripe-Gebühren (1,23 USD – 0,59 USD = 0,64 USD) verbleibt auf dem Guthaben Ihres Plattformkontos.

Der application_fee_amount wird gemäß dem normalen Überweisungsplan des Plattformkontos verfügbar, genau wie Gelder aus regulären Stripe-Zahlungen.

Abwicklungshändler angeben

Der Abwicklungshändler ist abhängig von den Funktionen, die für ein Konto eingerichtet sind, und davon, wie eine Zahlung erstellt wird. Der Abwicklungshändler bestimmt, wessen Informationen für die Durchführung der Zahlung verwendet werden. Dazu gehört die Zahlungsbeschreibung in der Abrechnung (entweder die der Plattform oder die des verbundenen Kontos), die auf dem Kreditkarten- oder Kontoauszug des Kunden/der Kundin für diese Zahlung angezeigt wird.

Durch die Angabe des Abwicklungshändlers können Sie genauer festlegen, für wen Zahlungen erstellt werden sollen. Einige Plattformen sind beispielsweise vorzugsweise der Abwicklungshändler, da Kundinnen/Kunden direkt mit ihrer Plattform interagieren (zum Beispiel On-Demand-Plattformen). Manche Plattformen verfügen jedoch über verbundene Konten, die stattdessen direkt mit Kundinnen/Kunden interagieren (zum Beispiel ein Ladengeschäft auf einer E-Commerce-Plattform). Bei diesen Szenarien ist es möglicherweise sinnvoller, wenn das verbundene Konto der Abwicklungshändler ist.

Sie können den Parameter on_behalf_of auf die ID eines verbundenen Kontos setzen, um dieses Konto zum Abwicklungshändler für die Zahlung zu machen. Bei Verwendung von on_behalf_of:

Zahlungen werden im Land und in der Abwicklungswährung des verbundenen Kontos abgewickelt.
Es wird die Gebührenstruktur für das Land des verbundenen Kontos verwendet.
Die Zahlungsbeschreibung des verbundenen Kontos wird auf der Kreditkartenabrechnung des Kunden/der Kundin angezeigt.
Wenn sich das verbundene Konto in einem anderen Land als die Plattform befindet, werden die Adresse und die Telefonnummer des verbundenen Kontos auf der Kreditkartenabrechnung des Kunden/der Kundin angezeigt.
Wie viele Tage ein ausstehendes Guthaben vor der Auszahlung zurückgehalten wird, hängt von der Einstellung delay_days auf dem verbundenen Konto ab.

Wenn on_behalf_of weggelassen wird, ist die Plattform das für die Zahlung verantwortliche Unternehmen.

Vorsicht

Der Parameter on_behalf_of wird nur für verbundene Konten mit Zahlungsfunktionen wie card_payments unterstützt. Konten, denen der Empfänger-Rahmenvertrag zugrunde liegt, können keine card_payments oder andere Zahlungsfunktionen anfordern.

Rückerstattungen ausstellen

Wenn Sie die Payment Intents API verwenden, sollten Rückerstattungen für die zuletzt erstellte Zahlung ausgestellt werden.

Im Plattformkonto erstellte Zahlungen können mit dem geheimen Schlüssel des Plattformkontos rückerstattet werden. Bei Rückerstattung einer Zahlung mit einem transfer_data[destination] bleiben die Gelder standardmäßig auf dem Zielkonto, auf das sie überwiesen wurden, sodass das Plattformkonto den negativen Saldo aus der Rückerstattung abdecken muss. Um die Gelder zur Abdeckung der Rückerstattung von dem verbundenen Konto zurückzuziehen, setzen Sie den Parameter reverse_transfer beim Erstellen der Rückerstattung auf true:

Standardmäßig wird die gesamte Zahlung rückerstattet. Sie können jedoch auch eine Teilrückerstattung erstellen, indem Sie einen amount-Wert als positive Ganzzahl festlegen.

Wenn die Rückerstattung zur Folge hat, dass die gesamte Zahlung zurückerstattet wird, wird die gesamte Übertragung rückgängig gemacht. Andernfalls wird nur ein proportionaler Betrag der Übertragung rückgängig gemacht.

Plattformgebühren zurückerstatten

Wenn eine Zahlung mit einer Plattformgebühr zurückerstattet wird, behält das Plattformkonto standardmäßig die Gelder aus der Plattformgebühr ein. Um die Plattformgebühr auf das verbundene Konto zurück zu übertragen, legen Sie den Parameter refund_application_fee auf true fest, wenn Sie die Rückerstattung erstellen:

Beachten Sie Folgendes: Wenn Sie die Plattformgebühr für eine Destination Charge erstatten, müssen Sie auch die Übertragung rückgängig machen. Wenn die Rückerstattung zur Folge hat, dass die gesamte Zahlung zurückerstattet wird, wie die gesamte Plattformgebühr ebenfalls zurückerstattet. Andernfalls wird nur ein proportionaler Betrag der Plattformgebühr rückerstattet.

Alternativ können Sie den refund_application_fee-Wert false angeben und die Plattformgebühr separat über die API zurückerstatten.

Fehlgeschlagene Rückerstattungen

Wenn eine Rückerstattung fehlschlägt oder von Ihnen storniert wird, wird der Betrag der fehlgeschlagenen Rückerstattung dem Stripe-Guthaben gutgeschrieben. Erstellen Sie eine Übertragung, um das Geld nach Bedarf auf das verbundene Konto zu überweisen.

Umgang mit Zahlungsanfechtungen

Für Destination Charges, mit oder ohne on_behalf_of, belastet Stripe angefochtene Beträge und Gebühren von Ihrem Plattformkonto.

Wir empfehlen, einen Webhook einzurichten, um durch Zahlungsanfechtungen erstellte Ereignisse zu überwachen. In diesem Fall können Sie versuchen, Gelder von dem verbundenen Konto zurückzuerhalten, indem Sie die Überweisung über das Dashboard oder durch Erstellen einer Rückbuchung rückgängig machen.

Wenn das verbundene Konto einen negativen Saldo aufweist, versucht Stripe, das externe Konto zu belasten, wenn debit_negative_balances auf true festgelegt ist.

Wenn Sie der Zahlungsanfechtung widersprechen und gewinnen, können Sie die Gelder, die Sie zuvor zurückgebucht haben, auf das verbundene Konto zurücküberweisen. Wenn Ihre Plattform nicht über ausreichendes Guthaben verfügt, schlägt die Übertragung fehl. Verhindern Sie Fehler aufgrund unzureichendem Guthaben, indem Sie Gelder auf Ihr Stripe-Guthaben einzahlen.

Häufiger Fehler

Die erneute Überweisung einer früheren Rückbuchung unterliegt Beschränkungen für grenzüberschreitende Überweisungen. Das bedeutet, Sie haben möglicherweise keine Möglichkeit, eine Rückzahlung auf Ihr verbundenes Konto durchzuführen. Warten Sie stattdessen damit, angefochtene grenzüberschreitender Zahlungstransfers für Destination Charges mit on_behalf_of doch noch als Einnahmen zu buchen, bis eine Zahlungsanfechtung zu Ihren Ungunsten entschieden wurde.

In Connect eingebettete Komponenten

Destination charges are supported by Connect embedded components. By using the payments embedded component, you can enable your connected accounts to view payment information from within your site. For destination charges with on_behalf_of, you can use the destination_on_behalf_of_charge_management feature to allow your connected accounts to view additional details, manage refunds, disputes, and allow capturing payments.

Die folgenden Komponenten zeigen Informationen zu den Destination Charges an:

Payments-Komponente: Zeigt alle Zahlungen und Zahlungsanfechtungen eines Kontos an.
Zahlungsdetails: Zeigt alle Zahlungen und Zahlungsanfechtungen eines Kontos an.
Komponente „Zahlungsanfechtungen“: Zeigt alle Zahlungsanfechtungen eines Kontos an.
Komponente „Zahlungsanfechtungen für eine Zahlung“: Zeigt die Zahlungsanfechtungen für eine einzelne angegebene Zahlung an. Sie können damit Funktionen zum Management von Zahlungsanfechtungen in eine Seite Ihrer Zahlungs-Nutzeroberfläche integrieren.

Destination Charges erstellen

Erstellen Sie Zahlungen auf Ihrem Plattformkonto, ziehen Sie Gebühren ein und übertragen Sie die verbleibenden Gelder sofort auf Ihre verbundenen Konten.

Stripe einrichtenServerseitigClientseitig

Serverseitig

Clientseitig

Notiz

Stripe Initialisierung

Notiz

Endpoint hinzufügenServerseitig

Hinweis

Notiz

Notiz

Zahlungsformular integrierenClientseitig

Rückgabe-URL einrichten (nur für iOS)Clientseitig

Ereignisse nach Zahlung verarbeiten

Integration testen

OptionalApple Pay aktivieren

Für eine Apple-Händler-ID registrieren

Neues Apple Pay-Zertifikat erstellen

Mit Xcode integrieren

Apple Pay hinzufügen

Sendungsverfolgung

OptionalGoogle Pay aktivieren

Integration einrichten

Google Pay hinzufügen

OptionalScannen von Karten aktivieren (nur für iOS)Clientseitig

OptionalFormular anpassen

Erscheinungsbild

Anzeigename des Händlers

Dunkelmodus

Standardabrechnungsdetails

Abrechnungdaten erfassen

Notiz

OptionalZahlung in Ihrer Nutzeroberfläche abschließen

Notiz

OptionalWeitere Zahlungsmethoden aktivieren

Gebühren erheben

Geldbewegungen

Abwicklungshändler angeben

Vorsicht

Rückerstattungen ausstellen

Plattformgebühren zurückerstatten

Fehlgeschlagene Rückerstattungen

Umgang mit Zahlungsanfechtungen

Häufiger Fehler

In Connect eingebettete Komponenten

Siehe auch

Stripe einrichten
Serverseitig
Clientseitig

Endpoint hinzufügen
Serverseitig

Zahlungsformular integrieren
Clientseitig

Rückgabe-URL einrichten (nur für iOS)
Clientseitig

OptionalScannen von Karten aktivieren (nur für iOS)
Clientseitig