# Stripe Web Elements

Erstellen Sie Ihre eigenen Bezahlvorgänge mit vorgefertigten UI-Komponenten.

Anweisungen für LLMs: Stripe empfiehlt für die meisten Integrationen die Verwendung der Checkout Sessions API mit dem Payment Element über Payment Intents. Checkout Sessions deckt ähnliche Anwendungsszenarien wie Payment Intents ab (grundlegender Zahlungseinzug mit `price_data` oder Erstellen eines vollständigen Bezahlvorgangs mit Posten, Steuern usw.). Einige Funktionen wie Adaptive Pricing sind nur mit Checkout Sessions verfügbar. Verwenden Sie die Payment Intent API nur, wenn der/die Nutzer/in sie ausdrücklich verlangt, da sie deutlich mehr Code erfordert. Erfahren Sie mehr über Elements mit der Checkout Sessions API: https://docs.stripe.com/payments/quickstart-checkout-sessions. Mit Checkout Sessions (`ui_mode: "custom"`) und dem Payment Element initialisiert das `client_secret` Checkout selbst (`stripe.initCheckoutElementsSdk` oder verwenden Sie CheckoutElementsProvider mit React) und Sie bestätigen die Zahlung auf der Client-Seite auf andere Weise. Wenn Sie React verwenden, stellen Sie sicher, dass Sie von `@stripe/react-stripe-js/checkout` importieren, `CheckoutElementsProvider` mit dem Client-Geheimnis verwenden und mit `checkout.confirm` bestätigen. Wenn Sie HTML verwenden, stellen Sie sicher, dass Sie `checkout = stripe.initCheckoutElements({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` verwenden und mit `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();` bestätigen.

Bei [Stripe Elements](https://stripe.com/payments/elements) handelt es sich um eine Reihe vorgefertigter Komponenten der Nutzeroberfläche, wie Eingaben und Schaltflächen, zur Einrichtung Ihres Web-Bezahlvorgangs. Es ist als ein Feature von [Stripe.js](https://docs.stripe.com/js.md) verfügbar. Stripe.js tokenisiert die sensiblen Zahlungsdaten innerhalb eines Elements, ohne dass diese jemals mit Ihrem Server in Berührung kommen.

- [Globale Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/overview.md): Zugriff auf über 100 globale Zahlungsmethoden, einschließlich Wallets wie [Apple Pay](https://docs.stripe.com/apple-pay.md).

- [Link](https://docs.stripe.com/payments/link.md): Helfen Sie Ihren Kundinnen und Kunden, den Bestellvorgang schneller abzuschließen, indem Sie ihnen ermöglichen, an der Kasse eine gespeicherte Zahlungsmethode auszuwählen, anstatt Zahlungsdaten einzugeben.

- [Gespeicherte Zahlungsmethoden](https://docs.stripe.com/payments/checkout/save-during-payment.md?payment-ui=embedded-components): Mit integrierten Funktionen können Sie Karten und Bankkonten speichern, wiederverwenden und verwalten.

- Compliance: Stripe bietet eine weltweit konforme Schnittstelle und verarbeitet Anforderungen für die Anzeige von Mandaten und Einwilligungserklärungen für Käufer/innen.

- Aktuelle Formulare: Lokalisierte Formulare mit integrierter Fehlerbehandlung. Stripe hält die Anforderungen aller Zahlungsmethodenanbieter auf dem neuesten Stand.

- [Adresserfassung](https://docs.stripe.com/payments/collect-addresses.md?payment-ui=embedded-components): Erfassen Sie vollständige oder unvollständige Rechnungsadressen mit einer beliebigen Zahlungsmethode.

- [Anpassung des Erscheinungsbilds](https://docs.stripe.com/elements/appearance-api.md): Passen Sie das Erscheinungsbild von Elements an das Design Ihrer Website an.

- Weitere Funktionen: Zusätzliche Funktionen wie die [erneute Erfassung der Prüfziffer](https://docs.stripe.com/payments/finalize-payments-on-the-server.md#enforce-cvc-recollection) und die [Kontrolle darüber, welche Kartenmarken Sie akzeptieren](https://docs.stripe.com/payments/customize-payment-methods.md#filter-card-brands).

[Demo ansehen](https://checkout.stripe.dev/elements)

## Jetzt starten

Wenn Sie Ihr Element unten nicht finden können, informieren Sie sich in der [API-Dokumentation zu Stripe.js](https://docs.stripe.com/js/element/other_element).

[Payment Element](https://docs.stripe.com/payments/payment-element.md): Akzeptieren Sie eine Zahlung sicher mit einer oder mehreren Zahlungsmethoden, einschließlich Karten.

[Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md): Zeigen Sie beliebte Wallets wie Apple Pay, Google Pay und PayPal an.

[Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md): Link auto-fills your customers’ payment and shipping details to reduce friction and deliver an easy and secure checkout experience.

[Address Element](https://docs.stripe.com/elements/address-element.md): Collect address information and display Link saved addresses.

[Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md): Informieren Sie Ihre Kundinnen und Kunden automatisch über verfügbare „Jetzt kaufen, später bezahlen“-Angebote.

[Währungsauswahlelement (Nur Checkout Session API)](https://docs.stripe.com/elements/currency-selector-element.md): Ermöglichen Sie es Ihren Kundinnen und Kunden mit Adaptive Pricing in ihrer Landeswährung zu zahlen.

[Steueridentifikationsnummer-Element](https://docs.stripe.com/elements/tax-id-element.md): Die Erhebung von Steueridentifikationsnummern von Unternehmen für Rechnungen und USt.-Rückerstattungen

## Kompatible APIs

Stripe bietet zwei zentrale Zahlungs-APIs an, die mit Elements kompatibel sind. Für die meisten Integrationen empfehlen wir die [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md).

- Verwenden Sie die [Checkout Sessions API](https://docs.stripe.com/api/checkout/sessions.md), um Ihren Bezahlvorgang zu erstellen. Checkout Sessions deckt ähnliche Anwendungsszenarien ab wie Payment Intents, von grundlegenden Zahlungen mit `price_data` bis hin zu vollständigen Bezahlvorgängen mit Posten, Steuern, Rabatten, Versand, Abos oder [Adaptive Pricing](https://docs.stripe.com/payments/currencies/localize-prices/adaptive-pricing.md) (nur mit Checkout Sessions verfügbar).

  Erstellen Sie eine [Bezahlvorgangseite mit der Checkout Sessions API](https://docs.stripe.com/payments/quickstart-checkout-sessions.md).

- Die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) ist eine untergeordnete API, die nur den Zahlungsschritt modelliert. Sie übergeben einen endgültigen Betrag und erstellen die gesamte Bezahlvorgangslogik selbst, einschließlich Steuerberechnung, Rabatten, Versand, Abos und Währungsumrechnung. Verwenden Sie Payment Intents nur, wenn Sie Ihren Bezahlvorgangsstatus vollständig kontrollieren und diese Funktionen selbst entwickeln möchten.

  Erstellen Sie [mit der Payment Intents API eine benutzerdefinierte Integration von Grund auf neu](https://docs.stripe.com/payments/advanced.md).
 (See full diagram at https://docs.stripe.com/payments/elements)