# Pay by Bank-Zahlungen

So akzeptieren Sie Pay by Bank-Zahlungen

# Checkout Sessions API


Informationen dazu, welche API den Anforderungen Ihres Unternehmens entspricht, finden Sie im [Vergleichsleitfaden](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Verwenden Sie das [Payment Element](https://docs.stripe.com/payments/payment-element.md), um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die [Zahlungsannahme](https://docs.stripe.com/payments/accept-a-payment.md)

## Kompatibilität bestimmen

**Unterstützte Unternehmensstandorte**: DE, GB

**Unterstützte Währungen**: `eur, gbp`

**Transaktionswährungen**: `eur, gbp`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

Für Zahlungen per Pay by Bank müssen Checkout-Sitzungen die folgenden Bedingungen erfüllen:

- Die Preise sämtlicher Posten müssen in derselben Währung sein. Falls Posten in verschiedenen Währungen vorhanden sind, muss für jede Währung eine separate Checkout-Sitzung erstellt werden.
- Sie können nur einmalige Posten verwenden. Wiederkehrende Preispläne für Abonnements werden nicht unterstützt.
- Um an der privaten Vorschau für die Verfügbarkeit in Frankreich, Deutschland und Irland teilzunehmen, lesen Sie [Pay by Bank payments](https://docs.stripe.com/payments/pay-by-bank.md).

## Server einrichten [Serverseitig]

Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die 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'
```

## Checkout-Sitzung erstellen [Serverseitig]

Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions/create.md) erstellt und sein [Client-Geheimnis](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihres Kunden/Ihrer Kundin dar, während er/sie per Checkout für einmalige Käufe oder Abonnements bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab.

Wir empfehlen die Verwendung [dynamischer Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), um allen Kundinnen und Kunden dynamisch die relevantesten infrage kommenden Zahlungsmethoden anzuzeigen und die Konversionsrate zu maximieren. Sie können [Zahlungsmethoden auch manuell auflisten](https://docs.stripe.com/payments/payment-methods/integration-options.md#listing-payment-methods-manually), wodurch dynamische Zahlungsmethoden deaktiviert werden.

#### Zahlungsmethoden über das Dashboard verwalten

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

#### Zahlungsmethoden manuell auflisten

#### TypeScript

```javascript
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'gbp',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 1099,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['pay_by_bank'],
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});
```

## Frontend einrichten [Clientseitig]

#### HTML + JS

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum `head` Ihrer HTML-Datei hinzufügen. Laden Sie Stripe.js 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 es nicht selbst.

Stellen Sie sicher, dass Sie die neueste Stripe.js-Version verwenden, indem Sie das Script-Tag `einfügen.<script src=“https://js.stripe.com/dahlia/stripe.js”></script>`. Erfahren Sie mehr über die [Versionierung von Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe stellt ein npm-Paket zur Verfügung, mit dem Sie Stripe.js als Modul laden können. Siehe das [Projekt auf GitHub](https://github.com/stripe/stripe-js). Version [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) oder höher ist erforderlich.

Stripe.js initialisieren

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

#### React

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 der öffentlichen npm-Registry. Sie benötigen mindestens Version 5.0.0 für React Stripe.js und Version 8.0.0 für den Stripe.js-Loader.

```bash
npm install --save @stripe/react-stripe-js@^5.0.0 @stripe/stripe-js@^8.0.0
```

Initialisieren Sie eine `stripe`-Instanz auf Ihrem Frontend mit Ihrem veröffentlichbaren Schlüssel.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Bezahlvorgang initialisieren [Clientseitig]

#### HTML + JS

Rufen Sie [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init) auf und übergeben Sie `clientSecret`.

`initCheckoutElementsSdk` gibt ein [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt zurück, das Daten aus der Checkout-Session und Methoden zur Aktualisierung enthält.

Lesen Sie `total` und `lineItems` aus [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session) und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird.

```html
<div id="checkout-container"></div>
```

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

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

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 CheckoutForm from './CheckoutForm';

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

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

export default App;
```

Greifen Sie auf das [Checkout](https://docs.stripe.com/js/custom_checkout)-Objekt in Ihrer Checkout-Formularkomponente, indem Sie den `useCheckoutElements()`-Hook verwenden. Das `Checkout`-Objekt enthält Daten aus der Checkout-Sitzung und Methoden zu ihrer Aktualisierung.

Lesen Sie `total` und `lineItems` aus dem `Checkout`-Objekt und zeigen Sie sie in Ihrer Benutzeroberfläche an. So können Sie Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen [manueller Währungspreise](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) keine UI-Änderungen, wenn `total` angezeigt wird.

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

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

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

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Kunden-E-Mail-Adresse erfassen [Clientseitig]

#### HTML + JS

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Verwenden Sie das [Element „Kontaktdaten“](https://docs.stripe.com/js/custom_checkout/create_contact_details_element), um die E-Mail-Adresse Ihrer Kundinnen und Kunden zu erfassen. Es übernimmt für Sie die Erfassung und Validierung der E-Mail-Adresse und erleichtert Ihrer Kundschaft die Anmeldung bei Link.

Alternativ können Sie:

- Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden.
  - Diese füllen die Sitzung vorab mit einer E-Mail-Adresse aus, die Kundinnen und Kunden auf der Seite für den Bezahlvorgang nicht bearbeiten können. Wenn Sie das Feld mit einer bearbeitbaren E-Mail-Adresse vorab ausfüllen möchten, verwenden Sie [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) bei der Initialisierung von Checkout.
- Übergeben Sie eine E-Mail-Adresse, die Sie bereits in [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) oder [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben.

```html
<div id="contact-details-element">
  <!--Stripe.js injects the Contact Details Element-->
</div>
```

```javascript
const contactDetailsElement = checkout.createContactDetailsElement();
contactDetailsElement.mount("#contact-details-element");
```

#### React

Bitte geben Sie beim Abschluss einer Checkout-Sitzung eine gültige E-Mail-Adresse an.

Verwenden Sie das [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element), um die E-Mail-Adresse Ihrer Kundinnen und Kunden zu erfassen. Es übernimmt für Sie die Erfassung und Validierung der E-Mail-Adresse und erleichtert Ihrer Kundschaft die Anmeldung bei Link.

Alternativ können Sie:

- Übergeben Sie die Werte [Kunde_E-Mail](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [Kunden_Konto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (für Kundinnen und Kunden, die als kundenkonfigurierte `Account`-Objekte dargestellt werden), oder [Kundin/Kunde](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (für Kundinnen und Kunden, die `Customer`-Objekte dargestellt werden), wenn Sie die Checkout-Session erstellen. Stripe validiert E-Mail-Adressen, die in dieser Weise bereitgestellt werden.
  - Diese füllen die Sitzung vorab mit einer E-Mail-Adresse aus, die Kundinnen und Kunden auf der Seite für den Bezahlvorgang nicht bearbeiten können. Wenn Sie das Feld mit einer bearbeitbaren E-Mail-Adresse vorab ausfüllen möchten, verwenden Sie [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) bei der Initialisierung von Checkout.
- Übergeben Sie eine E-Mail-Adresse, die Sie bereits in [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) oder [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben.

```jsx
import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout';

// Inside your CheckoutForm component:
<ContactDetailsElement/>
```

## Zahlungsdaten erfassen [Clientseitig]

Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen.

Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt sein.

Die Adresse der Bezahlseite muss mit `https://` beginnen, nicht mit `http://`, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu [aktivieren](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren.

#### HTML + JS

Erstellen Sie zunächst ein Container-DOM-Element, um das [Payment Element](https://docs.stripe.com/payments/payment-element.md) zu verbinden. Erstellen Sie dann eine Instanz des `Payment Element` mit [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) und verbinden Sie es durch Aufrufen von [element.mount](https://docs.stripe.com/js/element/mount), wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Sie können das [Erscheinungsbild](https://docs.stripe.com/payments/checkout/customization/appearance.md) aller Elements anpassen, indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) übergeben, wenn Sie Checkout im Frontend initialisieren.

#### React

Integrieren Sie die Komponente [Payment Element](https://docs.stripe.com/payments/payment-element.md) in den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

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

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

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

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

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Die unterstützten Optionen finden Sie in der [Stripe.js-Dokumentation](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options).

Sie können das [Erscheinungsbild aller Elemente anpassen](https://docs.stripe.com/payments/checkout/customization/appearance.md), indem Sie [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) an den [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider) übergeben.

## Zahlung übermitteln [Clientseitig]

#### HTML + JS

Zeigen Sie eine Schaltfläche **Bezahlen** an, die [confirm](https://docs.stripe.com/js/custom_checkout/confirm) von der `Checkout`-Instanz aufruft, um die Zahlung zu übermitteln.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

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

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Zeigen Sie eine Schaltfläche **Bezahlen** an, die zur [Bestätigung](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) aufruft, um die Zahlung zu übermitteln.

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

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Ihre Integration testen

Um Ihre Integration zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf **Bezahlen**. 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) werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf **Bezahlen** tippen, werden Sie zur Website von Pay by Bank weitergeleitet. Mit Pay by Bank haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.