Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwicklerressourcen
Übersicht
Versionierung
Änderungsprotokoll
Aktualisieren Sie Ihre API-Version
Ihre SDK-Version aktualisieren
Essentials
SDKs
    Übersicht
    Serverseitige SDKs
    Mobile SDKs
    iOS SDK
    Android SDK
    React Native SDK
    Web-SDKs
    ES-Modul Stripe.js
    React Stripe.js
    Terminal-SDKs
    iOS SDK
    Android SDK
    React Native SDK
    Gemeinde
    Community-SDKs
    Mobile Migrationen
    Zu iOS SDK 24 migrieren
    Zu Android SDK 21 migrieren
API
Tests
Stripe-CLI
Beispiel-Projekte
Tools
Workbench
Entwickler-Dashboard
Stripe Shell
Stripe für Visual Studio Code
Funktionen
Arbeitsabläufe
Ereignisziele
Stripe-StatuswarnungenHochgeladene Dateien
KI-Lösungen
Agent-Toolkit
Model Context Protocol
Sicherheit und Datenschutz
Sicherheit
Stripebot web crawler
Datenschutz
Extend Stripe
Erstellen Sie Stripe-Apps
Verwenden Sie Apps von Stripe
Partner
Partner-Ecosystem
Partner-Zertifizierung
StartseiteEntwicklerressourcenSDKs

Dokumentation zu React Stripe.js

Erfahren Sie mehr über React-Komponenten für Stripe.js und Stripe Elements.

Der Programmcode

Wenn Sie wissen möchten, wie React Stripe.js funktioniert oder bei der Entwicklung helfen wollen, sehen Sie sich das Projekt auf GitHub an.

React Stripe.js ist ein schlanker Wrapper um Stripe Elements, mit dem Sie jeder React-App Elemente hinzufügen können.

Die Stripe deckt alle Details zur Anpassung von Elements ab.

Sie können Elements mit jedem Stripe-Produkt verwenden, um Online-Zahlungen einzuziehen. Lesen Sie unsere Dokumentation, um den richtigen Integrationspfad für Ihr Unternehmen zu finden.

Notiz

Diese Dokumentation bezieht sich auf die gesamte React Stripe.js API. Wenn Sie sich lieber anhand von praktischen Beispielen einen Überblick verschaffen möchten, lesen Sie unsere Dokumentation zum Annehmen einer Zahlung oder sehen Sie sich eine Beispielintegration an.

Bevor Sie loslegen

Diese Dokumentation setzt voraus, dass Sie bereits über grundlegende Kenntnisse von React verfügen und auch schon ein entsprechendes React-Projekt erstellt haben. Wenn Sie zum ersten Mal mit React arbeiten, empfehlen wir Ihnen, sich zunächst den Leitfaden Getting Started anzusehen.

Einrichtung

Installieren Sie React Stripe.js und den Stripe.js-Loader aus dem öffentlichen npm-Register.

Command Line
npm install --save @stripe/react-stripe-js @stripe/stripe-js

Elements-Provider

Der Elements-Provider ermöglicht Ihnen die Verwendung von Element-Komponenten und den Zugriff auf das Stripe-Objekt in einer beliebigen verschachtelten Komponente. Rendern Sie einen Elements-Provider im Stammverzeichnis Ihrer React-App, damit er Ihnen bei Bedarf zur Verfügung steht.

Um den Elements-Provider zu verwenden, rufen Sie mit Ihrem veröffentlichbaren Schlüssel loadStripe von @stripe/stripe-js auf. Die Funktion loadStripe lädt asynchron das Stripe.js-Skript und initialisiert ein Stripe-Objekt. Übergeben Sie das zurückgegebene Promise an Elements.

index.jsx
import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
); export default function App() { const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', }; return ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); };
EigenschaftBeschreibung

stripe

erforderlich Stripe | null | Promise<Stripe | null>

Ein Stripe-Objekt oder ein Promise, das in ein Stripe-Objekt aufgelöst wird. Am leichtesten lässt sich ein Stripe-Objekt mit dem Wrapper-Modul von Stripe.js initialisieren. Nachdem Sie diese Eigenschaft festgelegt haben, kann sie nicht mehr geändert werden.

Sie können auch null oder ein Promise übergeben, das in null aufgelöst wird, wenn Sie zum ersten Mal serverseitig rendern oder eine statische Website erstellen.

options

optional Object

Optionale Konfigurationsoptionen von Elements. Weitere Informationen finden Sie in den verfügbaren Optionen. Um Payment Elements zu erstellen, müssen Sie das clientSecret des Intents einschließen, es sei denn, Sie rendern das Element vor Erstellung des Intents.

Da Eigenschaften unveränderlich sind, können Sie dieoptions nach dem Festlegen nicht mehr ändern. Sie können jedoch das Erscheinungsbild eines Elements ändern, indem Sie die Methode elements.update aufrufen.

Element-Komponenten

Mit Element-Komponenten können Sie Zahlungsinformationen flexibel und sicher in Ihrer React-App erfassen.

Sie können einzelne Element-Komponenten innerhalb Ihrer Elements-Baumstruktur einbinden. Beachten Sie, dass Sie nur jeweils einen Element-Typ in einer einzelnen <Elements>-Gruppe einbinden können.

CheckoutForm.jsx
import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return ( <form> <PaymentElement /> <button>Submit</button> </form> ); }; export default CheckoutForm;
EigenschaftBeschreibung

