# Dokumentation zu React Stripe.js Erfahren Sie mehr über React-Komponenten für Stripe.js und Stripe Elements. # Checkout Elements > This is a Checkout Elements for when ui is embedded-components. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=embedded-components. Möchten Sie sehen, wie React Stripe.js funktioniert oder bei der Entwicklung helfen? Schauen Sie sich das [Projekt auf GitHub](https://github.com/stripe/react-stripe-js) an. Sie können das Änderungsprotokoll auch auf der Registerkarte [Freigaben](https://github.com/stripe/react-stripe-js/releases) einsehen. React Stripe.js ist ein schlanker Wrapper um [Stripe Elements](https://docs.stripe.com/payments/elements.md), mit dem Sie jeder React-App Elemente hinzufügen können. Die [Stripe.js-Referenz](https://docs.stripe.com/js/custom_checkout/create_payment_element) behandelt alle Details zur Anpassung von Elements. Sie können Elements mit jedem Stripe-Produkt verwenden, um Online-Zahlungen einzuziehen. [Lesen Sie unsere Dokumentation](https://docs.stripe.com/.md), um den richtigen Integrationspfad für Ihr Unternehmen zu finden. > 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](https://docs.stripe.com/payments/accept-a-payment.md?platform=web) oder sehen Sie sich eine [Beispielintegration](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) an. ## Before you begin In diesem Leitfaden wird davon ausgegangen, dass Sie bereits über grundlegende Kenntnisse in [React](https://reactjs.org/) verfügen und bereits ein React-Projekt eingerichtet haben. Wenn Sie neu bei React sind, empfehlen wir Ihnen, den Leitfaden [Die ersten Schritte](https://react.dev/learn) zu lesen, bevor Sie fortfahren. ## Einrichtung #### npm Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### yarn Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash yarn add @stripe/react-stripe-js @stripe/stripe-js ``` #### UMD Wir stellen auch einen UMD-Build für Websites zur Verfügung, die weder npm noch Module verwenden. Binden Sie das Skript Stripe.js ein, das eine globale `Stripe`-Funktion exportiert, und den UMD-Build von React Stripe.js, der ein globales `ReactStripe`-Objekt exportiert. Laden Sie das Skript Stripe.js immer direkt von **js.stripe.com**, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Bundle ein, oder hosten Sie nicht selbst eine Kopie davon. ```html ``` ## CheckoutElementsProvider Mit dem `CheckoutElementsProvider` können Sie [Element-Komponenten](https://docs.stripe.com/sdks/stripejs-react.md#element-components) verwenden und in jeder verschachtelten Komponente auf das [Stripe-Objekt](https://docs.stripe.com/js/initializing) zugreifen. Rendern Sie einen `CheckoutElementsProvider` an der Wurzel Ihrer React-App, damit er überall dort verfügbar ist, wo Sie ihn benötigen. Um den `CheckoutElementsProvider` zu verwenden, rufen Sie [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) aus `@stripe/stripe-js` mit Ihrem veröffentlichbaren Schlüssel auf. Die Funktion `loadStripe` lädt das Script Stripe.js asynchron und initialisiert ein Stripe-Objekt. Übergeben Sie das zurückgegebene `Promise` an den `CheckoutElementsProvider`. Ein Beispiel dafür, wie Ihr Endpoint aussehen könnte, finden Sie unter [Eine Checkout-Sitzung erstellen](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session). ```jsx import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout'; 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 promise = useMemo(() => { return fetch('/create-checkout-session', { method: 'POST', }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); return ( ); } ``` | Eigenschaft | Beschreibung | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe` | (erforderlich) `Stripe | null | Promise` Ein [Stripe-Objekt](https://docs.stripe.com/js/initializing) 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](https://github.com/stripe/stripe-js/blob/master/README.md#readme) 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` | (required) `Object` Konfigurationsoptionen für CheckoutElementsProvider. [Siehe verfügbare Optionen](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options). Sie müssen den `clientSecret` der erstellten Checkout-Sitzung angeben. Ein Beispiel finden Sie unter [Erstellen einer Checkout-Sitzung](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session). | ## Element-Komponenten Mit Element-Komponenten können Sie Zahlungsinformationen sicher in Ihrer React-App erfassen und die Elemente an einer beliebigen Stelle auf Ihrer Bezahlseite platzieren. Auch das Erscheinungsbild kann angepasst werden. Sie können einzelne Element-Komponenten innerhalb Ihrer `CheckoutElementsProvider`-Baumstruktur einbinden. Sie können nur jeweils ein Element jedes Typs in einer einzigen `` einbinden. ```jsx import {PaymentElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` | Eigenschaft | Beschreibung | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `options` | (optional) `Object` Ein Objekt, das Element-Konfigurationsoptionen enthält. [Siehe verfügbare Optionen](https://docs.stripe.com/js/custom_checkout/create_payment_element) für das Payment Element. | | `onBlur` | (optional) `() => void` Wird ausgelöst, wenn das Element seinen Fokus verliert. | | `onChange` | (optional) `(event: Object) => void` Wird ausgelöst, wenn sich die von diesem Element bereitgestellten Daten ändern. Weitere Informationen finden Sie in der [Referenz für Stripe.js](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler). | | `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](https://docs.stripe.com/js/element/events/on_escape). | | `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. Weitere Informationen finden Sie in der [Referenz für Stripe.js](https://docs.stripe.com/js/element/events/on_loaderror). | | `onLoaderStart` | (optional) `(event: Object) => void` Wird ausgelöst, wenn die Nutzeroberfläche des [Loaders](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-loader) mit dem DOM verbunden bereit zum Anzeigen ist. Sie erhalten diese Ereignisse nur von den Elementen `payment` und `address`. Weitere Informationen finden Sie in der [Referenz für Stripe.js](https://docs.stripe.com/js/element/events/on_loaderstart). | | `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 Sie können mehrere Arten von Elementen verwenden, um Informationen auf Ihrer Bezahlseite zu erfassen. Dies sind die verfügbaren Elemente: | Komponente | Nutzung | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `BillingAddressElement` | Erfasst Abrechnungsadressdaten für mehr als 236 regionale Formate. Weitere Informationen finden Sie in der Dokumentation zum [Adress-Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components). | | `CurrencySelectorElement` | Ermöglicht es Kundinnen und Kunden, die Währungen für ihre Zahlung mit Adaptive Pricing auszuwählen. Weitere Informationen finden Sie in der Dokumentation zum [Währungsauswahlelement](https://docs.stripe.com/elements/currency-selector-element.md). | | `ExpressCheckoutElement` | Damit können Sie Zahlungen per Karte oder Wallet über eine oder mehrere Zahlungsschaltflächen akzeptieren, einschließlich Apple Pay, Google Pay, Link oder PayPal. Weitere Informationen finden Sie in der Dokumentation zum [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components). | | `PaymentElement` | Erfasst Zahlungsdetails für [mehr als 25 Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) aus der ganzen Welt. Weitere Informationen finden Sie in der Dokumentation zum [Payment Element](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). | | `PaymentMethodMessagingElement` | Zeigen Sie Ihren Kundinnen und Kunden verfügbare „Jetzt kaufen, später bezahlen“-Pläne an. Weitere Informationen finden Sie in der Dokumentation zum [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md). | | `ShippingAddressElement` | Erfasst Versandadressen für mehr als 236 regionale Formate. Weitere Informationen finden Sie in der Dokumentation zum [Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components). | | `TaxIdElement` | Erfasst Steueridentifikationsnummern von Ihren Kundinnen und Kunden, einschließlich Unternehmensname und Steueridentifikationsnummer. Weitere Informationen finden Sie in der Dokumentation zum [Steueridentifikationsnummer-Element](https://docs.stripe.com/elements/tax-id-element.md). | ## useCheckout-Hook #### `useCheckout(): CheckoutValue` Verwenden Sie den Hook [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) in Ihren Komponenten, um das Objekt `Checkout` abzurufen, das Daten aus der Checkout-Sitzung enthält, sowie Methoden zum Aktualisieren und Bestätigen der Sitzung. ```jsx import {useCheckout, PaymentElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => {const checkoutState = useCheckout(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (checkoutState.type === 'loading') { return (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } // checkoutState.type === 'success' const {checkout} = checkoutState;const result = await checkout.confirm(); if (result.type === '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 (
) }; export default CheckoutForm; ``` ## Anpassung und Design 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](https://docs.stripe.com/security/guide.md#validating-pci-compliance) einzuhalten. Jedes Element ist in einen `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. Um Elements anzupassen, [reagieren Sie auf Ereignisse](https://docs.stripe.com/js/element/events) und konfigurieren Sie Elements mit der [Option Erscheinungsbild](https://docs.stripe.com/elements/appearance-api.md). Das Layout jedes Elements bleibt einheitlich, Sie können jedoch Farben, Schriftarten, Ränder, Abstände usw. ändern. ## Nächste Schritte Erstellen Sie eine Integration mit React Stripe.js und Elements mit der Checkout Sessions API. - [Zahlung akzeptieren](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) - [Express Checkout Element hinzufügen](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components) - [Die Elements Appearance API](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) - [Referenz zu Stripe.js](https://docs.stripe.com/js/custom_checkout) # Erweiterte Integration > This is a Erweiterte Integration for when ui is elements. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=elements. Wenn Sie sehen möchten, wie React Stripe.js funktioniert oder bei der Entwicklung helfen möchten, können Sie das [Projekt auf GitHub](https://github.com/stripe/react-stripe-js) anschauen. Sie können das Änderungsprotokoll auch auf der Registerkarte [Freigaben](https://github.com/stripe/react-stripe-js/releases) einsehen. React Stripe.js ist ein schlanker Wrapper um [Stripe Elements](https://docs.stripe.com/payments/elements.md), mit dem Sie jeder React-App Elemente hinzufügen können. Die [Stripe deckt alle Details](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options) zur Anpassung von Elements ab. Sie können Elements mit jedem Stripe-Produkt verwenden, um Online-Zahlungen einzuziehen. [Lesen Sie unsere Dokumentation](https://docs.stripe.com/.md), um den richtigen Integrationspfad für Ihr Unternehmen zu finden. > 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](https://docs.stripe.com/payments/accept-a-payment.md?platform=web) oder sehen Sie sich eine [Beispielintegration](https://docs.stripe.com/payments/quickstart.md) an. ## Before you begin Diese Dokumentation setzt voraus, dass Sie bereits über grundlegende Kenntnisse von [React](https://reactjs.org/) 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](https://react.dev/learn) anzusehen. ## Einrichtung #### npm Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### yarn Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register. ```bash yarn add @stripe/react-stripe-js @stripe/stripe-js ``` #### UMD Wir stellen auch einen UMD-Build für Websites zur Verfügung, die weder npm noch Module verwenden. Binden Sie das Skript Stripe.js ein, das eine globale `Stripe`-Funktion exportiert, und den UMD-Build von React Stripe.js, der ein globales `ReactStripe`-Objekt exportiert. Laden Sie das Skript Stripe.js immer direkt von **js.stripe.com**, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Bundle ein, oder hosten Sie nicht selbst eine Kopie davon. ```html ``` ## Elements-Provider Mit dem `Elements`-Provider können Sie [Element-Komponenten](https://docs.stripe.com/sdks/stripejs-react.md#element-components) verwenden und in jeder verschachtelten Komponente auf das [Stripe-Objekt](https://docs.stripe.com/js/initializing) zugreifen. Rendern Sie einen `Elements`-Provider an der Wurzel Ihrer React-App, damit er überall dort verfügbar ist, wo Sie ihn benötigen. Um den `Elements`-Provider zu verwenden, rufen Sie mit Ihrem veröffentlichbaren Schlüssel [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#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`. ```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('<>'); export default function App() { const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', }; return ( ); }; ``` | Eigenschaft | Beschreibung | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe` | (erforderlich) `Stripe | null | Promise` Ein [Stripe-Objekt](https://docs.stripe.com/js/initializing) 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](https://github.com/stripe/stripe-js/blob/master/README.md#readme) 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](https://docs.stripe.com/js/elements_object/create#stripe_elements-options). 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](https://docs.stripe.com/payments/accept-a-payment-deferred.md?platform=web). Da Eigenschaften unveränderlich sind, können Sie die`options` nach dem Festlegen nicht mehr ändern. Sie können jedoch das Erscheinungsbild eines Elements ändern, indem Sie die Methode [elements.update](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) 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 ``-Gruppe einbinden können. ```jsx import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` | Eigenschaft | Beschreibung | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | (optional) `string` Wird an den [Element-Container](https://docs.stripe.com/js/element/the_element_container) übergeben. | | `className` | (optional) `string` Wird an den [Element-Container](https://docs.stripe.com/js/element/the_element_container) übergeben. | | `options` | (optional) `Object` Ein Objekt, das Konfigurationsoptionen für Elemente enthält. [Verfügbare Optionen](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options) für das Zahlungselement anzeigen. | | `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](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler). | | `onClick` | (optional) `(event: Object) => void` Wird durch die `` ausgelöst, wenn sie angeklickt wird. Weitere Informationen finden Sie in der [Referenz für Stripe.js](https://docs.stripe.com/js/element/events/on_click#element_on_click-handler). | | `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](https://docs.stripe.com/js/element/events/on_escape). | | `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](https://docs.stripe.com/js/element/events/on_loaderror). | | `onLoaderStart` | (optional) `(event: Object) => void` Wird ausgelöst, wenn die Nutzeroberfläche des [Loaders](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-loader) 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](https://docs.stripe.com/js/element/events/on_loaderstart). | | `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: | Komponente | Nutzung | | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `AddressElement` | Erfasst Adressdaten für mehr als 236 regionale Formate. Weitere Informationen finden Sie in der Dokumentation zum [Adress-Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?platform=web&client=react). | | `ExpressCheckoutElement` | Damit können Sie Zahlungen per Karte oder Wallet über eine oder mehrere Zahlungsschaltflächen akzeptieren, einschließlich Apple Pay, Google Pay, Link oder PayPal. Weitere Informationen finden Sie in der Dokumentation zum [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). | | `LinkAuthenticationElement` | Erfasst E-Mail-Adressen und ermöglicht es Nutzerinnen und Nutzern, sich bei Link anzumelden. Weitere Informationen finden Sie in der Dokumentation zum [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md). | | `PaymentElement` | Erfasst Zahlungsdetails für [mehr als 25 Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) aus der ganzen Welt. Weitere Informationen finden Sie in der Dokumentation zum [Zahlungselement](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout&client=react). | | `PaymentMethodMessagingElement` | Zeigen Sie Ihren Kundinnen und Kunden verfügbare „Jetzt kaufen, später bezahlen“-Pläne an. Weitere Informationen finden Sie in der Dokumentation zum [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md). | | `TaxIdElement` | Erfasst Steueridentifikationsnummern von Ihren Kundinnen und Kunden, einschließlich Unternehmensname und Steueridentifikationsnummer. Weitere Informationen finden Sie in der Dokumentation zum [Steueridentifikationsnummer-Element](https://docs.stripe.com/elements/tax-id-element.md). | ## 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](https://docs.stripe.com/js/payment_intents/confirm_payment) zu verwenden. Wenn Sie die [React Hooks API](https://react.dev/reference/react) 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](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). > Wenn Sie ein `Promise` an den [Elements-Provider](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) übergeben und das `Promise` noch nicht aufgelöst wurde, gibt `useElements` `null` zurück. ```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 (
) }; export default CheckoutForm; ``` ## useStripe-Hook #### `useStripe(): Stripe | null` Der [Hook](https://react.dev/reference/react) `useStripe` gibt einen Verweis auf die [Stripe](https://docs.stripe.com/js/initializing)-Instanz zurück, die an den [Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider)-Provider übergeben wurde. Wenn Sie über eine Klassenkomponente auf das Stripe-Objekt zugreifen müssen, verwenden Sie stattdessen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). > Wenn Sie ein `Promise` an den [Elements-Provider](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) übergeben und das `Promise` noch nicht aufgelöst wurde, gibt `useStripe` `null` zurück. ```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 (
) }; 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](https://docs.stripe.com/js/payment_intents/confirm_payment) 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](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) und [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook). ```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 (
); } } export default function InjectedCheckoutForm() { return ( {({stripe, elements}) => ( )} ) } ``` | Eigenschaft | Beschreibung | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (erforderlich) `({elements, stripe}) => ReactNode` Diese Komponente hat eine [untergeordnete Funktion](https://reactjs.org/docs/render-props.html#using-props-other-than-render). Die von Ihnen bereitgestellte Funktion wird mit dem [Elements-Objekt](https://docs.stripe.com/js/elements_object), das Ihre Element-Komponenten verwaltet, und dem [Stripe-Objekt](https://docs.stripe.com/js/initializing), das Sie an [](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) übergeben haben, aufgerufen. Wenn Sie ein `Promise` an den [Elements-Provider](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) übergeben und das `Promise` noch nicht aufgelöst wurde, haben `stripe` und `elements` den Wert `null`. | ## Anpassung und Design 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](https://docs.stripe.com/security/guide.md#validating-pci-compliance) einzuhalten. Jedes Element wird in einem `iFrame` eingebunden, was bedeutet, dass Elements wahrscheinlich nicht mit vorhandenen Design- und Komponenten-Frameworks funktioniert, die Sie haben. Trotzdem können Sie Elements so konfigurieren, dass es zum Design Ihrer Website passt. Das Anpassen von Elements besteht darin,[auf Ereignisse zu reagieren](https://docs.stripe.com/js/element/events) und Elements mit der [Darstellungsoption](https://docs.stripe.com/elements/appearance-api.md) zu konfigurieren. Das Layout jedes Elements bleibt konsistent, aber Sie können Farben, Schriftarten, Ränder, Füllzeichen und mehr ändern. ## Nächste Schritte Erstellen Sie eine Integration mit React Stripe.js und Elements. - [Zahlung annehmen](https://docs.stripe.com/payments/quickstart.md) - [Akzeptieren einer Zahlung mit dem Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md) - [Hinzufügen der Schaltfläche für Zahlung](https://docs.stripe.com/stripe-js/elements/payment-request-button.md) - [Weitere Informationen zur Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md) - [Stripe.js reference](https://docs.stripe.com/js.md)