# Nutzerdefinierte Bezahlseite erstellen, die Link enthält
Integrieren Sie Link mit dem Payment Element oder Link Authentication Element.
Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen.
In dieser Anleitung erfahren Sie, wie Sie Zahlungen mit [Link](https://docs.stripe.com/payments/link.md) über die [Payment Intents API](https://docs.stripe.com/api/payment_intents.md) und entweder das [Payment Element](https://docs.stripe.com/payments/payment-element.md) oder das [Link Authentication Element](https://docs.stripe.com/payments/elements/link-authentication-element.md) annehmen können.
Es gibt drei Möglichkeiten, um eine Kunden-E-Mail-Adresse für die Link-Authentifizierung und -Registrierung zu erfassen:
- **E-Mail-Adresse übermitteln:** Sie können mit [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) eine E-Mail-Adresse an das Payment Element übergeben. Wenn Sie die E-Mail-Adresse und/oder die Telefonnummer der Kundin/des Kunden bereits im Bezahlvorgang erfassen, empfehlen wir diesen Ansatz.
- **E-Mail-Adresse erfassen:** Sie können eine E-Mail-Adresse direkt im Payment Element erfassen. Wenn Sie die E-Mail-Adresse an keiner Stelle des Bezahlvorgangs erfassen, empfehlen wir diesen Ansatz.
- **Link Authentication Element:** Mit dem Link-Authentication Element können Sie ein einziges E-Mail-Eingabefeld erstellen, das sowohl zur Erfassung der E-Mail-Adresse als auch zur Link-Authentifizierung dient. Wir empfehlen diese Vorgehensweise, wenn Sie das [Address Element](https://docs.stripe.com/elements/address-element.md) verwenden.
Erfassen Sie eine Kunden-E-Mail-Adresse für die Authentifizierung oder Registrierung bei Link
## Stripe einrichten [Serverseitig]
[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:
#### Ruby
```bash
# Available as a gem
sudo gem install stripe
```
```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```
## PaymentIntent erstellen [Serverseitig]
Stripe verwendet ein [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.
Wenn Sie Kartendaten für die [spätere Verwendung mit Setup Intents](https://docs.stripe.com/payments/save-and-reuse.md) erfassen, listen Sie die Zahlungsmethoden bitte manuell auf, anstatt dynamische Zahlungsmethoden zu verwenden. Um Link ohne dynamische Zahlungsmethoden zu verwenden, passen Sie Ihre Integration so an, dass der Parameter `link` an `payment_method_types` übergeben wird.
Wenn Sie einen PaymentIntent erstellen, [bieten Sie Ihren Kunden oder Ihre Kundin dynamisch die relevantesten Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) mithilfe dynamischer Zahlungsmethoden an, darunter Link. Um dynamische Zahlungsmethoden zu verwenden, lassen Sie den Parameter `payment_method_types` weg. Optional können Sie auch `automatic_payment_methods` aktivieren.
> Wenn der Parameter `payment_method_types` in Ihrer Integration nicht festgelegt ist, werden einige Zahlungsmethoden automatisch aktiviert, einschließlich Karten und Wallets.
So fügen Sie Link mithilfe dynamischer Zahlungsmethoden zu Ihrer Elements-Integration hinzu:
1. Aktivieren Sie in den [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) in Ihrem Dashboard Link.
1. Wenn Sie über eine bestehende Integration verfügen, die Zahlungsmethoden manuell auflistet, entfernen Sie den Parameter [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types) aus Ihrer Integration.
### Client-Geheimnis abrufen
Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.
#### Einseitige Anwendung
Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:
#### Ruby
```ruby
get '/secret' do
intent = # ... Create or retrieve the PaymentIntent
{client_secret: intent.client_secret}.to_json
end
```
Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:
```javascript
(async () => {
const response = await fetch('/secret');
const {client_secret: clientSecret} = await response.json();
// Render the form using the clientSecret
})();
```
#### Serverseitiges Rendering
Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden.
Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab:
#### Ruby
```erb
```
```ruby
get '/checkout' do
@intent = # ... Fetch or create the PaymentIntent
erb :checkout
end
```
## E-Mail-Adressen von Kundinnen/Kunden erfassen
Link authentifiziert eine Kundin/einen Kunden anhand der E-Mail-Adresse. Je nach Bezahlvorgang haben Sie folgende Möglichkeiten: Eine E-Mail an das Payment Element übergeben, diese direkt im Zahlung Element erfassen oder das Link-Authentication Element verwenden. Stripe empfiehlt hier, eine Kunden-E-Mail-Adresse an das Payment Element zu übergeben, falls verfügbar.
#### E-Mail übermitteln
Falls *eine* der folgenden Voraussetzungen auf Sie zutrifft:
- Sie kennen die E-Mail-Adresse Ihres Kunden/Ihrer Kundin, bevor er/sie auf die Zahlungsseite gelangt (z. B. aus einem Kundenprofil).
- Sie müssen keine Versandadresse von Ihrem Kunden/Ihrer Kundin erfassen.
- Sie ziehen es vor, Ihr eigenes E-Mail-Eingabefeld zu verwenden, das Sie vor dem Zahlungsformular platzieren.
Integrieren Sie anschließend Link, indem Sie die Kunden-E-Mail-Adresse an das Payment Element übergeben. Dies beschleunigt den Bezahlvorgang, da der Authentifizierungsablauf von Link ausgelöst wird, sobald Ihre Kundin bzw. Ihr Kunde den Zahlungsschritt erreicht. Bei dieser Option wird ein einziges Element integriert: das Payment Element.
Link füllt die erfasste E-Mail-Adresse automatisch im Checkout-Formular aus, um den Bezahlvorgang zu beschleunigen
Link fordert bestehende Kundinnen und Kunden zur Authentifizierung auf
In diesem Ablauf erfassen Sie die E-Mail-Adresse in Ihrem eigenen Formularfeld, *bevor* die Kundin bzw. der Kunde den Zahlungsschritt erreicht und leiten die E-Mail-Adresse anschließend an das Payment Element weiter. Das Payment Element authentifiziert die Kundin bzw. der Kunde im Zahlungsschritt und zeigt entweder die im Link-Konto gespeicherten Zahlungsdaten der Kundin bzw. des Kunden an oder blendet nach Eingabe der Kartendaten das Formular zur Erstellung eines Link-Kontos ein. So sieht das aus:
Integration mit dem mithilfe des Link Authentication Element (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
Bei dieser Integrationsoption wird die Versandadresse der Kundin bzw. des Kunden nicht erfasst. Wenn Sie eine Versandadresse erfassen müssen, integrieren Sie Link mithilfe des Authentication Element, des Address Element und des Payment Element von Link.
#### E-Mail erfassen
Die Link -Authentifizierung im Payment Element ermöglicht es Ihren Kundinnen und Kunden, eine E-Mail-Adresse direkt im Payment Element einzugeben, ohne dass zusätzlicher Integrationsaufwand erforderlich ist.
In diesem Ablauf gibt Ihre Kundin bzw. Ihr Kunde ihre/seine E-Mail-Adresse ein und authentifiziert sich oder registriert sich direkt im Payment Element während des Bezahlvorgangs bei Link. Wenn sich eine Kundin bzw. ein Kunde noch nicht bei Link registriert hat und im Payment Element eine unterstützte Zahlungsmethode auswählt, wird sie/er aufgefordert, ihre/seine Daten über Link zu speichern. Bei bereits registrierten Kundinnen und Kunden füllt Link die Zahlungsinformationen automatisch aus.
#### Verwenden Sie das Link Authentication Element
Falls *eine* der folgenden Voraussetzungen auf Sie zutrifft:
- Sie benötigen eine einzige, optimierte Komponente für die Erfassung der E-Mail-Adresse und die Link-Authentifizierung.
- Sie müssen eine Versandadresse von Ihrem Kunden/Ihrer Kundin erfragen.
Verwenden Sie dann diesen Integrationsablauf, der diese Elements implementiert: das Link Authentication Element, das Payment Element und optional das Address Element.
Bei -fähigen Bezahlvorgangsseiten befindet sich das Authentication Element am Anfang, gefolgt vom Address Element und dem Payment Element am Ende. Das Authentication Element kann bei mehrseitigen Bezahlvorgängen in derselben Reihenfolge auch auf separaten Seiten angezeigt werden.
Ein Zahlungsformular mit mehreren Elements erstellen
Die Integration funktioniert wie folgt:
Ein Diagramm, das beschreibt, wie Link mit dem Link Authentication Element integriert wird. (See full diagram at https://docs.stripe.com/payments/link/add-link-elements-integration)
## Ihr Zahlungsformular einrichten [Clientseitig]
Jetzt können Sie Ihr nutzerdefiniertes Zahlungsformular mit den vorgefertigten Elements-Nutzeroberflächenkomponenten einrichten. Die Adresse Ihrer Zahlungsseite muss mit `https://` statt `http://` beginnen, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. [Aktivieren Sie HTTPS](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen anzunehmen.
#### E-Mail übermitteln
Das Payment Element stellt ein vorab ausgefülltes Kundenkontaktformular dar, das die Telefonnummer und E-Mail-Adresse enthält. Es stellt außerdem ein dynamisches Formular dar, mit dem Ihre Kund/innen eine Zahlungsmethode auswählen können. Das Formular erfasst automatisch alle erforderlichen Zahlungsdaten für die vom Kunden/der Kundin ausgewählte Zahlungsmethode.
Darüber hinaus übernimmt das Payment Element die Anzeige der über Link gespeicherten Zahlungsmethoden für authentifizierte Kundinnen und Kunden.
#### React
### Stripe Elements einrichten
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
```
### Zahlungsformular erstellen
Fügen Sie auf Ihrer Zahlungsseite Ihr Zahlungsformular mit der Komponente `Elements` ein und übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Falls Sie über weitere Kundendaten verfügen, übergeben Sie diese an das Objekt `defaultValues.billingDetails` für das `PaymentElement`. Das Vorausfüllen möglichst vieler Informationen vereinfacht die Erstellung des Link-Kontos und die Wiederverwendung für Ihre Kundinnen und Kunden. Sie können auch das [appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)-Objekt übergeben, um die Elements an das Design Ihrer Website anzupassen.
Rendern Sie anschließend das `PaymentElement` in Ihrem Zahlungsformular. Wir empfehlen, zumindest die E-Mail-Adresse des Kunden oder der Kundin an [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) zu übergeben, um dessen Daten für Link vorab auszufüllen.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Stripe Elements einrichten
Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem sie es zum `head` Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js für PCI-Compliance immer direkt von js.stripe.com. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz des [Stripe-Objekts](https://docs.stripe.com/js.md#stripe-function) und geben Sie dabei Ihren veröffentlichbaren [API-Schlüssel](https://docs.stripe.com/keys.md) als ersten Parameter an:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Fügen Sie Link-Elements zu Ihrer Bezahlseite hinzu
Erstellen Sie auf Ihrer Zahlungsseite leere DOM-Knoten mit eindeutigen IDs, in denen Elements gerendert werden sollen:
```html
```
Wenn das soeben konfigurierte Formular geladen ist, erstellen Sie eine neue Elements-Gruppe, wobei Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) übergeben. Sie können auch das [Erscheinungsbild-Objekt](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) übergeben und so die Elements an das Design Ihrer Website anpassen.
Wenn Sie weitere Kundendaten haben, übergeben Sie diese an das `defaultValues.billingDetails`-Objekt von `PaymentElement`. Indem möglichst viele Informationen vorab ausgefüllt werden, lässt sich die Erstellung von Link-Konten und die Wiederverwendung der Konten für Ihre Kundinnen und Kunden vereinfachen.
Erstellen Sie abschließend eine Instanz jedes Elements und verbinden Sie es mit dem entsprechenden DOM-Knoten:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Prefill customer data using the defaultValues option. Passing in the email
// is required for this integration. The other fields are optional.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'foo@bar.com',
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### E-Mail erfassen
Das Payment Element stellt ein vorab ausgefülltes Kundenkontaktformular dar, das die Telefonnummer und E-Mail-Adresse enthält. Es stellt außerdem ein dynamisches Formular dar, mit dem Ihre Kund/innen eine Zahlungsmethode auswählen können. Das Formular erfasst automatisch alle erforderlichen Zahlungsdaten für die vom Kunden/der Kundin ausgewählte Zahlungsmethode.
Darüber hinaus übernimmt das Payment Element die Anzeige der über Link gespeicherten Zahlungsmethoden für authentifizierte Kundinnen und Kunden. Für diese Integration müssen Sie Link in Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) aktiviert lassen.
#### React
### Stripe Elements einrichten
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
```
### Zahlungsformular erstellen
Fügen Sie auf Ihrer Zahlungsseite Ihr Zahlungsformular mit der Komponente `Elements` ein und übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret).
Falls Sie über weitere Kundendaten verfügen, übergeben Sie diese an das Objekt `defaultValues.billingDetails` für das `PaymentElement`. Das Vorausfüllen möglichst vieler Informationen vereinfacht die Erstellung des Link-Kontos und die Wiederverwendung für Ihre Kundinnen und Kunden. Sie können auch das [appearance](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance)-Objekt übergeben, um die Elements an das Design Ihrer Website anzupassen.
Rendern Sie anschließend das `PaymentElement` in Ihrem Zahlungsformular. Wir empfehlen, zumindest die E-Mail-Adresse des Kunden oder der Kundin an [defaultValues](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) zu übergeben, um dessen Daten für Link vorab auszufüllen.
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
#### HTML + JS
### Stripe Elements einrichten
Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem sie es zum `head` Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js für PCI-Compliance immer direkt von js.stripe.com. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz des [Stripe-Objekts](https://docs.stripe.com/js.md#stripe-function) und geben Sie dabei Ihren veröffentlichbaren [API-Schlüssel](https://docs.stripe.com/keys.md) als ersten Parameter an:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Fügen Sie Link-Elements zu Ihrer Bezahlseite hinzu
Erstellen Sie auf Ihrer Zahlungsseite leere DOM-Knoten mit eindeutigen IDs, in denen Elements gerendert werden sollen:
```html
```
Wenn das soeben konfigurierte Formular geladen ist, erstellen Sie eine neue Elements-Gruppe, wobei Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) übergeben. Sie können auch das [Erscheinungsbild-Objekt](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance) übergeben und so die Elements an das Design Ihrer Website anpassen.
Wenn Sie weitere Kundendaten haben, übergeben Sie diese an das `defaultValues.billingDetails`-Objekt von `PaymentElement`. Indem möglichst viele Informationen vorab ausgefüllt werden, lässt sich die Erstellung von Link-Konten und die Wiederverwendung der Konten für Ihre Kundinnen und Kunden vereinfachen.
Erstellen Sie abschließend eine Instanz jedes Elements und verbinden Sie es mit dem entsprechenden DOM-Knoten:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance});
// Create the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
// Mount the Elements to their corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Verwenden Sie das Link Authentication Element
Das -Authentication Element zeigt ein Eingabefeld für E-Mail-Adresse an. Wenn Link die E-Mail-Adresse einer Kundin bzw. eines Kunden mit einem bestehenden Link-Konto abgleicht, sendet es der Kundin bzw. dem Kunden zur Authentifizierung einen sicheren Einmalcode auf ihr/sein Mobiltelefon. Wenn sich die Kundin bzw. der Kunde erfolgreich authentifiziert, zeigt Stripe automatisch die über Link gespeicherten Adressen und Zahlungsmethoden an, die verwendet werden können.
Diese Integration erstellt außerdem das Payment Element, welches ein dynamisches Formular für die Auswahl der Zahlungsmethode rendert. Das Formular erfasst automatisch alle notwendigen Zahlungsinformationen für die ausgewählte Zahlungsmethode. Nach erfolgter Kundenauthentifizierung übernimmt das Payment Element auch die Anzeige der über Link gespeicherten Zahlungsmethoden.
#### React
### Stripe Elements
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
```
Führen Sie auf Ihrer Zahlungsseite das Wrapping Ihres Zahlungsformulars mit der Komponente `Elements` durch und übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus [dem vorangehenden Schritt](https://docs.stripe.com/payments/link/add-link-elements-integration.md#web-create-intent). Wenn Sie die E-Mail-Adresse des Kunden/der Kundin bereits in einem anderen Abschnitt Ihres Formulars erfassen, ersetzen Sie Ihren bestehenden Eintrag durch das `linkAuthenticationElement`.
Wenn Sie keine E-Mail-Adressen erfassen, fügen Sie das `linkAuthenticationElement` zu Ihrem Bezahlvorgang hinzu. Sie müssen das `linkAuthenticationElement` vor dem `ShippingAddressElement` platzieren (optional, wenn Sie Versandadressen erfassen) und das `PaymentElement` so platzieren, dass Link die über Link gespeicherten Daten für Ihre Kundinnen und Kunden automatisch in `ShippingAddressElement` und `PaymentElement` ausfüllt. Sie können auch die [Erscheinungsbildoption](https://docs.stripe.com/elements/appearance-api.md) übergeben und so die Elemente an das Design Ihrer Website anpassen.
Wenn Ihnen eine Kunden-E-Mail-Adresse vorliegt, übergeben Sie diese an die Option `defaultValues` von `linkAuthenticationElement`. Dadurch wird die E-Mail-Adresse vorab ausgefüllt und die Link-Authentifizierung ausgelöst.
Wenn Sie weitere Kundendaten haben, übergeben Sie diese an das `defaultValues.billingDetails`-Objekt für das `PaymentElement`. Indem möglichst viele Informationen vorab ausgefüllt werden, lässt sich die Erstellung von Link-Konten und die Wiederverwendung der Konten für Ihre Kundinnen und Kunden vereinfachen.
Rendern Sie dann die Komponenten `linkAuthenticationElement` und `PaymentElement` in Ihrem Zahlungsformular:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
`linkAuthenticationElement`, `PaymentElement` und `ShippingAddressElement` müssen sich nicht auf derselben Seite befinden. Wenn bei einem Ihrer Abläufe Kundenkontaktdaten, Versandinformationen und Zahlungsdaten in separaten Schritten angezeigt werden, können Sie jedes Element im entsprechenden Schritt oder auf der entsprechenden Seite anzeigen. Nehmen Sie das `linkAuthenticationElement` als E-Mail-Eingabeformular in die Erfassung von Kontaktinformationen auf, um sicherzustellen, dass das von Link bereitgestellte automatische Ausfüllen der Versand- und Zahlungsinformationen in vollem Umfang genutzt werden kann.
Fragen Sie am Anfang des Bezahlvorgangs E-Mail-Adressen von Kundinnen/Kunden mit dem Link-Authentication Element ab, muss dieses auf der Versand- und Zahlungsseite nicht erneut angezeigt werden.
### Eine E-Mail-Adresse abrufen
Sie können die Details der E-Mail-Adresse mithilfe der Eigenschaft `onChange` der Komponente `linkAuthenticationElement` abrufen. Der `onChange`-Handler wird immer dann ausgelöst, wenn der/die Nutzer/in das E-Mail-Feld aktualisiert oder wenn eine gespeicherte Kunden-E-Mail-Adresse automatisch angegeben wird.
```jsx
{
setEmail(event.value.email);
}} />
```
### Eine Kunden-E-Mail-Adresse vorab eingeben
Das -Authentication Element akzeptiert E-Mail-Adressen. Durch die Angabe der Kunden-E-Mail-Adresse wird der Link Authentifizierungsablauf ausgelöst, sobald die Kundin bzw. der Kunde über die Option `defaultValues` auf die Zahlungsseite gelangt.
```jsx
```
#### HTML + JS
### Stripe Elements einrichten
Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem sie es zum `head` Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js für PCI-Compliance immer direkt von js.stripe.com. Fügen Sie das Skript nicht in ein Bundle ein und hosten Sie selbst keine Kopie davon.
```html
Checkout
```
Erstellen Sie eine Instanz des [Stripe-Objekts](https://docs.stripe.com/js.md#stripe-function) und geben Sie dabei Ihren veröffentlichbaren [API-Schlüssel](https://docs.stripe.com/keys.md) als ersten Parameter an:
```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<>');
```
### Fügen Sie Elemente mit Link zu Ihrer Zahlungsseite hinzu
Erstellen Sie auf Ihrer Zahlungsseite leere DOM-Knoten mit eindeutigen IDs, in denen Elements gerendert werden sollen:
```html
```
Wenn das soeben konfigurierte Formular geladen wird, erstellen Sie eine neue Elements-Gruppe und übergeben Sie das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret). Wenn Sie die E-Mail-Adresse des Kunden/der Kundin bereits in Ihrem Zahlungsformular erfassen, ersetzen Sie Ihre bestehende Eingabe durch `linkAuthenticationElement`.
Wenn Sie keine E-Mail-Adressen erfassen, fügen Sie `linkAuthenticationElement` vor `shippingAddress` in Ihren Bezahlvorgang ein (optional, wenn Sie Versandadresse erfassen). Fügen Sie `PaymentElement` für Link hinzu, um die bei Link gespeicherten Daten Ihrer Kundin bzw. Ihres Kunden automatisch in die Felder `shippingAddress` und `PaymentElement` einzutragen. Sie können auch das [appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance)-Objekt übergeben, um die Elemente an das Design Ihrer Website anzupassen.
Wenn Ihnen die E-Mail-Adressen Ihrer Kundinnen/Kunden vorliegen, übergeben Sie diese an die Option `defaultValues` von `linkAuthenticationElement`. Dadurch werden die E-Mail-Adressen vorab ausgefüllt und die Link-Authentifizierung wird eingeleitet. Haben Sie weitere Kundendaten, übergeben Sie diese an das `defaultValues.billingDetails`-Objekt von `PaymentElement`. Das Vorausfüllen möglichst vieler Informationen vereinfacht die Erstellung von Link-Konten und die Wiederverwendung der Konten für Ihre Kundinnen/Kunden.
Erstellen Sie abschließend eine Instanz jedes Elements und verbinden Sie es mit dem entsprechenden DOM-Knoten:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2), loader, and appearance (optional).
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");
// Passing in defaultValues is optional, but useful if you want to prefill consumer information to
// ease consumer experience.
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
},
},
});
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
paymentElement.mount("#payment-element");
```
Das `linkAuthenticationElement` zeigt ein Eingabefeld für die E-Mail-Adresse an. Wenn Link die E-Mail-Adresse einer Kundin bzw. eines Kunden mit einem bestehenden Link-Konto abgleicht, sendet es der Kundin bzw. dem Kunden zur Authentifizierung einen sicheren Einmalcode auf sein Mobiltelefon. Wenn sich die Kundin bzw. der Kunde erfolgreich authentifiziert hat, zeigt Stripe automatisch seine bei Link gespeicherten Adressen und Zahlungsmethoden an, damit sie/er diese nutzen kann.
Das `PaymentElement` rendert ein dynamisches Formular, mit dem Ihr Kunde/Ihre Kundin eine Zahlungsmethode auswählen kann. Das Formular erfasst automatisch alle notwendigen Zahlungsdetails für die von dem Kunden/der Kundin ausgewählte Zahlungsart. Das `PaymentElement` übernimmt für die authentifizierten Kundinnen/Kunden auch die Anzeige der über Link gespeicherten Zahlungsmethoden.
Das Authentication Element, Payment Element und Shipping Address Element von Link müssen sich nicht auf derselben Seite befinden. Wenn Kundenkontaktdaten, Versandinformationen und Zahlungsdaten dem Kunden/der Kundin im Bezahlvorgang in separaten Schritten angezeigt werden, können Sie jedes Element im entsprechenden Schritt oder auf der entsprechenden Seite anzeigen. Nehmen Sie das Link-Authentication Element als E-Mail-Eingabeformular in die Erfassung von Kontaktinformationen auf. So stellen Sie sicher, dass das von Link bereitgestellte automatische Ausfüllen der Versand- und Zahlungsinformationen durch den Kunden/die Kundin in vollem Umfang genutzt werden kann.
Fragen Sie am Anfang des Bezahlvorgangs E-Mail-Adressen von Kundinnen/Kunden mit dem Link-Authentication Element ab, muss dieses auf der Versand- und Zahlungsseite nicht erneut angezeigt werden.
### E-Mail-Adresse abrufen
Sie können die Details der E-Mail-Adresse mithilfe der Eigenschaft `onChange` der Komponente `linkAuthenticationElement` abrufen. Der `onChange`-Handler wird immer dann ausgelöst, wenn der/die Nutzer/in das E-Mail-Feld aktualisiert oder wenn eine gespeicherte Kunden-E-Mail-Adresse automatisch angegeben wird.
```javascript
linkAuthenticationElement.on('change', (event) => {
const email = event.value.email;
});
```
### Eine Kunden-E-Mail-Adresse vorab eingeben
Das Authentifizierungselement akzeptiert E-Mail-Adressen. Wenn eine Kunden/Kundin E-Mail eingegeben wird, wird der -Authentifizierungsablauf mit der Option `defaultValues`` begonnen, sobald die Kundin/der Kunde auf der Zahlungsseite aufgerufen wird.
```javascript
// Create linkAuthentication element with the defaultValues option
const linkAuthenticationElement = elements.create("linkAuthentication", {defaultValues: {email: "foo@bar.com"}});
// Mount the Element to its corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");
```
## Optional: Zusätzliche Kundendaten vorab ausfüllen [Clientseitig]
Wenn Sie die Möglichkeit haben, die Kundendaten vorab einzugeben, können Sie den Bezahlvorgang weitergehend optimieren und die manuelle Dateneingabe reduzieren.
#### E-Mail übermitteln
Das Payment Element akzeptiert ein `defaultValues.billingDetails`-Objekt, mit dem Sie Namen, Telefonnummern sowie E-Mail- und Versandadressen Ihrer Kundinnen und Kunden vorab ausfüllen können. Indem möglichst viele Informationen vorab eingegeben werden, lässt sich die Erstellung von Link-Konten und die Wiederverwendung der Konten vereinfachen.
Geben Sie die E-Mail-Adresse, Telefonnummer und den Namen Ihrer Kundin bzw. Ihres Kunden vorab ein, um den Registrierungsvorgang bei Link zu vereinfachen
Sie können die folgenden Werte für das Objekt `defaultValues.billingDetails` angeben:
| Wert | Erforderlich | Format |
| --------- | ------------ | ---------------------------------------------------------------------------------------- |
| `email` | Erforderlich | Zeichenfolge |
| `name` | Optional | Zeichenfolge |
| `phone` | Optional | Zeichenfolge |
| `address` | Optional | JSON-Objekt mit den Feldern `postal_code` und `country`. Alle Felder sind Zeichenfolgen. |
Die Übergabe von `defaultValues.billingDetails` an das Payment Element hängt davon ab, ob Sie Informationen auf einer separaten Seite vor dem Payment Element oder auf derselben Seite erfassen.
#### Vor dem Payment Element
Wenn Sie Informationen auf einer separaten Seite vor dem Payment Element erfassen, können Sie Werte vorab ausfüllen, indem Sie `defaultValues.billingDetails` übergeben, wenn Sie das Payment Element erstellen:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
email: 'johnd@domain.com',
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
#### Dieselbe Seite wie das Payment Element
Wenn Sie Informationen auf derselben Seite wie das Payment Element erfassen, können Sie Werte vorab ausfüllen, indem Sie das Payment Element mit `defaultValues.billingDetails` aktualisieren.
```javascript
const paymentElement = elements.create('payment')
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
function updateValues() {
paymentElement.update({
defaultValues: {
billingDetails: {
email: document.getElementById('email').value, // Or whichever ID used for your fields
name: document.getElementById('name').value,
phone: document.getElementById('phone').value,
address: {
postal_code: document.getElementById('postal_code').value,
country: document.getElementById('country').value,
},
},
},
});
}
const yourCollectionFieldIds = [
'name',
'email',
'phone',
'country',
'postal_code',
];
// We recommend updating defaultValues only onBlur
yourCollectionFields.forEach((key) => {
document.getElementById(key).onblur = function() {updateValues()};
});
```
#### Übermitteln Sie eine E-Mail an das Link Authentication Element
Wenn Sie das Link Authentication Element verwenden, fügen Sie das `defaultValues.billingDetails``-Objekt zum Payment Element hinzu, um den Namen, die Telefonnummer sowie Versandadresse der Kundin bzw. des Kunden vorab ausfüllen können. Das Vorausfüllen möglichst vieler Kundendaten vereinfacht die Erstellung und die Wiederverwendung von Link-Konten.
Geben Sie die E-Mail-Adresse, Telefonnummer und den Namen Ihrer Kundin bzw. Ihres Kunden vorab ein, um den Registrierungsprozess bei Link zu vereinfachen
Sie können die folgenden Werte für das Objekt `defaultValues.billingDetails` angeben:
| Wert | Erforderlich | Format |
| --------- | ------------ | ---------------------------------------------------------------------------------------- |
| `name` | Optional | Zeichenfolge |
| `phone` | Optional | Zeichenfolge |
| `address` | Optional | JSON-Objekt mit den Feldern `postal_code` und `country`. Alle Felder sind Zeichenfolgen. |
Ein Payment Element, in dem alle Werte vorab ausgefüllt sind, sieht in etwa wie folgt aus:
#### React
```jsx
;
```
#### HTML + JS
```javascript
const paymentElement = elements.create('payment', {
defaultValues: {
billingDetails: {
name: 'John Doe',
phone: '888-888-8888',
address: {
postal_code: '10001',
country: 'US',
},
},
},
});
// Mount the Element to its corresponding DOM node
paymentElement.mount("#payment-element");
```
## Optional: Versandadressen erfassen [Clientseitig]
#### E-Mail übermitteln
Bei dieser Integrationsoption werden keine Versandadressen der Kundin/des Kunden erfasst. Wenn Sie eine Versandadresse erfassen müssen, integrieren Sie Link mithilfe von Link Authentication Element, Address Element und Payment Element. Befolgen Sie dazu die Schritte unter [Link Authentication Element verwenden](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).
#### Verwenden Sie das Link Authentication Element
#### React
Um Adressen zu erfassen, erstellen Sie einen leeren DOM-Knoten, in den das [Address Element](https://docs.stripe.com/elements/address-element.md) angezeigt werden soll. Das Address Element muss nach dem Link-Authentifizierungselement angezeigt werden, damit Link die gespeicherten Adressdaten der Kundin/des Kunden automatisch ausfüllen kann:
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
Elements,
LinkAuthenticationElement,AddressElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage = ({clientSecret}) => (
);
export default function CheckoutForm() {
return (
);
}
```
Zeigen Sie das `AddressElement` vor dem `PaymentElement` an. Das `PaymentElement` erkennt dynamisch die vom `AddressElement` erfassten Adressdaten, blendet unnötige Felder aus und erfasst bei Bedarf zusätzliche Rechnungsadressdaten.
### Adressdaten abrufen
Das `AddressElement` übergibt die Lieferadresse automatisch, wenn Kund/innen eine Zahlung absenden. Sie können die Adressdetails aber auch im Frontend abrufen, indem Sie die Eigenschaft `onChange` verwenden. Der `onChange`-Handler sendet ein Ereignis, wenn Nutzer/innen Felder im Address Element aktualisieren oder eine gespeicherte Adresse auswählen:
```jsx
{
setAddressState(event.value);
}} />
```
### Eine Versandadresse vorab angeben
Verwenden Sie [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues), um Adressinformationen vorab anzugeben und den Bezahlvorgang für Ihre Kundinnen und Kunden zu beschleunigen.
```jsx
```
#### HTML + JS
Mit dem [Address Element](https://docs.stripe.com/elements/address-element.md) können Sie Versand- und Rechnungsadressen erfassen. Erstellen Sie einen leeren DOM-Knoten für das Address Element. Zeigen Sie diesen nach dem Link-Authentication Element an:
```html
```
Erstellen Sie dann eine Instanz des Address Element und verbinden Sie es mit dem DOM-Knoten:
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>');
// Create an elements group from the Stripe instance passing in the clientSecret and, optionally, appearance.
const elements = stripe.elements({clientSecret, appearance, loader});
// Create Element instances
const linkAuthenticationElement = elements.create("linkAuthentication");const addressElement = elements.create("address", {
mode: 'shipping',
allowedCountries: ['US']
});
const paymentElement = elements.create("payment");
// Mount the Elements to their corresponding DOM node
linkAuthenticationElement.mount("#link-authentication-element");addressElement.mount("#address-element");
paymentElement.mount("#payment-element");
```
Zeigen Sie das Address Element vor dem Payment Element an. Das Payment Element erkennt dynamisch die vom Address Element erfassten Adressdaten, blendet unnötige Felder aus und erfasst bei Bedarf zusätzliche Rechnungsadressdetails.
### Adressinformationen abrufen
Das Address Element übergibt die Versandadresse automatisch, wenn Kund/innen die Zahlung übermitteln. Die Adressdaten können Sie aber auch über das Ereignis `change` im Frontend abrufen. Das Ereignis `change` wird immer dann gesendet, wenn Nutzer/innen ein Feld im Address Element aktualisieren oder gespeicherten Adressen auswählen:
```javascript
addressElement.on('change', (event: AddressChangeEvent) => {
const address = event.value;
})
```
### Eine Versandadresse vorab angeben
Verwenden Sie [defaultValues](https://docs.stripe.com/js/elements_object/create_address_element#address_element_create-options-defaultValues), um Adressinformationen vorab anzugeben und den Bezahlvorgang für Ihre Kundinnen und Kunden zu beschleunigen.
```javascript
// Create addressElement with the defaultValues option
const addressElement = elements.create("address", {
mode: 'shipping',
defaultValues: {
name: 'Jane Doe',
address: {
line1: '354 Oyster Point Blvd',
line2: '',
city: 'South San Francisco',
state: 'CA',
postal_code: '94080',
country: 'US',
}
}
});
// Mount the Element to its corresponding DOM node
addressElement.mount("#address-element");
```
## Optional: Erscheinungsbild anpassen [Clientseitig]
Nachdem Sie diese Elements zu Ihrer Seite hinzugefügt haben, können Sie ihr [Erscheinungsbild](https://docs.stripe.com/elements/appearance-api.md#theme) an das übrige Design anpassen:
Erscheinungsbild Ihrer Elements anpassen
## Zahlung an Stripe senden [Clientseitig]
Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit den von Ihren Kundinnen und Kunden in den verschiedenen Elements-Formularen erfassten Daten abzuschließen. Stellen Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) für diese Funktion bereit, um anzugeben, wohin Stripe Nutzer/innen nach Abschluss der Zahlung weiterleitet.
Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor Stripe sie zu der `return_url` weiterleitet.
Standardmäßig erfolgt bei Karten- und Bankzahlungen eine direkte Weiterleitung zur `return_url`, wenn eine Zahlung erfolgreich ist. Wenn Sie keine Weiterleitung an die `return_url` wünschen, können Sie das Verhalten mithilfe von [if_required](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) ändern.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
// If collecting shipping
AddressElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>');
const appearance = {/* ... */};
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const CheckoutPage =({clientSecret}) => (
);
export default function CheckoutForm() {const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
},
});
if (error) {
// handle error
}
};
return (
);
}
```
#### HTML + JS
```javascript
const stripe = Stripe('<>');
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
return_url: "https://example.com/order/123/complete",
}
});
if (error) {
// Show error to your customer (for example, payment details incomplete)
console.log(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`.
}
});
```
Die `return_url` entspricht einer Seite auf Ihrer Website, die den [Zahlungsstatus](https://docs.stripe.com/payments/payment-intents/verifying-status.md) des `PaymentIntent` liefert, wenn Sie die Rückgabeseite rendern. Wenn Stripe den Kunden/die Kundin an die `return_url` weiterleitet, können Sie die folgenden URL-Abfrageparameter verwenden, um den Zahlungsstatus zu überprüfen. Sie können auch Ihre eigenen Abfrageparameter anhängen, wenn Sie die `return_url` bereitstellen. Diese Abfrageparameter bleiben während des Weiterleitungsprozesses bestehen.
| Parameter | Beschreibung |
| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent` | Die eindeutige ID für den `PaymentIntent` |
| `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. |
## Optional: Autorisierung und Erfassung trennen [Serverseitig]
Link unterstützt die [getrennte Autorisierung und Erfassung](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Sie müssen eine autorisierte Zahlung von Link innerhalb von 7 Tagen nach der Autorisierung erfassen. Andernfalls wird die Autorisierung automatisch storniert und Sie können diese Zahlung nicht mehr erfassen.
### Stripe anweisen, nur die Autorisierung durchzuführen
Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf der Zahlungsmethode der Kundin/des Kunden zu autorisieren.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d "payment_method_types[]=link" \
-d "payment_method_types[]=card" \
-d amount=1099 \
-d currency=usd \
-d capture_method=manual
```
### Die Gelder erfassen
Nach erfolgreicher Autorisierung wechselt der [Status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) des PaymentIntent zu `requires_capture`. Um die autorisierten Gelder zu erfassen, führen Sie eine [Erfassungsanfrage](https://docs.stripe.com/api/payment_intents/capture.md) für den PaymentIntent durch. Standardmäßig wird der gesamte autorisierte Betrag erfasst. Sie können keinen höheren, aber einen niedrigeren Betrag erfassen.
```curl
curl https://api.stripe.com/v1/payment_intents/{{PAYMENTINTENT_ID}}/capture \
-u "<>:" \
-d amount_to_capture=750
```
### (Optional) Autorisierung stornieren
Wenn Sie eine Autorisierung stornieren müssen, können Sie den [PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) stornieren.
## Ereignisse nach der Zahlung verarbeiten [Serverseitig]
Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. [Verwenden Sie einen Webhook, um diese Ereignisse zu empfangen](https://docs.stripe.com/webhooks/quickstart.md), 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.
Konfigurieren Sie Ihre Integration so, dass diese Ereignisse überwacht werden, statt auf einen Callback vom Client zu warten. Wenn Sie auf einen Callback vom Client warten, können die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie [verschiedene Arten von Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren.
Neben der Abwicklung des `payment_intent.succeeded`-Ereignisses können Sie auch zwei andere wichtige Ereignisse verarbeiten, wenn Sie Zahlungen mit dem Payment Element erfassen:
| Ereignis | Beschreibung | Aktion |
| ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird von Stripe gesendet, wenn Kund/innen eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und erledigen Sie die *Ausführung* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) der Bestellung. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Wird von Stripe gesendet, wenn Kund/innen versucht haben, eine Zahlung durchzuführen, die Zahlung aber nicht erfolgreich war. | Wenn eine Zahlung von `processing` zu `payment_failed` übergegangen ist, bieten Sie den Kund/innen einen weiteren Zahlungsversuch an. |
## Integration testen
> Speichern Sie im *Sandbox* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes) Link keine echten Nutzer/innen. Behandeln Sie sie so, als seien sie öffentlich verfügbar, da diese Testkonten an Ihren veröffentlichbaren Schlüssel gebunden sind.
Derzeit akzeptiert Link nur Zahlungen per Kreditkarte, Debitkarte und über bestimmte US-Bankkonten. Für Link ist eine [Domain-Registrierung](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) erforderlich.
Sie können Sandbox-Konten für Link mit jeder gültigen E-Mail-Adresse erstellen. Die folgende Tabelle enthält die festen Werte für Einmal-Passwörter, die Stripe zur Authentifizierung von Sandbox-Konten akzeptiert:
| Wert | Ergebnis |
| ------------------------------------------------------- | -------------------------------------------------- |
| Alle anderen 6 Ziffern, die unten nicht aufgeführt sind | Erfolgreich |
| 000001 | Fehler, Code ungültig |
| 000002 | Fehler, Code abgelaufen |
| 000003 | Fehler, maximale Anzahl an Versuchen überschritten |
Informationen zum Testen bestimmter Zahlungsmethoden finden Sie in den [Beispielen für das Testen von Zahlungselementen](https://docs.stripe.com/payments/accept-a-payment.md?platform=web#additional-testing-resources).
### Mehrere Finanzierungsquellen
Da Stripe zusätzliche Unterstützung für Finanzierungsquellen bietet, müssen Sie Ihre Integration nicht aktualisieren. Stripe unterstützt diese automatisch mit der gleichen Transaktionsabwicklungszeit und den gleichen Garantien wie bei Karten- und Bankkontozahlungen.
### Kartenauthentifizierung und 3D Secure
Link unterstützt die *3D Secure 2 (3DS2)*-Authentifizierung (3DS2) für Kartenzahlungen. Bei 3DS2 müssen Kundinnen und Kunden einen zusätzlichen Verifizierungsschritt beim Kartenaussteller durchlaufen, wenn sie die Zahlung durchführen. Für Zahlungen, die erfolgreich mit 3D Secure authentifiziert wurden, gilt eine *Haftungsverlagerung* (With some 3D Secure transactions, the liability for fraudulent chargebacks (stolen or counterfeit cards) shifts from you to the card issuer).
Um 3DS2-Authentifizierungsabläufe mit Link in einer Sandbox auszulösen, verwenden Sie die folgende Testkarte mit einer beliebigen CVC-Prüfziffer, Postleitzahl und einem beliebigen zukünftigen Ablaufdatum: 4000000000003220.
In einer Sandbox zeigt der Authentifizierungsprozess eine simulierte Authentifizierungsseite an. Auf dieser Seite können Sie die Zahlung autorisieren oder stornieren. Bei der Autorisierung der Zahlung wird eine erfolgreiche Authentifizierung simuliert und Sie werden an die angegebene Rückgabe-URL weitergeleitet. Durch Klicken auf die Schaltfläche **Fehler** wird ein erfolgloser Authentifizierungsversuch simuliert.
Weitere Details finden Sie auf der Seite [3D Secure-Authentifizierung](https://docs.stripe.com/payments/3d-secure.md).
> Beim Testen von 3DS-Abläufen lösen nur Testkarten für 3DS2 die Authentifizierung bei Link aus.
## Optional: Von Kundinnen/Kunden gespeicherte Daten anzeigen [Serverseitig] [Clientseitig]
Wenn Ihre Connect-Plattform verwendet [kundenkonfigurierte Konten](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), benutze unser [Anleitung](https://docs.stripe.com/connect/use-accounts-as-customers.md) Ersetzen `Customer` und Ereignisreferenzen in Ihrem Code mit den entsprechenden Accounts v2 API-Referenzen.
Neben Ihren eigenen gespeicherten Adressen und Zahlungsmethoden für einen Kunden oder eine Kundin können Sie auch dessen bei Link gespeicherte Daten anzeigen.
Wenn eine Kundin oder ein Kunde mehr als eine Zahlungsmethode gespeichert hat, zeigt Stripe zusätzlich zu den von der Kundin oder dem Kunden unter Link gespeicherten Zahlungsmethoden die drei zuletzt verwendeten Karten an, die für das *Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)-Objekt gespeichert wurden.
Erstellen Sie dazu einen temporären Schlüssel und senden Sie ihn zusammen mit der *Kunden* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments)-ID an Ihr Frontend. Die Informationen im `customer`-Objekt sind vertraulich. Sie können nicht direkt in Stripe.js abgerufen werden. Ein temporärer Schlüssel gewährt vorübergehenden Zugriff auf `customer`-Daten.
#### curl
```bash
curl https://api.stripe.com/v1/ephemeral_keys \
-u<>: \
-H "Stripe-Version:2026-03-25.dahlia" \
-d "customer"="{{CUSTOMER_ID}}" \
curl https://api.stripe.com/v1/payment_intents \
-u <>: \
-d "amount"=1099 \
-d "currency"="usd" \-d "customer"="{{CUSTOMER_ID}}" \
-d "payment_method_types[]"="link" \
-d "payment_method_types[]"="card"
```
Rufen Sie auf der Client-Seite `customerOptions` mit `clientSecret` ab.
```jsx
(async () => {
const response = await fetch('/secret');const {clientSecret, customerOptions} = await response.json();
})
```
Übergeben Sie dann die Werte `customerOptions.ephemeralKey` und `customerOptions.customer` an die Option `customerOptions` in der [Elements-Gruppe](https://docs.stripe.com/js/elements_object/create). Sie müssen beim Laden der Stripe-Instanz auch das Beta-Flag `elements_customers_beta_1` übergeben.
#### React
```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
useStripe,
useElements,
Elements,
LinkAuthenticationElement,
PaymentElement,
} from "@stripe/react-stripe-js";
const stripe = loadStripe('<>', {apiVersion: '2026-03-25.dahlia',
betas: ['elements_customers_beta_1'],
});
const appearance = {/* ... */};
const loader = 'auto';
const CheckoutPage =({
clientSecret,customerOptions,
}) => (
);
```
#### HTML + JS
```javascript
// Customize the appearance of Elements using the Appearance API.
const appearance = { /* ... */ };
// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';
const stripe = Stripe('<>', {betas: ['elements_customers_beta_1'],
});
// Create an elements group from the Stripe instance, passing the clientSecret (obtained in step 2) and appearance (optional).
const elements = stripe.elements({
clientSecret,
appearance,
loader,customerOptions,
});
```
## Optional: Link-Zahlungsmethoden speichern [Serverseitig] [Clientseitig]
Sie können Link Zahlungsmethoden für zukünftige *Off-Session-Zahlungen* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) oder *Abonnements* (A Subscription represents the product details associated with the plan that your customer subscribes to. Allows you to charge the customer on a recurring basis) speichern, aber nicht für zukünftige *On-Session-Zahlungen* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Dafür müssen Sie diese einem/einer *Kunden/Kundin* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments) hinzufügen. Erstellen Sie ein `Kunden`-Objekt, wenn Ihr Kunde oder Ihre Kundin ein Konto bei Ihrem Unternehmen anlegt. Geben Sie dann den/die `Kunden/Kundin` bei der Erstellung Ihres PaymentIntent an.
Wenn neue Kund/innen die erste Transaktion mit Ihrem Unternehmen führen, erstellen Sie ein `customer`-Objekt in Stripe, um ihre Daten für die zukünftige Verwendung zu speichern.
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d setup_future_usage=off_session
```
In der neuesten API-Version ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe diese Funktionalität standardmäßig aktiviert.
Wenn Sie das Kundenkonto wieder belasten möchten, verwenden Sie den/die `customer` und die resultierende *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs)-ID, um einen neuen PaymentIntent zu erstellen. Legen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auch auf `true` fest. Dies hat zur Folge, dass der PaymentIntent einen Fehler ausgibt, wenn eine Authentifizierung erforderlich ist und der Kunde/die Kundin nicht aktiv Ihre Seite oder App nutzt.
#### Accounts v2
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer_account={{CUSTOMERACCOUNT_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
#### Customers v1
```curl
curl https://api.stripe.com/v1/payment_intents \
-u "<>:" \
-d amount=1099 \
-d currency=usd \
-d "automatic_payment_methods[enabled]=true" \
-d "customer={{CUSTOMER_ID}}" \
-d payment_method={{PAYMENT_METHOD_ID}} \
--data-urlencode "return_url=https://example.com/order/123/complete" \
-d off_session=true \
-d confirm=true
```
## Stripe Ihren Kundinnen/Kunden anzeigen
Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
## See also
- [Was ist Link](https://docs.stripe.com/payments/link.md)
- [Link mit Elements](https://docs.stripe.com/payments/link/elements-link.md)
- [Link im Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Das Link Authentication Element erkunden](https://docs.stripe.com/payments/link/link-authentication-element.md)
- [Link in verschiedenen Zahlungsintegrationen](https://docs.stripe.com/payments/link/link-payment-integrations.md)