# Künftige Zahlungen mit Elements und Link einrichten

Speichern Sie die Daten Ihrer Link-Kundinnen und Kunden und nehmen später Belastungen vor.

In diesem Leitfaden erfahren Sie, wie Sie Zahlungen mit [Link](https://docs.stripe.com/payments/link.md) über die [Setup Intents API](https://docs.stripe.com/api/setup_intents.md) und entweder das [Payment Element](https://docs.stripe.com/payments/payment-element.md) oder das [Contact Details Element](https://docs.stripe.com/payments/elements/contact-details-element.md) akzeptieren 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.
- **Contact Details Element:** Sie können das Contact Details Element verwenden, um ein einziges E-Mail-Eingabefeld sowohl zum Erfassen von E-Mail-Adressen als auch für die Link-Authentifizierung zu erstellen. Wir empfehlen diese Vorgehensweise, wenn Sie das [Address Element](https://docs.stripe.com/elements/address-element.md) verwenden.
![Authentifizierung oder Registrierung bei Link direkt im Payment Element während des Bezahlvorgangs](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Erfassen Sie eine Kunden-E-Mail-Adresse für die Link-Authentifizierung oder Registrierung

## 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).

Coding agents should install the Stripe CLI (`npm i -g @stripe/cli`) and run the command `stripe sandbox create --help` to provision an anonymous Stripe sandbox with working API keys. No account registration required.

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'
```

## Kunde/Kundin erstellen [Serverseitig]

> #### Verwenden Sie die Accounts v2 API zum Darstellen von Kundinnen und Kunden
> 
> Die Accounts v2 API ist allgemein für Connect-Nutzer/innen verfügbar und für andere Stripe-Nutzer/innen in der öffentlichen Vorschau. Wenn an der Accounts v2 Vorschau teilnehmen, müssen Sie eine [Vorschauversion](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) in Ihrem Code angeben.
> 
> Um Zugriff auf die Accounts v2 Vorschau anzufordern, {% collect-email modal=true modal_link_text=“sign up.” list=“payin-payout-reuse-waitlist@stripe.com” send_direct_email=true intro_text=“Sind Sie am frühzeitigen Zugang zur Vorschau der Accounts v2 API interessiert?" body_text=“Wir sind gerade dabei, die Vorschau von Accounts v2 bereitzustellen. Um Zugang zu beantragen, geben Sie unten Ihre E-Mail-Adresse ein.” form_cta_text=“Registrieren” success_text=“Danke! Wir melden uns bald.” show_email_confirmation=wahr /%}
> 
> Für die meisten Anwendungsfälle empfehlen wir, [Ihre Kundinnen und Kunden als vom Kunden bzw. von der Kundin konfigurierte Account-Objekte abzubilden](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md), anstatt [Customer](https://docs.stripe.com/api/customers.md)-Objekte zu verwenden.

#### Accounts v2

Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie einem kundenseitig konfigurierten [Konto](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) hinzufügen. Erstellen Sie ein `Kontoobjekt`, wenn Ihre Kundin oder Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt.

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-04-22.preview" \
  --json '{
    "contact_email": "jenny.rosen@example.com",
    "display_name": "Jenny Rosen",
    "identity": {
        "country": "us",
        "individual": {
            "given_name": "Jenny Rosen"
        }
    },
    "configuration": {
        "customer": {
            "capabilities": {
                "automatic_indirect_tax": {
                    "requested": true
                }
            }
        }
    },
    "include": [
        "configuration.customer",
        "identity"
    ]
  }'
```

#### Customers&nbsp;v1

Um eine Zahlungsmethode für zukünftige Zahlungen einzurichten, müssen Sie sie *einer Kundin oder einem Kunden* (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 `Kundenobjekt`, wenn Ihre Kundin oder Ihr Kunde ein Konto bei Ihrem Unternehmen anlegt.

```curl
curl https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "name=Jenny Rosen"
```

## SetupIntent erstellen [Serverseitig]

> Wenn Sie das Payment Element rendern möchten, ohne zuvor einen SetupIntent zu erstellen, finden Sie weitere Informationen unter [Zahlungsdetails erfassen, bevor Sie einen Intent erstellen](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup).

Ein [SetupIntent](https://docs.stripe.com/api/setup_intents.md) ist ein Objekt, das Ihre Absicht darstellt, die Zahlungsmethode eines Kunden/einer Kundin für zukünftige Zahlungen während einer Sitzung einzurichten und den Status dieser Sitzung zu verfolgen. Erstellen Sie einen SetupIntent auf Ihrem Server mit `link` und den anderen Zahlungsmethoden, die Sie unterstützen möchten:

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=link"
```

#### Customers&nbsp;v1

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=link"
```

Informationen zum Einrichten weiterer Zahlungsmethoden finden Sie im Leitfaden [Zukünftige Zahlungen einrichten](https://docs.stripe.com/payments/save-and-reuse.md).

### Client-Geheimnis abrufen

Im SetupIntent 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 SetupIntent
  {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/setup_intents/object.md#setup_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem SetupIntent ab:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

## E-Mail-Adressen von Kundinnen/Kunden erfassen

Link authentifiziert Kundinnen und Kunden anhand der E-Mail-Adresse. Je nach Bezahlvorgang haben Sie folgende Möglichkeiten: Sie können eine E-Mail an das Payment Element übergeben, sie direkt im Payment Element erfassen oder das Contact Details Element verwenden. Stripe empfiehlt, 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.
![Vorschau eines nicht registrierten Nutzers/einer Nutzerin, der/die Link im Payment Element verwendet.](https://b.stripecdn.com/docs-statics-srv/assets/lape-unregistered-user.293e19b8cc97c58e2c7dc22f8ef8f75b.png)

Link übernimmt bereits bekannte E-Mail-Adressen automatisch in das Bezahlformular und beschleunigt so den Bezahlvorgang.
![Vorschau eines registrierten Nutzers/einer Nutzerin, der/die Link im Payment Element verwendet.](https://b.stripecdn.com/docs-statics-srv/assets/collect-email-before-returning-user.d6dee1a891e3068b1c1892edefa9c01f.png)

Link bietet eine Authentifizierungsaufforderung für bestehende Kunden/Kundinnen.

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:
Integrate Link using the Payment Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)
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 Contact Details Element, des Address Element und des Payment Element.

#### 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.

#### Contact Details Element verwenden

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 den Integrationsablauf, der diese Elemente implementiert: das Contact Details Element, das Payment Element und optional das Address Element.

Bei Link-fähigen Zahlungsseiten befindet sich das Contact Details Element am Anfang, gefolgt vom Address Element und dem Payment Element am Ende. Das Contact Details Element kann bei mehrseitigen Bezahlvorgängen in derselben Reihenfolge auch auf separaten Seiten angezeigt werden.
![Ein Zahlungsformular mit mehreren Elements erstellen](https://b.stripecdn.com/docs-statics-srv/assets/link-with-elements.d52f05825c982aaf84a4ad1e9bb422f3.png)

Ein Zahlungsformular mit mehreren Elements erstellen

Die Integration funktioniert wie folgt:
A diagram describing how to integrate Link using the Contact Details Element (See full diagram at https://docs.stripe.com/payments/link/save-and-reuse)
## 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('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Prefill customer data using the defaultValues option. Passing in the email
      // is required for this integration. The other fields are optional.
      <PaymentElement
        options={{
          defaultValues: {
            billingDetails: {
              email: 'foo@bar.com',
              name: 'John Doe',
              phone: '888-888-8888',
            }
          }
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### 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
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 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
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

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('<<YOUR_PUBLISHABLE_KEY>>');

// Customize the appearance of Elements using the Appearance API.
const appearance = {/* ... */};

const CheckoutPage = ({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Payment</h3>

      // Create the Payment Element
      <PaymentElement/>
      <button type="submit">Submit</button>
    </form>
  );
}
```

#### 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
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 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
<form id="payment-form">
  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

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");
```

#### Contact Details Element verwenden

Das Contact Details 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
```

Betten 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) aus [dem vorherigen Schritt](https://docs.stripe.com/payments/link/save-and-reuse.md#web-create-intent). Wenn Sie die E-Mail-Adresse der Kundin oder des Kunden bereits in einem anderen Teil Ihres Formulars erfassen, ersetzen Sie Ihre vorhandene Eingabe durch das `ContactDetailsElement`.

Wenn Sie keine E-Mail-Adressen erfassen, fügen Sie das `ContactDetailsElement​` zu Ihrem Bezahlvorgang hinzu. Sie müssen das `ContactDetailsElement​` vor dem `ShippingAddressElement` platzieren (optional, wenn Sie Versandadressen erfassen). Außerdem müssen Sie 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 [Option für das Erscheinungsbild](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 sie an die Option `defaultValues` des `ContactDetailsElement`. 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 anschließend die Komponenten `ContactDetailsElement` und `PaymentElement` in Ihrem Zahlungsformular:

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// 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}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            email: 'foo@bar.com',
          },
        }}
      />
      <h3>Payment</h3>
      <PaymentElement
        // Optional prop for prefilling customer information
        options={{
          defaultValues: {
            billingDetails: {
              name: 'John Doe',
              phone: '888-888-8888',
            },
          },
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}
```

Das `ContactDetailsElement`, `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 `ContactDetailsElement` als Eingabeformular für die E-Mail-Adresse 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 und Kunden mit dem Contact Details 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 `ContactDetailsElement` 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
<ContactDetailsElement onChange={(event) => {
  setEmail(event.value.email);
}} />
```

### Eine Kunden-E-Mail-Adresse vorab eingeben

Das Contact Details Element akzeptiert E-Mail-Adressen. Durch die Angabe der Kunden-E-Mail-Adresse wird der Link Authentifizierungsablauf ausgelöst, sobald die Kundin oder der Kunde über die Option `defaultValues` auf die Zahlungsseite gelangt.

```jsx
<ContactDetailsElement options={{defaultValues: {email: 'foo@bar.com'}}}/>
```

#### 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
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

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('<<YOUR_PUBLISHABLE_KEY>>');
```

### 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
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button id="submit">Submit</button>
</form>
```

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 der Kundin oder des Kunden bereits in Ihrem Zahlungsformular erfassen, ersetzen Sie Ihre bestehende Eingabe durch `contactDetailsElement`.

Wenn Sie keine E-Mail-Adressen erfassen, fügen Sie `contactDetailsElement` vor `shippingAddress` in Ihren Bezahlvorgang ein (optional, wenn Sie Versandadressen 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 Elements an das Design Ihrer Website anzupassen.

Wenn Ihnen die E-Mail-Adressen Ihrer Kundinnen und Kunden vorliegen, übergeben Sie sie an die Option `defaultValues` von `contactDetailsElement`. Dadurch werden die E-Mail-Adressen vorab ausgefüllt und die Link-Authentifizierung wird eingeleitet. Haben Sie weitere Kundendaten, übergeben Sie sie an das `defaultValues.billingDetails`-Objekt von `PaymentElement`. Das Vorausfüllen möglichst vieler Informationen macht das Erstellen von Link-Konten und das Wiederverwenden der Konten für Ihre Kundinnen und Kunden einfacher.

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 contactDetailsElement = elements.create("contactDetails");
// 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
contactDetailsElement.mount("#contact-details-element");
paymentElement.mount("#payment-element");
```

Das `contactDetailsElement` 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 ihr/sein Mobiltelefon. Wenn sich die Kundin bzw. der Kunde erfolgreich authentifiziert hat, zeigt Stripe automatisch die bei Link gespeicherten Adressen und Zahlungsmethoden an, die verwendet werden können.

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 Contact Details Element, Payment Element und Shipping Address Element müssen sich nicht auf derselben Seite befinden. Wenn Kundenkontaktdaten, Versandinformationen und Zahlungsdaten Kundinnen und Kunden im Bezahlvorgang in separaten Schritten angezeigt werden, können Sie jedes Element im entsprechenden Schritt oder auf der entsprechenden Seite anzeigen. Nehmen Sie das Contact Details Element als E-Mail-Eingabeformular in die Erfassung von Kontaktinformationen auf. So stellen Sie sicher, dass Kundinnen und Kunden das von Link bereitgestellte automatische Ausfüllen der Versand- und Zahlungsinformationen in vollem Umfang nutzen können.

Fragen Sie am Anfang des Bezahlvorgangs E-Mail-Adressen von Kundinnen und Kunden mit dem Contact Details 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 `ContactDetailsElement` 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
contactDetailsElement.on('change', (event) => {
  const email = event.value.email;
});
```

### Eine Kunden-E-Mail-Adresse vorab eingeben

Das Contact Details Element akzeptiert E-Mail-Adressen. Das Angeben der Kunden-E-Mail-Adresse startet den Link-Authentifizierungsablauf, sobald die Kundin oder der Kunde über die Option `defaultValues` auf die Zahlungsseite gelangt.

```javascript
// Create contactDetails element with the defaultValues option
const contactDetailsElement = elements.create("contactDetails", {defaultValues: {email: "foo@bar.com"}});

// Mount the Element to its corresponding DOM node
contactDetailsElement.mount("#contact-details-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.
![Vorausgefüllte Informationen im Link-Anmeldeformular.](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-pe-new-user.aad0d37d3e3698f1aab307d020b95f90.png)

Geben Sie die E-Mail-Adresse, die Telefonnummer und den Namen Ihres Kunden/Ihrer Kundin vorab ein, um die Link-Anmeldung 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
  <PaymentElement
    options={{
      defaultValues: {
        billingDetails: {
          email: 'johnd@domain.com',
          name: 'John Doe',
          phone: '888-888-8888',
          address: {
            postal_code: '10001',
            country: 'US',
          }
        },
      },
    }}
  />;
```

#### 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()};
});
```

#### Contact Details Element verwenden

Wenn Sie das Contact Details Element verwenden, fügen Sie das `defaultValues.billingDetails`-Objekt zum Payment Element hinzu, um den Namen, die Telefonnummer sowie die Versandadresse der Kundin bzw. des Kunden vorab ausfüllen können. Das Vorausfüllen möglichst vieler Kundendaten vereinfacht das Erstellen und Wiederverwenden von Link-Konten.
![Vorausgefüllte Informationen im Opt-in-Formular von {% $link.brand_name %}.](https://b.stripecdn.com/docs-statics-srv/assets/link-prefill-cde-new-user.aa6e5022c718b22857f543fcaad20705.png)

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
<PaymentElement
  options={{
    defaultValues: {
      billingDetails: {
        name: 'John Doe',
        phone: '888-888-8888',
        address: {
          postal_code: '10001',
          country: 'US',
        }
      },
    },
  }}
/>;
```

#### 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 von Kundinnen und Kunden erfasst. Wenn Sie eine Versandadresse erfassen müssen, integrieren Sie Link mithilfe von Contact Details Element, Address Element und Payment Element. Befolgen Sie dazu die Schritte unter [Contact Details Element verwenden](https://docs.stripe.com/payments/link/add-link-elements-integration.md#collect-shipping).

#### Contact Details Element verwenden

#### React

Um Adressen zu erfassen, erstellen Sie einen leeren DOM-Knoten, in den das [Address Element](https://docs.stripe.com/elements/address-element.md) gerendert wird. Das Address Element muss nach dem Contact Details Element angezeigt werden, damit Link die gespeicherten Adressdaten der Kundin oder des Kunden automatisch ausfüllen kann:

```jsx
import {loadStripe} from "@stripe/stripe-js";
import {
  Elements,
  ContactDetailsElement,AddressElement,
  PaymentElement,
} from "@stripe/react-stripe-js";

const stripe = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

// 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}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {
  return (
    <form>
      <h3>Contact info</h3>
      <ContactDetailsElement /><h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />
      <button type="submit">Submit</button>
    </form>
  );
}
```

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
<AddressElement onChange={(event) => {
  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
<AddressElement options={{
  mode: 'shipping',
  defaultValues: {
    name: 'Jane Doe',
    address: {
      line1: '354 Oyster Point Blvd',
      line2: '',
      city: 'South San Francisco',
      state: 'CA',
      postal_code: '94080',
      country: 'US',
    }
  }
}}>
```

#### 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 Contact Details Element an:

```html
<form id="payment-form">
  <h3>Contact info</h3>
  <div id="contact-details-element"></div><h3>Shipping</h3>
  <div id="address-element"></div>

  <h3>Payment</h3>
  <div id="payment-element"></div>

  <button type="submit">Submit</button>
</form>
```

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('<<YOUR_PUBLISHABLE_KEY>>');

// 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 contactDetailsElement = elements.create("contactDetails");const addressElement = elements.create("address", {
  mode: 'shipping',
  allowedCountries: ['US']
});
const paymentElement = elements.create("payment");

// Mount the Elements to their corresponding DOM node
contactDetailsElement.mount("#contact-details-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](https://b.stripecdn.com/docs-statics-srv/assets/appearance_example.e076cc750983bf552baf26c305e7fc90.png)

Erscheinungsbild Ihrer Elements anpassen

## SetupIntent übermitteln [Clientseitig]

Verwenden Sie [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup), um die Einrichtung mit den erfassten Angaben abzuschließen. Geben Sie eine [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) für diese Funktion an, damit Stripe Nutzer/innen weiterleiten kann, nachdem sie die Einrichtung abgeschlossen haben. Wenn eine Zahlung erfolgreich ist, leitet Stripe Link- und Kartenzahlungen sofort an die `return_url` weiter.

#### 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('<<YOUR_PUBLISHABLE_KEY>>');

const appearance = {/* ... */};

// Enable the skeleton loader UI for the optimal loading experience.
const loader = 'auto';

const CheckoutPage =({clientSecret}) => (
  <Elements stripe={stripe} options={{clientSecret, appearance, loader}}>
    <CheckoutForm />
  </Elements>
);

export default function CheckoutForm() {const stripe = useStripe();
  const elements = useElements();
const handleSubmit = async (event) => {
    event.preventDefault();

    const {error} = await stripe.confirmSetup({
      elements,
      confirmParams: {
        return_url: "https://example.com/order/123/complete",
      },
    });

    if (error) {
      // handle error
    }
  };

  return (<form onSubmit={handleSubmit}>
      <h3>Contact info</h3>
      <LinkAuthenticationElement />
      {/* If collecting shipping */}
      <h3>Shipping</h3>
      <AddressElement options={{mode: 'shipping', allowedCountries: ['US']}} />
      <h3>Payment</h3>
      <PaymentElement />

      <button type="submit">Submit</button>
    </form>
  );
}
```

#### HTML + JS

```javascript
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    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 gespeicherte Zahlungsmethode später belasten [Serverseitig]

#### Accounts&nbsp;v2

Wenn Sie bereit sind, eine Abbuchung von Ihrer Kundin oder Ihrem Kunden vorzunehmen, erstellen Sie einen `PaymentIntent` mithilfe der IDs für `Account` und `PaymentMethod`.

Listen Sie zunächst die mit Ihrer Kundin oder Ihrem Kunden verknüpften Zahlungsmethoden auf und wählen Sie eine aus, die verwendet werden soll.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer_account={{CUSTOMERACCOUNT_ID}}" \
  -d type=link
```

#### Customers&nbsp;v1

Wenn Sie bereit sind, eine Abbuchung von Ihrer Kundin oder Ihrem Kunden vorzunehmen, erstellen Sie einen `PaymentIntent` mithilfe der IDs für `Customer` und `PaymentMethod`.

Listen Sie zunächst die mit Ihrer Kundin oder Ihrem Kunden verknüpften Zahlungsmethoden auf und wählen Sie eine aus, die verwendet werden soll.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=link
```

Erstellen Sie dann einen `PaymentIntent` mit diesen Parametern:

- Legen Sie [amount](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) und die [currency](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency) der Zahlung entsprechend fest.
- Setzen Sie [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) auf „true“. Das führt dazu, dass die Bestätigung sofort nach Erstellung des `PaymentIntent` erfolgt.
- Setzen Sie [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) auf die ID der `PaymentMethod`.
- Setzen Sie [customer_account](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-customer_account) auf die `Account`-ID oder setzen Sie [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) auf die `Customer`-ID.
- Setzen Sie [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) auf „true“. Das bewirkt, dass der `PaymentIntent` einen Fehler ausgibt, wenn eine Authentifizierung erforderlich ist, während Ihre Kundin oder Ihr Kunde Ihre Website oder App nicht aktiv nutzt.

#### Accounts&nbsp;v2

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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&nbsp;v1

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -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
```

## 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&nbsp;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&nbsp;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&nbsp;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.

## 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

- [Link im Payment Element](https://docs.stripe.com/payments/link/payment-element-link.md)
- [Erkunden Sie das Contact Details Element](https://docs.stripe.com/payments/link/contact-details-element.md)
- [Link in verschiedenen Zahlungsintegrationen](https://docs.stripe.com/payments/link/link-payment-integrations.md)