id

optional string

Wird an den Element-Container übergeben.

className

optional string

Wird an den Element-Container übergeben.

options

optional Object

Ein Objekt, das Element-Konfigurationsoptionen enthält. Weitere Informationen finden Sie in den verfügbaren Optionen für das Payment Element oder den verfügbaren Optionen für die individuelle Zahlungsmethode Elements.

onBlur

optional () => void

Wird ausgelöst, wenn das Element seinen Fokus verliert.

onChange

optional (event: Object) => void

Wird ausgelöst, wenn die von diesem Element bereitgestellten Daten geändert werden (zum Beispiel wenn ein Fehler auftritt).

Weitere Informationen finden Sie in der Referenz für Stripe.js.

onClick

optional (event: Object) => void

Wird beim Anklicken durch <PaymentRequestButtonElement> ausgelöst.

Weitere Informationen finden Sie in der Referenz für Stripe.js.

onEscape

optional (event: Object) => void

Wird ausgelöst, wenn die Escape-Taste innerhalb eines Elements gedrückt wird.

Weitere Informationen finden Sie in der Referenz für Stripe.js.

onFocus

optional () => void

Wird ausgelöst, wenn das Element seinen Fokus erhält.

onLoaderror

optional (event: Object) => void

Wird ausgelöst, wenn das Element nicht geladen wird.

Sie erhalten diese Ereignisse nur von den Elementen payment, linkAuthentication, address und expressCheckout.

Weitere Informationen finden Sie in der Referenz für Stripe.js.

onLoaderStart

optional (event: Object) => void

Wird ausgelöst, wenn die Nutzeroberfläche des Loaders mit dem Dom verbunden wird und zur Anzeige bereit ist.

Sie erhalten diese Ereignisse nur von den Elementen payment, linkAuthentication und address.

Weitere Informationen finden Sie in der Referenz für Stripe.js.

onReady

optional (element: Element) => void

Wird ausgelöst, wenn das Element vollständig gerendert ist und notwendige Aufrufe von element.focus() akzeptieren kann. Der Aufruf erfolgt mit einem Verweis auf die zugrunde liegende Element-Instanz.

Verfügbare Element-Komponenten

Es gibt mehrere Arten von Elementen, die für die Erfassung verschiedener Zahlungsinformationen geeignet sind. Folgende Elemente sind derzeit verfügbar:

KomponenteNutzung
AddressElementErfasst Adressdaten für mehr als 236 regionale Formate. Weitere Informationen finden Sie in der Dokumentation zum Address Element.
AfterpayClearpayMessageElementZeigt Ratenzahlungsinformationen für Afterpay-Zahlungen an.
AuBankAccountElementErfasst australische Bankkontodaten (BSB und Kontonummer) zur Verwendung mit BECS-Lastschriftzahlungen.
CardCvcElementErfasst die Prüfziffer der Karte.
CardElementFlexible einzeilige Eingabe, die alle notwendigen Kartenangaben erfasst.
CardExpiryElementErfasst das Ablaufdatum der Karte.
CardNumberElementErfasst die Kartennummer.
ExpressCheckoutElementDamit können Sie Zahlungen per Karte oder Geldbörse über eine oder mehrere Zahlungsschaltflächen annehmen, einschließlich Apple Pay, Google Pay, Link oder PayPal. Weitere Informationen finden Sie in der Dokumentation zu Express Checkout Element.
FpxBankElementBank der Kundin/des Kunden zur Verwendung mit FPX-Zahlungen.
IbanElementInternational Bank Account Number (IBAN). Verfügbar für SEPA-Länder.
IdealBankElementBank der Kundin/des Kunden zur Verwendung mit iDEAL-Zahlungen.
LinkAuthenticationElementErfasst E-Mail-Adressen und ermöglicht Nutzer/innen, sich bei Link anzumelden. Weitere Informationen finden Sie in der Dokumentation zum Link Authentication Element.
PaymentElementErfasst Zahlungsdaten für mehr als 25 Zahlungsmethoden weltweit. Weitere Informationen finden Sie in der Dokumentation zum Payment Element.
PaymentRequestButtonElementAll-in-One-Schaltfläche zum Bezahlen, die entweder von Apple Pay oder der Payment Request API unterstützt wird. Weitere Informationen finden Sie in der Dokumentation zur Schaltfläche für die Zahlungsanfrage.

