Dokumentation zu React Stripe.js
Erfahren Sie mehr über React-Komponenten für Stripe.js und Stripe Elements.
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
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
.
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(
); 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> ); };'pk_test_TYooMQauvdEDq54NiTphI7jx'
Eigenschaft | Beschreibung |
---|---|
| erforderlich Ein Stripe-Objekt oder ein Sie können auch |
| optional Optionale Konfigurationsoptionen von Elements. Weitere Informationen finden Sie in den verfügbaren Optionen. Um Payment Elements zu erstellen, müssen Sie das Da Eigenschaften unveränderlich sind, können Sie die |
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.
import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return ( <form> <PaymentElement /> <button>Submit</button> </form> ); }; export default CheckoutForm;
Eigenschaft | Beschreibung |
---|---|
| optional Wird an den Element-Container übergeben. |
| optional Wird an den Element-Container übergeben. |
| optional 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. |
| optional Wird ausgelöst, wenn das Element seinen Fokus verliert. |
| optional 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. |
| optional Wird beim Anklicken durch Weitere Informationen finden Sie in der Referenz für Stripe.js. |
| optional Wird ausgelöst, wenn die Escape-Taste innerhalb eines Elements gedrückt wird. Weitere Informationen finden Sie in der Referenz für Stripe.js. |
| optional Wird ausgelöst, wenn das Element seinen Fokus erhält. |
| optional Wird ausgelöst, wenn das Element nicht geladen wird. Dieses Ereignis wird nur von den Elementen Weitere Informationen finden Sie in der Referenz für Stripe.js. |
| optional Wird ausgelöst, wenn die Nutzeroberfläche des Loaders mit dem Dom verbunden wird und zur Anzeige bereit ist. Dieses Ereignis wird nur von den Elementen Weitere Informationen finden Sie in der Referenz für Stripe.js. |
| optional Wird ausgelöst, wenn das Element vollständig gerendert ist und notwendige Aufrufe von |
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:
Komponente | Nutzung |
---|---|
AddressElement | Erfasst Adressdaten für mehr als 236 regionale Formate. Weitere Informationen finden Sie in der Dokumentation zum Address Element. |
AfterpayClearpayMessageElement | Zeigt Ratenzahlungsinformationen für Afterpay-Zahlungen an. |
AuBankAccountElement | Erfasst australische Bankkontodaten (BSB und Kontonummer) zur Verwendung mit BECS-Lastschriftzahlungen. |
CardCvcElement | Erfasst die Prüfziffer der Karte. |
CardElement | Flexible einzeilige Eingabe, die alle notwendigen Kartenangaben erfasst. |
CardExpiryElement | Erfasst das Ablaufdatum der Karte. |
CardNumberElement | Erfasst die Kartennummer. |
ExpressCheckoutElement | Damit 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. |
FpxBankElement | Bank der Kundin/des Kunden zur Verwendung mit FPX-Zahlungen. |
IbanElement | International Bank Account Number (IBAN). Verfügbar für SEPA-Länder. |
IdealBankElement | Bank der Kundin/des Kunden zur Verwendung mit iDEAL-Zahlungen. |
LinkAuthenticationElement | Erfasst E-Mail-Adressen und ermöglicht Nutzer/innen, sich bei Link anzumelden. Weitere Informationen finden Sie in der Dokumentation zum Link Authentication Element. |
PaymentElement | Erfasst Zahlungsdaten für mehr als 25 Zahlungsmethoden weltweit. Weitere Informationen finden Sie in der Dokumentation zum Payment Element. |
PaymentRequestButtonElement | All-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.
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.
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.
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> ) }
Eigenschaft | Beschreibung |
---|---|
| erforderlich 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 |
Anpassung und Design
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.
Nächste Schritte
Erstellen Sie eine Integration mit React Stripe.js und Elements.