# Zahlungen mit dem Express Checkout Element annehmen

Verwenden Sie eine einzige Integration, um Zahlungen über die Zahlungsschaltflächen mit einem Klick anzunehmen.
![Express Checkout Element](https://b.stripecdn.com/docs-statics-srv/assets/link-in-express-checkout-element.67be6745e5a37c1c09074b0f43763cff.png)

Das Express Checkout Element ist eine Integration zum Akzeptieren von Zahlungen über Schaltflächen für die jeweiligen Zahlungsmethoden mit einem Klick. Zu den unterstützten Zahlungsmethoden gehören [Link](https://docs.stripe.com/payments/link.md), [Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md), [Klarna](https://docs.stripe.com/payments/klarna.md) und [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md).

Je nach Gerät und Browser werden den Kundinnen und Kunden unterschiedliche Zahlungsschaltflächen angezeigt. Kompatible Geräte unterstützen automatisch Google Pay und Link. Für die Unterstützung von Apple Pay und PayPal müssen Sie zusätzliche Schritte durchführen.

## Demoversion testen

In der folgenden Demo können Sie einige der vorgefertigten Optionen ein- und ausschalten, um die Hintergrundfarbe, das Layout, die Größe und die Versandadressenerfassung der Zahlungsoberfläche zu ändern. Die Demo zeigt Google Pay und Apple Pay nur auf den jeweils verfügbaren Plattformen an. Schaltflächen für Zahlungsmethoden werden nur in den unterstützten Ländern angezeigt.

Wenn Sie die Demo nicht sehen, versuchen Sie, diese Seite in einem [unterstützten Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) anzuzeigen.

| Option                              | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                   |
| ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Land der Händlerin/des Händlers** | Legen Sie dies mit dem [veröffentlichbaren Schlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) fest, den Sie zum [Initialisieren von Stripe.js](https://docs.stripe.com/js/initializing) verwenden. Um das Land zu ändern, müssen Sie die Bereitstellung des Express Checkout Element aufheben, den veröffentlichbaren Schlüssel aktualisieren und dann das Express Checkout Element erneut verbinden. |
| **Hintergrundfarbe**                | Legen Sie Farben mit der [Elements Appearance API](https://docs.stripe.com/elements/appearance-api.md) fest. Schaltflächendesigns werden von der Appearance API übernommen, aber Sie können sie auch [direkt definieren, wenn Sie das Element erstellen](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme).                      |
| **Desktop- und Mobilgröße**         | Verwenden Sie das Dropdown-Menü, um die maximale Pixelbreite des übergeordneten Elements festzulegen, mit dem das Express Checkout Element verbunden ist. Sie können es auf 750px (Desktop) oder 320px (Mobil) festlegen.                                                                                                                                                                                      |
| **Max. Anzahl Spalten und Zeilen**  | Legen Sie diese Werte mit dem Parameter [Layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) fest, wenn Sie das [Express Checkout Element erstellen](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                               |
| **Überlaufmenü**                    | Legen Sie dies mit dem Parameter [Layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) fest, wenn Sie das [Express Checkout Element erstellen](https://docs.stripe.com/js/elements_object/create_express_checkout_element).                                                                                                      |
| **Versandadresse erfassen**         | Um Versanddaten zu erfassen, müssen Sie beim [Erstellen](https://docs.stripe.com/js/elements_object/create_express_checkout_element) des Express Checkout-Element Optionen übergeben. Erfahren Sie mehr über die [Erfassung von Kundendaten und die Anzeige von Einzelposten](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event).                              |

# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=embedded-components.

## Before you begin

1. Ihrem Browser eine Zahlungsmethode hinzufügen. Beispiel: Sie können Ihrem Google Pay-Konto bzw. Ihrer Wallet für Safari eine Karte hinzufügen.
1. Ihre Anwendung über HTTPS bereitstellen. Dies ist eine Voraussetzung sowohl in der Entwicklung als auch in der Produktion. Sie können einen Dienst wie [ngrok](https://ngrok.com/) verwenden.
1. [Registrieren Sie Ihre Domain](https://dashboard.stripe.com/settings/payment_method_domains) sowohl in einer *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) als auch im Live-Modus.

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

## Zahlungsmethoden aktivieren

Standardmäßig verwendet Stripe Ihre [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods), um zu bestimmen, welche Zahlungsmethoden im Express Checkout Element aktiviert sind. Sie können auch bestimmte Zahlungsmethoden in Ihrer Checkout-Sitzung mit dem Attribut [zahlung_method_types](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_method_types) konfigurieren.

### Unterstützte Zahlungsmethoden

Apple Pay und Google Pay sind automatisch aktiviert, wenn der Zahlungsmethodentyp `Karte` verwendet wird. Wenn Sie Link verwenden, müssen Sie auch den Zahlungsmethodentyp `Karte` übergeben.

| Zahlungsmethode | Art der Zahlungsmethode |
| --------------- | ----------------------- |
| Amazon Pay      | `amazon_pay`            |
| Apple Pay       | `card`                  |
| Google Pay      | `card`                  |
| Link            | `link`, `card`          |
| PayPal          | `paypal`                |

## Checkout-Sitzung erstellen [Serverseitig]

Erstellen Sie eine Checkout-Sitzung auf Ihrem Server, um den Zahlungsablauf zu steuern. Die Checkout-Sitzung definiert Ihre Posten, Versandoptionen und andere Einstellungen für die Zahlung.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  -d return_url={{RETURN_URL}}
```

Setzen Sie `ui_mode` auf `elements` zur Integration in das Express Checkout Element. Die zurückgegebene Checkout-Sitzung enthält ein Client-Geheimnis, das der Client verwendet, um die Checkout-Oberfläche sicher anzuzeigen.

Sie können zusätzliche Optionen für die Checkout-Sitzung konfigurieren:

- [phone_number_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-phone_number_collection): Telefonnummern von Kund/innen erfassen
- [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection): Versandadressen erfassen
- [shipping_options](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_options): Versandtarifoptionen angeben
- [automatic_tax](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-automatic_tax): Automatische Steuerberechnung ermöglichen

## Stripe Elements [Clientseitig]

#### HTML + JS

Das Express Checkout Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es dem head Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Rufen Sie das Client-Geheimnis von Ihrem Server ab:

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

Erstellen Sie eine `fetchClientSecret`-Funktion, um das Client-Geheimnis von Ihrem Server abzurufen:

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);
```

Checkout-Instanz erstellen:

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret
});
```

#### React

Das Express Checkout Element ist automatisch als Funktion von Stripe.js verfügbar. 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
```

Erstellen Sie `clientSecret` als `Promise<string> | string`, die das von Ihrem Server zurückgegebene Client-Geheimnis enthält.

Umhüllen Sie Ihre Anwendung mit der Komponente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) und übergeben Sie dabei `clientSecret` und die `Stripe`-Instanz.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import {loadStripe} from '@stripe/stripe-js';
import CheckoutForm from './CheckoutForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripePromise}
      options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

## Erstellen und verbinden Sie das Express Bezahlvorgang Element [Clientseitig]

Ein Express Checkout Element enthält ein iframe, dass die Zahlungsdaten über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlvorgangseite muss ebenfalls mit `https://`, beginnen, nicht mit `http://`, damit Ihre Integration funktioniert.

#### HTML + JS

Das Express Checkout Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular.

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

Wenn das Formular geladen wurde, erstellen Sie eine Instanz des Express Checkout Element und verbinden es mit dem Container DOM-Knoten.

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

Fügen Sie die Komponente `ExpressCheckoutElement` zu Ihrer Bezahlseite hinzu.

```jsx
import React from 'react';
import {useCheckout, ExpressCheckoutElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## Kundendaten erfassen und Einzelposten anzeigen [Clientseitig]

Die auf dem Server erstellte Checkout-Sitzung ermittelt automatisch die Posten, den Gesamtbetrag und die verfügbaren Zahlungsmethoden. Das Express Checkout Element verwendet diese Informationen, um die entsprechende Oberfläche anzuzeigen.

#### HTML + JS

### Zahlungsbestätigung verarbeiten

Überwachen Sie das [Bestätigungsereignis](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event), wenn Ihr/e Kund/in die Zahlung abschließt:

```javascript
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  expressCheckoutElement.on('confirm', (event) => {
    loadActionsResult.actions.confirm({expressCheckoutConfirmEvent: event});
  });
}
```

### Dynamische Updates verarbeiten

Wenn die Checkout-Sitzung basierend auf der Kundenauswahl aktualisieren werden soll (z.&nbsp;B. Versandadresse oder Änderungen der Versandtarife), können Sie Ereignisse überwachen und die Sitzung aktualisieren:

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: event.address
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});

expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: event.shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    event.reject();
  } else {
    event.resolve();
  }
});
```

#### React

### Zahlungsbestätigung verarbeiten

Verarbeiten Sie das `confirm`-Ereignis, wenn Ihr/e Kund/in die Zahlung abschließt:

```jsx
import {useCheckout, ExpressCheckoutElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckout();

  if (checkoutState.type === 'loading') {
    return <div>Loading...</div>;
  } else if (checkoutState.type === 'error') {
    return <div>Error: {checkoutState.error.message}</div>;
  }

  const handleConfirmExpressCheckout = (event) => {
    if (checkoutState.type === 'success') {
      checkoutState.checkout.confirm({expressCheckoutConfirmEvent: event});
    }
  };

  return (
    <div>
      {checkoutState.type === 'success' && (
        <pre>
          {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
          Total: {checkoutState.checkout.total?.amount}
        </pre>
      )}
      <ExpressCheckoutElement onConfirm={handleConfirmExpressCheckout} />
    </div>
  );
};
```

### Dynamische Updates verarbeiten

Wenn die Checkout-Sitzung basierend auf der Kundenauswahl aktualisieren werden soll (z.&nbsp;B. Versandadresse oder Änderungen der Versandtarife), können Sie Ereignisse überwachen und die Sitzung aktualisieren:

```jsx
const onShippingAddressChange = async ({resolve, reject, address}) => {
  const response = await fetch('/update-session-shipping', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingAddress: address
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

const onShippingRateChange = async ({resolve, reject, shippingRate}) => {
  const response = await fetch('/update-session-shipping-rate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      sessionId: checkout.session.id,
      shippingRateId: shippingRate.id
    })
  });
  const result = await response.json();

  if (result.error) {
    reject();
  } else {
    resolve();
  }
};

<ExpressCheckoutElement
  onConfirm={handleConfirmExpressCheckout}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
/>
```

## Optional: Überwachen Sie das Ereignis „Ready“ [Clientseitig]

Nach der Bereitstellung zeigt das Express Checkout Element für kurze Zeit keine Schaltflächen an. Um das Element zu animieren, wenn Schaltflächen angezeigt werden, überwachen Sie das [Ereignis „Ready“](https://docs.stripe.com/js/element/events/on_ready). Prüfen Sie den Wert von `availablePaymentMethods`, um zu bestimmen, welche Schaltflächen gegebenenfalls im Express Checkout Element angezeigt werden.

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

```jsx
import React, {useState} from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');

  const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}
          onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: Schaltfläche anpassen [Clientseitig]

Sie können jede Schaltfläche für Zahlungen anders gestalten und das Gesamtbild des Express Checkout Elements kontrollieren.

#### HTML + JS

```javascript
const expressCheckoutElement = checkout.createExpressCheckoutElement({
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const expressCheckoutOptions = {
  // Specify a type per payment method
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow'
  },
  // Specify a theme per payment method
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};

<ExpressCheckoutElement
  options={expressCheckoutOptions}
  onConfirm={onConfirm}
/>
```

## Integration testen

[Testen](https://docs.stripe.com/testing.md) Sie die Integration der einzelnen Zahlungsmethoden, bevor Sie live gehen. Informationen zur Kompatibilität der Browser mit einer Zahlungsmethode finden Sie unter [unterstützte Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). Wenn Sie das Express Checkout Element in einem iFrame verwenden, muss das [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest)-Attribut des iFrame auf `payment *` gesetzt werden.

#### Link

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

#### Wallets

> #### Regionale Tests
> 
> Stripe Elements unterstützt weder Google Pay noch Apple Pay für Stripe-Konten und Kundinnen und Kunden in Indien. Daher können Sie Ihre Google Pay- oder Apple Pay-Integration nicht testen, wenn sich die IP-Adresse der testenden Person in Indien befindet, selbst wenn sich das Stripe-Konto außerhalb Indiens befindet.

### Apple Pay

Stripe-Testkarteninformationen können nicht in Apple Pay gespeichert werden. Stripe erkennt aber, wenn Sie Ihre [Test-API-Schlüssel](https://docs.stripe.com/keys.md) verwenden, und gibt ein Testkarten-Token zurück. So können Sie Testzahlungen mit einer Live-Karte durchführen, ohne dass diese belastet wird.

Stellen Sie sicher, dass Sie eine [registrierte Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) und einen [unterstützten Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) verwenden und eine aktive Karte in Ihrem Apple Pay Wallet gespeichert ist.

### Google Pay

Stripe-Testkarteninformationen können nicht in Google Pay gespeichert werden. Stripe erkennt aber, wenn Sie Ihre Test-API-Schlüssel verwenden, und gibt ein Testkarten-Token zurück. So können Sie Testzahlungen mit einer Live-Karte durchführen, ohne dass diese belastet wird. Sie können auch die [Testkarten-Suite](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) von Google Pay verwenden, um Ihre Integration zu testen.

Stellen Sie sicher, dass Sie sich eine [registrierte Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) und einen [unterstützten Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) verwenden und eine aktive Karte in Ihrem Google Pay Wallet gespeichert ist.

### PayPal

So testen Sie Ihre PayPal-Integration:

1. Erstellen Sie ein [Sandbox-Testkonto](https://developer.paypal.com/dashboard/accounts) und stellen Sie sicher, dass Sie sich im Sandbox-Modus befinden.
1. Klicken Sie im Express Checkout Element auf die Schaltfläche **PayPal** und melden Sie sich mit der generierten E-Mail-Adresse und dem Passwort aus dem Sandbox-Konto an. Sie können kein persönliches PayPal-Konto in einer Sandbox verwenden.
1. Falls noch nicht geschehen, [registrieren](https://dashboard.stripe.com/settings/payment_method_domains) Sie Ihre Domain.

#### Amazon Pay

So erstellen Sie ein Sandbox-Testkonto für Amazon Pay:

1. Klicken Sie im Sandbox-Modus auf die Schaltfläche **Amazon Pay**.
1. Klicken Sie auf **Amazon-Konto erstellen**.
1. Verwenden Sie Ihr Sandbox-Konto, um Ihre Integration mit Ihren [Test-API-Schlüsseln](https://docs.stripe.com/keys.md) zu testen.

Verwenden Sie die folgenden Karten, um Payments in der Amazon Pay Sandbox zu simulieren:

| Karte                            | Ergebnis    |
| -------------------------------- | ----------- |
| Discover mit den Endziffern 9424 | Erfolgreich |
| Visa mit den Endziffern 1111     | Erfolgreich |
| Visa mit den Endziffern 0701     | 3D Secure   |
| Amex mit den Endziffern 0005     | Ablehnen    |
| JCB mit den Endziffern 0000      | Ablehnen    |

## Optional: Express Checkout Element mit Stripe Connect verwenden

*Connect*-Plattformen können das Express Checkout Element mit Checkout-Sitzungen verwenden, indem sie das verbundene Konto in die Sitzung aufnehmen.

> #### Use the Accounts v2 API to represent customers
> 
> If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md).

1. Fügen Sie beim Erstellen der Checkout-Sitzung auf Ihrem Server das verbundenes Konto ein:

   ```curl
   curl https://api.stripe.com/v1/checkout/sessions \
     -u sk_test_...: \
     -d "line_items[0][price]"="price_..." \
     -d "line_items[0][quantity]"=1 \
     -d "mode"="payment" \
     -d "ui_mode"="elements" \
     -d "return_url"="https://example.com/return" \
     -H "Stripe-Account: {{CONNECTED_ACCOUNT_ID}}"
   ```

1. [Registrieren Sie alle Domains](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect), auf denen Sie das Express Checkout Element anzeigen möchten.

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

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Checkout-Sitzungen](https://docs.stripe.com/payments/checkout.md)
- [Zahlungen auf dem Server abschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements. View the full page at https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?payment-ui=elements.

Wir empfehlen Ihnen, bei Verwendung des Express Checkout Element Zahlungsdetails zu erfassen, bevor ein Intent erstellt wird. Wenn Sie zuvor das [Payment Element](https://docs.stripe.com/payments/payment-element.md) integriert haben, müssen Sie möglicherweise [Ihre Integration auf diese bessere Option aktualisieren](https://docs.stripe.com/payments/accept-a-payment-deferred.md).

## Before you begin

- Ihrem Browser eine Zahlungsmethode hinzufügen. Beispiel: Sie können Ihrem Google Pay-Konto bzw. Ihrer Wallet für Safari eine Karte hinzufügen.
- Ihre Anwendung über HTTPS bereitstellen. Dies ist eine Voraussetzung sowohl in der Entwicklung als auch in der Produktion. Sie können einen Dienst wie [ngrok](https://ngrok.com/) verwenden.
- [Registrieren Sie Ihre Domain](https://dashboard.stripe.com/settings/payment_method_domains) sowohl in einer *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) als auch im Live-Modus.

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

## Zahlungsmethoden aktivieren

In der Standardeinstellung verwendet Stripe Ihre [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods), um festzustellen, welche Zahlungsmethoden im Express Checkout-Element aktiviert sind.

Um manuell zu überschreiben, welche Zahlungsmethoden aktiviert sind, listen Sie alle auf, die Sie mit dem Attribut `payment_method_types` aktivieren möchten.

- Wenn Sie Zahlungen einziehen, bevor Sie einen Intent erstellen, listen Sie Zahlungsmethoden im [Attribut `paymentMethodTypes` der Optionen Ihres Element-Anbieters](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes) auf.
- Wenn Sie vor dem Rendern von Elementen einen Intent erstellen, listen Sie Zahlungsmethoden im [Attribut `payment_method_types` Ihres Intents auf](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

### Unterstützte Zahlungsmethoden

Apple Pay und Google Pay werden automatisch aktiviert, wenn die Zahlungsmethode `card` verwendet wird. Bei der Verwendung von Link müssen Sie zusätzlich die Zahlungsmethode `card` angeben.

| Name der Zahlungsmethode | Parameter für die Zahlungsmethoden-API |
| ------------------------ | -------------------------------------- |
| Apple Pay                | `card`                                 |
| Google Pay               | `card`                                 |
| Link                     | `link, card`                           |
| PayPal                   | `paypal`                               |
| Amazon Pay               | `amazon_pay`                           |
| Klarna                   | `klarna`                               |

## Stripe Elements [Clientseitig]

#### HTML + JS

Das Express Checkout Element ist automatisch als Funktion von Stripe.js verfügbar. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es dem head Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket 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 auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:

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

Erstellen Sie dann eine Instanz von Elements mit dem [Modus](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode) (Zahlung, Einrichtung oder Abonnement), dem [Betrag](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-amount) und der [Währung](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-currency). Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen und Kunden angezeigt werden sollen. Weitere konfigurierbare Elements-Optionen finden Sie im nächsten Schritt.

```javascript
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  // Customizable by using the Appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form.
const elements = stripe.elements(options);
```

#### React

Das Express Checkout Element ist automatisch als Funktion von Stripe.js verfügbar. 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
```

Um die Express Checkout Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter.

Der `Elements`-Provider akzeptiert auch den Modus (Zahlung, Einrichtung oder Abonnement), den Betrag und die Währung. Viele Zahlungsmethoden, einschließlich Apple Pay und Google Pay, verwenden diese Werte in ihrer Nutzeroberfläche. Im nächsten Schritt finden Sie weitere konfigurierbare Optionen für Elements.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

import CheckoutPage from './CheckoutPage';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {mode: 'payment',
    amount: 1099,
    currency: 'usd',
    // Customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutPage />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

## Optional: Optionen für zusätzliche Elemente [Client-seitig]

Das [Elements-Objekt](https://docs.stripe.com/js/elements_object/create_without_intent) akzeptiert zusätzliche Optionen, die die Zahlungserfassung beeinflussen. Basierend auf den angegebenen Optionen zeigt das Express Checkout Element die verfügbaren Zahlungsmethoden an, die Sie aktiviert haben. Erfahren Sie mehr über die [Unterstützung von Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/payment-method-support.md).

Stellen Sie sicher, dass die von Ihnen angegebenen Elements-Optionen (wie `captureMethod`, `setupFutureUsage` und `paymentMethodOptions`) mit den entsprechenden Parametern übereinstimmen, die Sie beim Erstellen und Bestätigen des Intent übergeben. Nicht übereinstimmende Parameter können zu unerwartetem Verhalten oder Fehlern führen.

| Eigentum                     | Typ                                                | Beschreibung                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Erforderlich                               |
| ---------------------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `mode`                       | - `payment`
  - `setup`
  - `subscription`         | Gibt an, ob das Express Checkout Element mit einem *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods), *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) oder *Abonnement* (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) verwendet wird. | Ja                                         |
| `currency`                   | `string`                                           | Die Währung des Betrags, der dem Kunden/der Kundin berechnet werden soll.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Ja                                         |
| `amount`                     | `number`                                           | Der Betrag, der dem Kunden/der Kundin in Rechnung gestellt werden soll, angezeigt in Apple Pay, Google Pay oder BNPL-Nutzeroberflächen.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Für den Modus `payment` und `subscription` |
| `setupFutureUsage`           | - `off_session`
  - `on_session`                   | Gibt an, dass Sie beabsichtigen, zukünftige Zahlungen mit den vom Express Checkout Element erfassten Zahlungsdaten zu tätigen. Wird nicht unterstützt von Klarna mit dem Express Checkout Element.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Nein                                       |
| `captureMethod`              | - `automatic`
  - `automatic_async`
  - `manual`   | Steuert, wann die Gelder vom Kundenkonto erfasst werden.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Nein                                       |
| `onBehalfOf`                 | `string`                                           | Nur Connect. Die Stripe-Konto-ID, die das Unternehmen des Datensatzes ist. Weitere Informationen dazu, ob diese Option für Ihre Integration relevant ist, finden Sie unter [Use cases](https://docs.stripe.com/connect/charges.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Nein                                       |
| `paymentMethodTypes`         | `string[]`                                         | Eine Liste der zu rendernden Zahlungsmethodentypen. Sie können dieses Attribut weglassen, um Ihre Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) zu verwalten.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Nein                                       |
| `paymentMethodConfiguration` | `string`                                           | Die [Konfiguration der Zahlungsmethode](https://docs.stripe.com/api/payment_method_configurations.md), die bei der Verwaltung Ihrer Zahlungsmethoden im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwendet werden soll. Wenn keine Angabe gemacht wird, wird Ihre Standardkonfiguration verwendet.                                                                                                                                                                                                                                                                                                                                                                                                                                         | Nein                                       |
| `paymentMethodCreation`      | `manual`                                           | Ermöglicht die Erstellung von PaymentMethods aus der Elements-Instanz mit [stripe.createPaymentMethod](https://docs.stripe.com/js/payment_methods/create_payment_method_elements).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Nein                                       |
| `paymentMethodOptions`       | `{us_bank_account: {verification_method: string}}` | Verifizierungsoptionen für die Zahlungsmethode `us_bank_account`. Akzeptiert dieselben Verifizierungsmethoden wie [Payment Intents](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-us_bank_account-verification_method).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Nein                                       |
| `paymentMethodOptions`       | `{card: {installments: {enabled: boolean}}}`       | Ermöglicht die ggf. manuelle Aktivierung der Nutzeroberfläche zur Auswahl des Karten-Ratenzahlungsplans, wenn Sie Ihre Zahlungsmethoden nicht im [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Sie müssen `mode='payment'` festlegen *und* `paymentMethodTypes` explizit angeben. Andernfalls wird ein Fehler ausgelöst. Nicht kompatibel mit `paymentMethodCreation='manual'`.                                                                                                                                                                                                                                                                                                                                                      | Nein                                       |
| `paymentMethodOptions`       | `{[paymentMethod]: {setup_future_usage: string}}`  | Ermöglicht es Ihnen, `setup_future_usage` nur für Zahlungsmethoden anzugeben, die die Wiederverwendung unterstützen. Gilt nur, wenn der `mode` `payment` ist. Der Wert für jede Zahlungsmethode muss mit der entsprechenden `payment_method_options[paymentMethod][setup_future_usage]` im PaymentIntent während der Bestätigung übereinstimmen. Unterstützte Zahlungsmethoden und Werte finden Sie in der [Ressource zu Stripe.js](https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions).                                                                                                                                                                                                               | Nein                                       |

## Erstellen und verbinden Sie das Express Bezahlvorgang Element [Clientseitig]

Das Express Checkout Element enthält einen iFrame, der die Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet. Die Adresse der Bezahlseite muss außerdem mit `https://` und nicht mit `http://` beginnen, damit Ihre Integration funktioniert.

#### HTML + JS

Das Express Checkout Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular.

```html
<div id="express-checkout-element">
  <!-- Express Checkout Element will be inserted here -->
</div>
<div id="error-message">
  <!-- Display an error message to your customers here -->
</div>
```

Wenn das Formular geladen wurde, erstellen Sie eine Instanz des Express Checkout Element und verbinden es mit dem Container DOM-Knoten.

```javascript
// Create and mount the Express Checkout Element
const expressCheckoutElement = elements.create('expressCheckout');
expressCheckoutElement.mount('#express-checkout-element');
```

#### React

Fügen Sie die Komponente `ExpressCheckoutElement` zu Ihrer Bezahlseite hinzu.

```jsx
import React from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutPage = () => {
  return (
    <div id="checkout-page"><ExpressCheckoutElement onConfirm={onConfirm} />
    </div>
  );
};
```

## Kundendaten erfassen und Einzelposten anzeigen [Clientseitig]

Übergeben Sie Optionen beim [Erstellen](https://docs.stripe.com/js/elements_object/create_express_checkout_element) des Express Checkout Element.

#### HTML + JS

### Informationen zur zahlenden Person erfassen

Setzen Sie `emailRequired: wahr`, um E-Mail-Adressen zu erfassen und `phoneNumberRequired: wahr`, um Telefonnummern zu erfassen.

Die Standardeinstellung für `billingAddressRequired` hängt von Ihrer Integration ab:

- Wenn Sie beim Erstellen des Express Checkout Elements `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `LineItems` oder `Unternehmen` übergeben, ist `billingAddressRequired` standardmäßig „falsch“.
- Andernfalls ist `billingAddressRequired` standardmäßig auf „wahr“ gesetzt.

```javascript
elements.create('expressCheckout', {
  emailRequired: true,
  phoneNumberRequired: true
});
```

PayPal gibt normalerweise weder die Rechnungsadresse (mit Ausnahme des Landes) noch die Telefonnummer der Kundin/des Kunden an. Wenn sie nicht angegeben werden, enthält das „confirm“-Ereignis leere Zeichenfolgen für diese Eigenschaften. Wenn Sie die Rechnungsadresse oder Telefonnummer des Kunden/der Kundin benötigen, zeigt das Express Checkout Element die PayPal-Schaltfläche nur an, wenn diese Informationen verfügbar sind.

### Versandinformationen erfassen

Legen Sie `shippingAddressRequired: true` fest und übergeben Sie ein Array von [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates).

```javascript
elements.create('expressCheckout', {
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
});
```

Überwachen Sie das [Ereignis shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event), um zu erkennen, wann Kundinnen/Kunden eine Versandadresse auswählen. Sie müssen entweder `resolve` oder `reject` aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

> #### Datenschutz für die Versandadresse
> 
> Um den Datenschutz zu wahren, anonymisieren Browser möglicherweise die Versandadresse, indem sensible Informationen entfernt werden, die zur Berechnung der Versandkosten nicht erforderlich sind. Je nach Land können einige Felder fehlen oder teilweise geschwärzt sein. Beispielsweise darf die Versandadresse in den USA nur eine Stadt, ein Bundesland und eine Postleitzahl enthalten. Die vollständige Versandadresse wird im Objekt [Bestätigungsereignis](https://docs.stripe.com/js/elements_object/express_checkout_element_confirm_event#express_checkout_element_on_confirm-handler-shippingAddress) angezeigt, nachdem der Kauf in der Zahlungsschnittstelle des Browsers bestätigt wurde.

```javascript
expressCheckoutElement.on('shippingaddresschange', async (event) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: event.address
    })
  });
  const result = await response.json();
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

Überwachen Sie das [Ereignis shippingratechange event](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event), um zu erkennen, wann eine Kundin/ein Kunde eine Versandrate auswählt. Sie müssen entweder `resolve` oder `reject` aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

```javascript
expressCheckoutElement.on('shippingratechange', async (event) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: event.shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  event.resolve({
    lineItems: result.updatedLineItems,
  });
});
```

Überwachen Sie das [cancel-Ereignis](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) , um zu erkennen, wenn Kundinnen/Kunden die Zahlungsoberfläche schließen. Setzen Sie den Betrag auf den ursprünglichen Betrag zurück.

```javascript
expressCheckoutElement.on('cancel', () => {
  elements.update({amount: 1099})
});
```

### Einzelposten anzeigen

Übergeben Sie ein Array von [lineItems](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-lineItems):

```javascript
elements.create('expressCheckout', {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
});
```

### Apple Pay-Schnittstelle konfigurieren

So konfigurieren Sie die Apple Pay-Schnittstelle.

### Vom Händler initiierte Transaktionen (MIT)

Sie können wiederkehrende Zahlungen, zurückgestellte Zahlungen oder automatische Neuzahlungen einrichten, wenn Nutzer/innen den Kauf mit Apple Pay abschließen. Hierfür fordern Sie im `click`-Ereignis des Express Checkout Element den entsprechenden [Händler-Token-Typ](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=ece&mpan=auto-reload#merchant-token-types) an. Wir empfehlen die Implementierung von Apple Pay-Händler-Token, um die neuesten Richtlinien von Apple Pay einzuhalten und Ihre Integration zukunftssicher zu machen.

#### React

### Informationen zur zahlenden Person erfassen

Setzen Sie `emailRequired: wahr`, um E-Mail-Adressen zu erfassen und `phoneNumberRequired: wahr`, um Telefonnummern zu erfassen.

Die Standardeinstellung für `billingAddressRequired` hängt von Ihrer Integration ab:

- Wenn Sie beim Erstellen des Express Checkout Elements `allowedShippingCountries`, `phoneNumberRequired`, `shippingAddressRequired`, `emailRequired`, `applePay`, `LineItems` oder `Unternehmen` übergeben, ist `billingAddressRequired` standardmäßig „falsch“.
- Andernfalls ist `billingAddressRequired` standardmäßig auf „wahr“ gesetzt.

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true
};
```

### Versandinformationen erfassen

`shippingAddressRequired: true` festlegen und Array von [shippingRates](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-shippingRates) übergeben:

```jsx
const options = {
  emailRequired: true,
  phoneNumberRequired: true,
  shippingAddressRequired: true,
  allowedShippingCountries: ['US'],
  shippingRates: [
    {
      id: 'free-shipping',
      displayName: 'Free shipping',
      amount: 0,
      deliveryEstimate: {
        maximum: {unit: 'day', value: 7},
        minimum: {unit: 'day', value: 5}
      }
    },
  ]
};
```

Überwachen Sie das [Ereignis shippingaddresschange](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingaddresschange_event), um zu erkennen, wann Kundinnen/Kunden eine Versandadresse auswählen. Sie müssen entweder `resolve` oder `reject` aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

```jsx
const onShippingAddressChange = async ({resolve, address}) => {
  const response = await fetch('/calculate-shipping', {
    data: JSON.stringify({
      shippingAddress: address
    })
  });
  const result = await response.json();
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

Überwachen Sie das [Ereignis shippingratechange event](https://docs.stripe.com/js/elements_object/express_checkout_element_shippingratechange_event), um zu erkennen, wann eine Kundin/ein Kunde eine Versandrate auswählt. Sie müssen entweder `resolve` oder `reject` aufrufen, wenn Sie sich für die Handhabung dieses Ereignisses entschieden haben.

```jsx
const onShippingRateChange = async ({resolve, shippingRate}) => {
  const response = await fetch('/calculate-and-update-amount', {
    data: JSON.stringify({
      shippingRate: shippingRate
    })
  });
  const result = await response.json();
  elements.update({amount: result.amount})
  resolve({
    lineItems: result.updatedLineItems,
  });
};
```

Überwachen Sie das [cancel-Ereignis](https://docs.stripe.com/js/elements_object/express_checkout_element_cancel_event) , um zu erkennen, wenn Kundinnen/Kunden die Zahlungsoberfläche schließen. Setzen Sie den Betrag auf den ursprünglichen Betrag zurück.

```jsx
const onCancel = () => {
  elements.update({amount: 1099})
};
```

Fügen Sie den Ereignis-Handler hinzu, wenn Sie das Element erstellen.

```jsx
<ExpressCheckoutElementoptions={options}
  onConfirm={onConfirm}
  onShippingAddressChange={onShippingAddressChange}
  onShippingRateChange={onShippingRateChange}
  onCancel={onCancel}
/>
```

### Einzelposten anzeigen

Übergeben Sie ein Array von [lineItems](https://docs.stripe.com/js/elements_object/express_checkout_element_click_event#express_checkout_element_on_click-handler-resolve-lineItems).

```jsx
const options = {
  lineItems: [
    {
      name: 'Sample item',
      amount: 1000
    },
    {
      name: 'Tax',
      amount: 100
    },
    {
      name: 'Shipping cost',
      amount: 1000
    }
  ]
};
```

### Apple Pay-Schnittstelle konfigurieren

So konfigurieren Sie die Apple Pay-Schnittstelle.

### Vom Händler initiierte Transaktionen (MIT)

Wir stellen bestimmte Optionen zur Konfiguration für Apple Pay zur Verfügung. Legen Sie die `applePay.recurringPaymentRequest`[Option](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-applePay-recurringPaymentRequest) fest, um eine Anfrage zum Einrichten einer wiederkehrenden Zahlung anzugeben. Wenn angegeben, stellt Apple Pay ein [Händler-Token](https://developer.apple.com/apple-pay/merchant-tokens/) aus und bietet dem Kunden/der Kundin eine Möglichkeit, Zahlungsmethoden für eine wiederkehrende Zahlung zu verwalten.

```jsx
const options = {
  applePay: {
    recurringPaymentRequest: {
      paymentDescription: 'My subscription',
      managementURL: 'https://example.com/billing',
      regularBilling: {
        amount: 2500,
        label: 'Monthly subscription fee',
        recurringPaymentIntervalUnit: 'month',
        recurringPaymentIntervalCount: 1,
      },
    }
  }
};
```

## Optional: Überwachen Sie das Ereignis „Ready“ [Clientseitig]

Nach der Bereitstellung zeigt das Express Checkout Element für kurze Zeit keine Schaltflächen an. Um das Element zu animieren, wenn Schaltflächen angezeigt werden, überwachen Sie das [Ereignis „Ready“](https://docs.stripe.com/js/element/events/on_ready). Prüfen Sie den Wert von `availablePaymentMethods`, um zu bestimmen, welche Schaltflächen gegebenenfalls im Express Checkout Element angezeigt werden.

#### HTML + JS

```javascript
// Optional: If you're doing custom animations, hide the Element
const expressCheckoutDiv = document.getElementById('express-checkout-element');
expressCheckoutDiv.style.visibility = 'hidden';

expressCheckoutElement.on('ready', ({availablePaymentMethods}) => {
  if (!availablePaymentMethods) {
    // No buttons will show
  } else {
    // Optional: Animate in the Element
    expressCheckoutDiv.style.visibility = 'initial';
  }
});
```

#### React

```jsx
import React, {useState} from 'react';
import {ExpressCheckoutElement} from '@stripe/react-stripe-js';
import {onConfirm} from './confirmHandler';

const CheckoutPage = () => {
  // Optional: If you're doing custom animations, hide the Element
  const [visibility, setVisibility] = useState('hidden');
const onReady = ({availablePaymentMethods}) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      // Optional: Animate in the Element
      setVisibility('initial');
    }
  };

  return (
    <div id="checkout-page">
      <div id="express-checkout-element" style={{visibility}}>
        <ExpressCheckoutElement
          onConfirm={onConfirm}onReady={onReady}
        />
      </div>
    </div>
  );
};
```

## Optional: Legen Sie fest, wann Zahlungsschaltflächen angezeigt werden sollen [Clientseitig]

Sie können die im Express Checkout Element angezeigten Zahlungsmethoden auf verschiedene Arten verwalten:

- In den [Zahlungsmethodeneinstellungen](https://dashboard.stripe.com/settings/payment_methods) des Stripe-Dashboards.
- Durch Verwenden der Eigenschaft [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods), um die Zahlungsschaltflächen zu deaktivieren. Mit dieser Eigenschaft können Sie besser steuern, was Ihre Kundinnen/Kunden sehen.

Das Express Checkout Element zeigt Apple Pay oder Google Pay an, wenn der Kunde/die Kundin sich auf einer unterstützten Plattform befindet und über eine aktive Karte verfügt. Wenn Sie Apple Pay und Google Pay immer anzeigen möchten, auch wenn der Kunde/die Kundin keine aktive Karte hat, können Sie dies auch mit `paymentMethods` konfigurieren.

## Optional: Schaltfläche anpassen [Clientseitig]

Sie können jede Schaltfläche für Zahlungsmethoden individuell [anpassen](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme). Sehen Sie sich die Beispiele und Ressourcen der einzelnen Schaltflächendesigns und -typen für [Google Pay](https://developers.google.com/pay/api/web/guides/resources/customize) und [Apple Pay](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) an. Sie können auch die Variable `borderRadius` in der [Appearance API](https://docs.stripe.com/elements/appearance-api.md?platform=web#commonly-used-variables) verwenden:

#### HTML + JS

```javascript
const appearance = {
  variables: {
    // This controls the border-radius of the rendered Express Checkout Element
    borderRadius: '4px',
  }
};

// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});

elements.create('expressCheckout', {
  // Specify a type per payment method
  // Defaults to 'buy' for Google, 'plain' for Apple, and 'paypal' for PayPal
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out',
    paypal: 'buynow',
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
});
```

#### React

```jsx
const options = {
  mode: 'payment',
  amount: 1099,
  currency: 'usd',appearance: {
    variables: {
      // This controls the border-radius of the rendered Express Checkout Element
      borderRadius: '4px'
    }
  }
};

const expressCheckoutOptions = {
  // Specify a type per payment method
  // Defaults to 'buy' for Google and 'plain' for Apple
  buttonType: {
    googlePay: 'checkout',
    applePay: 'check-out'
  },
  // Specify a theme per payment method
  // Default theme is based on appearance API settings
  buttonTheme: {
    applePay: 'white-outline'
  },
  // Height in pixels. Defaults to 44. The width is always '100%'.
  buttonHeight: 55
};
```

Übergeben Sie diese `options` bei der Erstellung des Element- und `Elements`-Anbieters.

```jsx
<Elements stripe={stripePromise} options={options}>
  <ExpressCheckoutElementoptions={expressCheckoutOptions}
    onConfirm={onConfirm}
  />
</Elements>
```

## Optional: ConfirmationToken erstellen [Clientseitig]

Wenn der/die Kund/in eine Zahlung autorisiert, können Sie einen *ConfirmationToken* (ConfirmationTokens help capture data from your client, such as your customer's payment instruments and shipping address, and are used to confirm a PaymentIntent or SetupIntent) erstellen, der zur zusätzlichen Validierung oder Geschäftslogik vor der Bestätigung an Ihren Server gesendet wird. Sie müssen den erstellten ConfirmationToken sofort verwenden, um einen PaymentIntent oder SetupIntent zu bestätigen.

#### HTML + JS

```javascript
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  ...

  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create a ConfirmationToken using the details collected by the Express Checkout Element
  const {error, confirmationToken} = await stripe.createConfirmationToken({
    elements,
    params: {
      payment_method_data: {
        billing_details: {
          name: 'Jenny Rosen',
        }
      },
      return_url: 'https://example.com/order/123/complete'
    }
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
    return;
  }

  // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
  const res = await fetch('/create-intent', {
    method: 'POST',
    body: confirmationToken.id
  });
  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent
  const {error: confirmError} = await stripe.confirmPayment({
    clientSecret,
    confirmParams: {
      confirmation_token: confirmationToken.id
    },
  });

  if (confirmError) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(confirmError);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

```jsx
import React, { useState } from 'react';
import {useStripe, useElements, ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create a ConfirmationToken using the details collected by the Express Checkout Element
    const {error, confirmationToken} = await stripe.createConfirmationToken({
      elements,
      params: {
        payment_method_data: {
          billing_details: {
            name: 'Jenny Rosen',
          },
        },
        return_url: 'https://example.com/order/123/complete',
      }
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // creating the ConfirmationToken. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    }

    // Send the ConfirmationToken ID to your server for additional logic and attach the ConfirmationToken
    const res = await fetch('/create-intent', {
      method: 'POST',
      body: confirmationToken.id
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent
    const {error: confirmError} = await stripe.confirmPayment({
      clientSecret,
      confirmParams: {
        confirmation_token: confirmationToken.id
      },
    });

    if (confirmError) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(confirmError.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

## Erstellen Sie ein PaymentIntent [Serverseitig]

Das *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods)-Objekt von Stripe repräsentiert Ihre Absicht, Zahlungen einzuziehen, und dokumentiert Abbuchungsversuche und Zahlungsstatusänderungen im gesamten Vorgang.

Erstellen Sie einen PaymentIntent mit einem Betrag und einer Währung auf Ihrem Server. Dies muss mit den Angaben übereinstimmen, die Sie für die Instanz `stripe.elements` in [Schritt 3](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#set-up-elements) festgelegt haben. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, wie viel Sie berechnen möchten, und nicht auf dem Client. So wird verhindert, dass böswillige Kunden und Kundinnen ihre eigenen Preise festlegen.

#### Ruby

```ruby
require 'stripe'
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent' do
  # If you used a Tax Calculation, optionally recalculate taxes
  # confirmation_token = Stripe::ConfirmationToken.retrieve(params[:confirmation_token_id])
  # summarized_payment_details = summarize_payment_details(confirmation_token)

  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    # If you used a Tax Calculation, use its `amount_total`.
    # amount: summarized_payment_details.amount_total,
    amount: 1099,
    currency: 'usd',
    # Specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    # If you used a Tax Calculation, link it to the PaymentIntent to make sure any transitions accurately reflect the tax.
    # hooks: {
    #  inputs: {
    #    tax: {
    #      calculation: tax_calculation.id
    #    }
    #  }
    #}
  },
  #{
  #  stripe_version: '2025-09-30.preview' }
  )
  {client_secret: intent.client_secret}.to_json
end
```

Der zurückgegebene PaymentIntent enthält 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)), das clientseitig verwendet wird, um den Zahlungsvorgang sicher abzuschließen, ohne das gesamte PaymentIntent-Objekt zu übergeben. Es gibt verschiedene Möglichkeiten, das Client-Geheimnis an den Client zu übergeben.

## Zahlung an Stripe senden [Clientseitig]

Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit den Angaben aus dem Express Checkout Element abzuschließen.

> #### Vorab autorisierte Beträge
> 
> Für Amazon Pay, Klarna und PayPal muss der Betrag, den Sie im PaymentIntent bestätigen, mit dem Betrag übereinstimmen, den der Käufer/die Käuferin vorab autorisiert hat. Stimmen die Beträge nicht überein, wird die Zahlung abgelehnt.

Geben Sie eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Website weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Payments leitet bei erfolgreicher Zahlung sofort zur `return_url` weiter.

Wenn Sie nach Zahlungsabschluss keine Weiterleitung wünschen, legen Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` fest. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

#### HTML + JS

```javascript
const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
}

expressCheckoutElement.on('confirm', async (event) => {
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch('/create-intent', {
    method: 'POST',
  });
  const {client_secret: clientSecret} = await res.json();

  const {error} = await stripe.confirmPayment({
    // `elements` instance used to create the Express Checkout Element
    elements,
    // `clientSecret` from the created PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // The payment UI automatically closes with a success animation.
    // Your customer is redirected to your `return_url`.
  }
});
```

#### React

```jsx
import React from 'react';
import {useStripe, useElements, ExpressCheckoutElement} from '@stripe/react-stripe-js';

const CheckoutPage = () => {
  const stripe = useStripe();
  const elements = useElements();
  const [errorMessage, setErrorMessage] = useState();

  const onConfirm = async (event) => {
    if (!stripe) {
      // Stripe.js hasn't loaded yet.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    const {error: submitError} = await elements.submit();
    if (submitError) {
      setErrorMessage(submitError.message);
      return;
    }

    // Create the PaymentIntent and obtain clientSecret
    const res = await fetch('/create-intent', {
      method: 'POST',
    });
    const {client_secret: clientSecret} = await res.json();

    // Confirm the PaymentIntent using the details collected by the Express Checkout Element
    const {error} = await stripe.confirmPayment({
      // `elements` instance used to create the Express Checkout Element
      elements,
      // `clientSecret` from the created PaymentIntent
      clientSecret,
      confirmParams: {
        return_url: 'https://example.com/order/123/complete',
      },
    });

    if (error) {
      // This point is only reached if there's an immediate error when
      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
      setErrorMessage(error.message);
    } else {
      // The payment UI automatically closes with a success animation.
      // Your customer is redirected to your `return_url`.
    }
  };

  return (
    <div id="checkout-page">
      <ExpressCheckoutElement onConfirm={onConfirm} />
      {errorMessage && <div>{errorMessage}</div>}
    </div>
  );
};
```

## Integration testen

[Testen](https://docs.stripe.com/testing.md) Sie die Integration der einzelnen Zahlungsmethoden, bevor Sie live gehen. Informationen zur Kompatibilität der Browser mit einer Zahlungsmethode finden Sie unter [unterstützte Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). Wenn Sie das Express Checkout Element in einem iFrame verwenden, muss das [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest)-Attribut des iFrame auf `payment *` gesetzt werden.

#### Link

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

#### Wallets

> #### Regionale Tests
> 
> Stripe Elements unterstützt weder Google Pay noch Apple Pay für Stripe-Konten und Kundinnen und Kunden in Indien. Daher können Sie Ihre Google Pay- oder Apple Pay-Integration nicht testen, wenn sich die IP-Adresse der testenden Person in Indien befindet, selbst wenn sich das Stripe-Konto außerhalb Indiens befindet.

### Apple Pay

Stripe-Testkarteninformationen können nicht in Apple Pay gespeichert werden. Stripe erkennt aber, wenn Sie Ihre [Test-API-Schlüssel](https://docs.stripe.com/keys.md) verwenden, und gibt ein Testkarten-Token zurück. So können Sie Testzahlungen mit einer Live-Karte durchführen, ohne dass diese belastet wird.

Stellen Sie sicher, dass Sie eine [registrierte Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) sowie einen [unterstützten Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) verwenden und eine aktive Karte in Ihrem Apple Pay Wallet gespeichert ist. Alternativ können Sie die Option [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) `applePay` auf `always` festlegen, um die Anforderung einer aktiven gespeicherten Karte zu entfernen.

### Google Pay

Stripe-Testkarteninformationen können nicht in Google Pay gespeichert werden. Stripe erkennt aber, wenn Sie Ihre Test-API-Schlüssel verwenden, und gibt ein Testkarten-Token zurück. So können Sie Testzahlungen mit einer Live-Karte durchführen, ohne dass diese belastet wird. Sie können auch die [Testkarten-Suite](https://developers.google.com/pay/api/web/guides/resources/test-card-suite) von Google Pay verwenden, um Ihre Integration zu testen.

Stellen Sie sicher, dass Sie sich in einer [verifizierten Domain](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) sowie einem [unterstützten Browser](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers) befinden und eine aktive Karte in Ihrer Google Pay Wallet gespeichert ist. Alternativ können Sie die Option `googlePay` in [paymentMethods](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods) auf `always` festlegen, um eine aktive gespeicherten Karte als Anforderung zu entfernen.

### PayPal

So testen Sie Ihre PayPal-Integration:

1. Erstellen Sie ein [Sandbox-Testkonto](https://developer.paypal.com/dashboard/accounts) und stellen Sie sicher, dass Sie sich im Sandbox-Modus befinden.
1. Klicken Sie im Express Checkout Element auf die Schaltfläche **PayPal** und melden Sie sich mit der generierten E-Mail-Adresse und dem Passwort aus dem Sandbox-Konto an. Sie können kein persönliches PayPal-Konto in einer Sandbox verwenden.
1. Falls noch nicht geschehen, [registrieren](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) Sie Ihre Domain.

#### Amazon Pay

So erstellen Sie ein Sandbox-Testkonto für Amazon Pay:

1. Klicken Sie im Sandbox-Modus auf die Schaltfläche „Amazon Pay“.
1. Klicken Sie auf **Amazon-Konto erstellen**.
1. Verwenden Sie Ihr Sandbox-Konto, um Ihre Integration mit Ihren [Test-API-Schlüsseln](https://docs.stripe.com/keys.md) zu testen.

Verwenden Sie die folgenden Karten, um Zahlungen in Amazon Pay Sandbox zu simulieren.

| Karte                            | Ergebnis    |
| -------------------------------- | ----------- |
| Discover mit den Endziffern 9424 | Erfolgreich |
| Visa mit den Endziffern 1111     | Erfolgreich |
| Visa mit den Endziffern 0701     | 3D Secure   |
| Amex mit den Endziffern 0005     | Ablehnen    |
| JCB mit den Endziffern 0000      | Ablehnen    |

#### Klarna

Klarna erfordert eine [Domain-Registrierung](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

> Klarna verwendet Cookies zur Sitzungsverfolgung. Um verschiedene Standorte von Kundinnen und Kunden zu testen, melden Sie sich bitte aus der Klarna-Sandbox der vorherigen Sitzung ab und verwenden Sie die entsprechenden Auslöser.

Nachfolgend haben wir speziell ausgewählte Testdaten für die derzeit unterstützten Kundenländer zusammengestellt. In einer Sandbox nutzt Klarna die angegebene E-Mail-Adresse, um eine Transaktion zu genehmigen oder abzulehnen.

#### Australien

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970        | 03.05.1994               |
| Vorname        | Test              | John                     |
| Nachname       | Person-au         | schnee                   |
| Straße         | Wharf St          | Silverwater Rd           |
| Hausnummer     | 4                 | 1 bis 5                  |
| Postleitzahl   | 4877              | 2128                     |
| Stadt          | Port Douglas      | Silverwater              |
| Region         | QLD               | NSW                      |
| Telefon        | +61473752244      | +61473763254             |
| E-Mail-Adresse | customer@email.au | customer+denied@email.au |

#### Österreich

|                | Genehmigt          | Abgelehnt                |
| -------------- | ------------------ | ------------------------ |
| Geburtsdatum   | 10-07-1970         | 10-07-1970               |
| Vorname        | Test               | Test                     |
| Nachname       | Person-at          | Person-at                |
| E-Mail-Adresse | customer@email.at  | customer+denied@email.at |
| Straße         | Mariahilfer Straße | Mariahilfer Straße       |
| Hausnummer     | 47                 | 47                       |
| Ort            | Wien               | Wien                     |
| Postleitzahl   | 1060               | 1060                     |
| Telefon        | +4306762600456     | +4306762600745           |

#### Belgien

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-be         | Person-be                |
| E-Mail-Adresse | customer@email.be | customer+denied@email.be |
| Straße         | Grote Markt       | Grote Markt              |
| Hausnummer     | 1                 | 1                        |
| Ort            | Belgien           | Belgien                  |
| Postleitzahl   | 1000              | 1000                     |
| Telefon        | +32485121291      | +32485212123             |

#### Kanada

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-ca         | Person-ca                |
| Straße         | 2693 Byron Rd     | 2693 Byron Rd            |
| Postleitzahl   | V7H 1L9           | V7H 1L9                  |
| Stadt          | Nord-Vancouver    | Nord-Vancouver           |
| Region         | BC                | BC                       |
| Telefon        | +15197438620      | +15197308624             |
| E-Mail-Adresse | customer@email.ca | customer+denied@email.ca |

#### Tschechien

|              | Genehmigt          | Abgelehnt                |
| ------------ | ------------------ | ------------------------ |
| Geburtsdatum | 01.01.1970         | 27.06.1992               |
| Vorname      | Test               | Test                     |
| Nachname     | Person-cz          | Person-cz                |
| E-Mail       | customer@email.cz  | customer+denied@email.cz |
| Straße       | Zazvorkova 1480/11 | Zázvorkova 1480/11       |
| Postleitzahl | 155 00             | 155 00                   |
| Stadt        | Prag               | PRAHA 13                 |
| Telefon      | +420771613715      | +420771623691            |

#### Dänemark

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 01.01.1980        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-dk         | Person-dk                |
| E-Mail-Adresse | customer@email.dk | customer+denied@email.dk |
| Straße         | Dantes Plads      | Nygårdsvej               |
| Hausnummer     | 7                 | 65                       |
| Ort            | København Ø       | København Ø              |
| Postleitzahl   | 1556              | 2100                     |
| Telefon        | +4542555628       | +4552555348              |

#### Finnland

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 01.01.1999        | 01.01.1999               |
| Vorname        | Test              | Person FI                |
| Nachname       | Person-fi         | Test                     |
| E-Mail-Adresse | customer@email.fi | customer+denied@email.fi |
| Straße         | Mannerheimintie   | Mannerheimintie          |
| Hausnummer     | 34                | 34                       |
| Ort            | Helsinki          | Helsinki                 |
| Postleitzahl   | 00100             | 00100                    |
| Telefon        | +358401234567     | +358401234568            |

#### Frankreich

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10.07.1990        | 10.07.1990               |
| Geburtsort     | Paris             | Paris                    |
| Vorname        | Test              | Test                     |
| Nachname       | Person-fr         | Person-fr                |
| E-Mail-Adresse | customer@email.fr | customer+denied@email.fr |
| Straße         | Rue La Fayette    | Rue La Fayette           |
| Hausnummer     | 33                | 33                       |
| Ort            | Paris             | Paris                    |
| Postleitzahl   | 75009             | 75009                    |
| Telefon        | +33689854321      | +33687984322             |

#### Deutschland

|                | Genehmigt             | Abgelehnt                |
| -------------- | --------------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970            | 10-07-1970               |
| Vorname        | Mock                  | Test                     |
| Nachname       | Mock                  | Person-de                |
| E-Mail-Adresse | customer@email.de     | customer+denied@email.de |
| Straße         | Neue Schönhauser Str. | Neue Schönhauser Str.    |
| Hausnummer     | 2                     | 2                        |
| Ort            | Berlin                | Berlin                   |
| Postleitzahl   | 10178                 | 10178                    |
| Telefon        | +49017614284340       | +49017610927312          |

#### Griechenland

|              | Genehmigt         | Abgelehnt                |
| ------------ | ----------------- | ------------------------ |
| Steuernummer | 090000045         | 090000045                |
| Geburtsdatum | 01.01.1960        | 11.11.1970               |
| Vorname      | Test              | Test                     |
| Nachname     | Person-gr         | Test-gr                  |
| E-Mail       | customer@email.gr | customer+denied@email.gr |
| Straße       | Kifisia           | Baralo                   |
| Hausnummer   | 37                | 56                       |
| Postleitzahl | 151 23            | 123 67                   |
| Stadt        | Athen             | Athen                    |
| Telefon      | +306945553624     | +306945553625            |

#### Irland

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-ie         | Person-ie                |
| E-Mail-Adresse | customer@email.ie | customer+denied@email.ie |
| Straße         | King Street South | King Street South        |
| Hausnummer     | 30                | 30                       |
| Ort            | Dublin            | Dublin                   |
| EIR-Code       | D02 C838          | D02 C838                 |
| Telefon        | +353855351400     | +353855351401            |

#### Italien

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 01.01.1980        | 01.01.1980               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-it         | Person-it                |
| E-Mail-Adresse | customer@email.it | customer+denied@email.it |
| Steuernummer   | RSSBNC80A41H501B  | RSSBNC80A41H501B         |
| Straße         | Via Enrico Fermi  | Via Enrico Fermi         |
| Hausnummer     | 150               | 150                      |
| Ort            | Rom               | Rom                      |
| Postleitzahl   | 00146             | 00146                    |
| Telefon        | +393339741231     | +393312232389            |

#### Niederlande

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-nl         | Person-nl                |
| E-Mail-Adresse | customer@email.nl | customer+denied@email.nl |
| Straße         | Osdorpplein       | Osdorpplein              |
| Hausnummer     | 137               | 137                      |
| Ort            | Amsterdam         | Amsterdam                |
| Postleitzahl   | 1068 SR           | 1068 SR                  |
| Telefon        | +31689124321      | +31632167678             |

#### Neuseeland

|                | Genehmigt                | Abgelehnt                |
| -------------- | ------------------------ | ------------------------ |
| Geburtsdatum   | 10-07-1970               | 10-07-1970               |
| Vorname        | Test                     | Test                     |
| Nachname       | Person-nz                | Person-nz                |
| Straße         | Mount Wellington Highway | Mount Wellington Highway |
| Hausnummer     | 286                      | 286                      |
| Postleitzahl   | 6011                     | 6011                     |
| Stadt          | Auckland                 | Wellington               |
| Telefon        | +6427555290              | +642993007712            |
| E-Mail-Adresse | customer@email.nz        | customer+denied@email.nz |

#### Norwegen

|                    | Genehmigt           | Abgelehnt                |
| ------------------ | ------------------- | ------------------------ |
| Geburtsdatum       | 01.08.1970          | 01.08.1970               |
| Vorname            | Jane                | Test                     |
| Nachname           | Test                | Person-no                |
| E-Mail-Adresse     | customer@email.no   | customer+denied@email.no |
| Persönliche Nummer | NO1087000571        | NO1087000148             |
| Straße             | Edvard Munchs Plass | Sæffleberggate           |
| Hausnummer         | 1                   | 56                       |
| Ort                | Oslo                | Oslo                     |
| Postleitzahl       | 0194                | 0563                     |
| Telefon            | +4740123456         | +4740123457              |

#### Polen

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 05.05.1967        | 05.05.1967               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-pl         | Person-pl                |
| Straße         | Ul. Górczewska    | Ul. Górczewska           |
| Hausnummer     | 124               | 124                      |
| Postleitzahl   | 01-460            | 01-460                   |
| Stadt          | Warschau          | Warschau                 |
| Telefon        | +48795222223      | +48795223325             |
| E-Mail-Adresse | customer@email.pl | customer+denied@email.pl |

#### Portugal

|                | Genehmigt           | Abgelehnt                |
| -------------- | ------------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970          | 10-07-1970               |
| Vorname        | Test                | Test                     |
| Nachname       | Person-pt           | Person-pt                |
| Straße         | Avenida Dom João II | Avenida Dom João II      |
| Hausnummer     | 40                  | 40                       |
| Postleitzahl   | 1990-094            | 1990-094                 |
| Stadt          | Lissabon            | Lissabon                 |
| Telefon        | +351935556731       | +351915593837            |
| E-Mail-Adresse | customer@email.pt   | customer+denied@email.pt |

#### Rumänien

|                                         | Genehmigt         | Abgelehnt                |
| --------------------------------------- | ----------------- | ------------------------ |
| Geburtsdatum                            | 25.12.1970        | 25.12.1970               |
| Vorname                                 | Test              | Test                     |
| Nachname                                | Person-ro         | Person-ro                |
| E-Mail                                  | customer@email.ro | customer+denied@email.ro |
| Straße                                  | Drumul Taberei    | Drumul Taberei           |
| Hausnummer                              | 35                | 35                       |
| Stadt                                   | București         | București                |
| Sector                                  | Sectorul 6        | Sectorul 6               |
| Postleitzahl                            | 061357            | 061357                   |
| Telefon                                 | +40741209876      | +40707127444             |
| Persönliche Identifikationsnummer (CNP) | 1701225193558     |                          |

#### Spanien

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| DNI/NIE        | 99999999R         | 99999999R                |
| Geburtsdatum   | 10-07-1970        | 10-07-1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-es         | Person-es                |
| E-Mail-Adresse | customer@email.es | customer+denied@email.es |
| Straße         | C. de Atocha      | C. de Atocha             |
| Hausnummer     | 27                | 27                       |
| Ort            | Madrid            | Madrid                   |
| Postleitzahl   | 28012             | 28012                    |
| Telefon        | +34672563009      | +34682425101             |

#### Schweden

|                | Genehmigt               | Abgelehnt                |
| -------------- | ----------------------- | ------------------------ |
| Geburtsdatum   | 21.03.1941              | 28.10.1941               |
| Vorname        | Alice                   | Test                     |
| Nachname       | Test                    | Person-se                |
| E-Mail-Adresse | customer@email.se       | customer+denied@email.se |
| Straße         | Södra Blasieholmshamnen | Karlaplan                |
| Hausnummer     | 2                       | 3                        |
| Ort            | Stockholm               | Stockholm                |
| Postleitzahl   | 11 148                  | 11 460                   |
| Telefon        | +46701740615            | +46701740620             |

#### Schweiz

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 01.01.1990        | 01.01.2000               |
| Vorname        | Akzeptiert        | Kund/in                  |
| Nachname       | Person-ch         | Person-ch                |
| Straße         | Augustinergasse   | Bahnhofstrasse           |
| Hausnummer     | 2                 | 77                       |
| Postleitzahl   | 4051              | 8001                     |
| Stadt          | Basel             | Zürich                   |
| Telefon        | +41758680000      | +41758680001             |
| E-Mail-Adresse | customer@email.ch | customer+denied@email.ch |

#### Großbritannien

|                | Genehmigt             | Abgelehnt                |
| -------------- | --------------------- | ------------------------ |
| Geburtsdatum   | 10-07-1970            | 10-07-1970               |
| Vorname        | Test                  | Test                     |
| Nachname       | Person-uk             | Person-uk                |
| E-Mail-Adresse | customer@email.uk     | customer+denied@email.uk |
| Straße         | New Burlington Street | New Burlington Street    |
| Hausnummer     | 10                    | 10                       |
| Apartment      | Apt 214               | Apt 214                  |
| Postleitzahl   | W1S 3BE               | W1S 3BE                  |
| Ort            | London                | London                   |
| Telefon        | +447755564318         | +447355505530            |

#### Vereinigte Staaten

|                | Genehmigt         | Abgelehnt                |
| -------------- | ----------------- | ------------------------ |
| Geburtsdatum   | 07.10.1970        | 07.10.1970               |
| Vorname        | Test              | Test                     |
| Nachname       | Person-us         | Person-us                |
| E-Mail-Adresse | customer@email.us | customer+denied@email.us |
| Straße         | Amsterdam Ave     | Amsterdam Ave            |
| Hausnummer     | 509               | 509                      |
| Ort            | New York          | New York                 |
| Bundesstaat    | New York          | New York                 |
| Postleitzahl   | 10024-3941        | 10024-3941               |
| Telefon        | +13106683312      | +13106354386             |

### Zwei-Schritte-Authentifizierung

Jede 6-stellige Zahl ist ein gültiger Code für die Zwei-Schritte-Authentifizierung. Verwenden Sie `999999`, damit die Authentifizierung fehlschlägt.

### Rückzahlungmethode

Innerhalb des Klarna-Ablaufs können Sie die folgenden Testwerte verwenden, um verschiedene Rückzahlungsarten auszuprobieren:

| Typ                  | Wert                                                                                                           |
| -------------------- | -------------------------------------------------------------------------------------------------------------- |
| Lastschriftverfahren | DE11520513735120710131                                                                                         |
| Banküberweisung      | Demo-Bank                                                                                                      |
| Kreditkarte          | - Nummer: 4111 1111 1111 1111
  - Prüfziffer: 123
  - Gültig bis: ein beliebiges gültiges Datum in der Zukunft |
| Debitkarte           | - Nummer: 4012 8888 8888 1881
  - Prüfziffer: 123
  - Gültig bis: ein beliebiges gültiges Datum in der Zukunft |

## Optional: Express Checkout Element mit Stripe Connect verwenden

*Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients)-Plattformen, die für das verbundene Konto entweder Direct Charges erstellen oder das Token einem `Customer` hinzufügen, müssen zusätzliche Schritte durchführen.

> #### Use the Accounts v2 API to represent customers
> 
> If your integration uses [customer-configured Accounts](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), replace `Customer` and event references in the code examples with the equivalent Accounts v2 API references. For more information, see [Represent customers with Account objects](https://docs.stripe.com/connect/use-accounts-as-customers.md).

1. Bevor Sie das `ExpressCheckoutElement`in Ihrem Frontend erstellen, legen Sie die Option `stripeAccount` für die Stripe-Instanz fest:

   ```javascript
   const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>', {
     apiVersion: "2026-03-25.dahlia",
     stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
   });
   ```

1. [Registrieren Sie alle Domains](https://docs.stripe.com/payments/payment-methods/pmd-registration.md?dashboard-or-api=api#register-your-domain-while-using-connect), auf denen Sie das Express Checkout Element anzeigen möchten.

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

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Zahlungsdetails vor Erstellen eines Intent erfassen](https://docs.stripe.com/payments/accept-a-payment-deferred.md)
- [Zahlungen auf dem Server abschließen](https://docs.stripe.com/payments/finalize-payments-on-the-server.md)