useElements-Hook

useElements(): Elements | null

Um die vom Payment Element gesammelten Zahlungsinformationen sicher an die Stripe-API zu übergeben, rufen Sie die Elements-Instanz auf, um sie mit stripe.confirmPayment zu verwenden. Wenn Sie die React Hooks API verwenden, ist useElements der empfohlene Weg, um auf ein verbundenes Element zuzugreifen. Wenn Sie von einer Klassenkomponente aus auf ein Element zugreifen müssen, verwenden Sie stattdessen ElementsConsumer.

Notiz

Wenn Sie ein Promise an den Elements-Provider übergeben und das Promise noch nicht aufgelöst wurde, gibt useElements null zurück.

CheckoutForm.jsx
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button disabled={!stripe}>Submit</button> </form> ) }; export default CheckoutForm;

useStripe-Hook

useStripe(): Stripe | null

Der Hook useStripe gibt einen Verweis auf die Stripe-Instanz zurück, die an den Elements-Provider übergeben wurde. Wenn Sie über eine Klassenkomponente auf das Stripe-Objekt zugreifen müssen, verwenden Sie stattdessen ElementsConsumer.

Notiz

Wenn Sie ein Promise an den Elements-Provider übergeben und das Promise noch nicht aufgelöst wurde, gibt useStripe null zurück.

CheckoutForm.jsx
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button disabled={!stripe}>Submit</button> </form> ) }; export default CheckoutForm;

ElementsConsumer

Um die vom Payment Element erfassten Zahlungsinformationen sicher an die Stripe-API zu übergeben, rufen Sie die Elements-Instanz auf, um sie mit stripe.confirmPayment verwenden zu können. Wenn Sie auf das Stripe-Objekt oder ein Element von einer Klassenkomponente aus zugreifen müssen, bietet ElementsConsumer eine Alternative zu den Hooks useElements und useStripe.

CheckoutForm.jsx
import {ElementsConsumer, PaymentElement} from '@stripe/react-stripe-js'; class CheckoutForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props; if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.error) { // Show error to your customer (for example, payment details incomplete) console.log(result.error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; render() { return ( <form onSubmit={this.handleSubmit}> <PaymentElement /> <button disabled={!this.props.stripe}>Submit</button> </form> ); } } export default function InjectedCheckoutForm() { return ( <ElementsConsumer> {({stripe, elements}) => ( <CheckoutForm stripe={stripe} elements={elements} /> )} </ElementsConsumer> ) }
EigenschaftBeschreibung

children

erforderlich ({elements, stripe}) => ReactNode

Diese Komponente hat eine untergeordnete Funktion. Die von Ihnen bereitgestellte Funktion wird mit dem Elements-Objekt, das Ihre Element-Komponenten verwaltet, und dem Stripe-Objekt, das Sie an <Elements> übergeben haben, aufgerufen.

Wenn Sie ein Promise an den Elements-Provider übergeben und das Promise noch nicht aufgelöst wurde, haben stripe und elements den Wert null.

Anpassung und Design

Wozu dienen iFrames?

Auch wenn iFrames das Festlegen eines Stils für ein Element erschweren, können sie die Verantwortung für den sicheren Umgang mit Zahlungsdaten auf Stripe verlagern und Ihrer Website helfen, die branchenspezifischen Vorschriften einzuhalten.

Jedes Element ist in einem iframe eingebunden, was bedeutet, dass Elements wahrscheinlich nicht mit Ihren vorhandenen Stil- und Komponenten-Frameworks funktioniert. Trotzdem können Sie Elements so konfigurieren, dass es zum Design Ihrer Website passt. Das Anpassen von Elements umfasst das Reagieren auf Ereignisse und das Konfigurieren von Elements mit der Option Erscheinungsbild. Das Layout jedes Elements bleibt einheitlich, Sie können jedoch u. a. Farben, Schriftarten, Ränder und Abstände ändern.

Kundenstandort
Größe
Design
Layout
Diese Demo zeigt Google Pay oder Apple Pay nur dann an, wenn Sie über eine aktive Karte mit einer der beiden Wallets verfügen.

Nächste Schritte

Erstellen Sie eine Integration mit React Stripe.js und Elements.

  • Zahlung annehmen
  • Akzeptieren einer Zahlung mit dem Express Checkout Element
  • Hinzufügen der Schaltfläche für Zahlung
  • Weitere Informationen zur Elements Appearance API
  • Stripe.js reference
War diese Seite hilfreich?
JaNein
  • Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
  • Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
  • Schauen Sie sich unser Änderungsprotokoll an.
  • Fragen? Sales-Team kontaktieren.
  • LLM? Lesen Sie llms.txt.
  • Unterstützt von Markdoc