# Eine Affirm-Zahlung annehmen

So akzeptieren Sie die "Jetzt kaufen, später bezahlen"-Zahlungsmethode Affirm.

> Diese Anleitung hilft Ihnen dabei, Affirm in Ihren Online-Bezahlvorgang zu integrieren. Für persönliche Zahlungen mit Stripe Terminal besuchen Sie [Zusätzliche Zahlungsmethoden](https://docs.stripe.com/terminal/payments/additional-payment-methods.md).

# Checkout

> This is a Checkout for when payment-ui is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=checkout.

> Stripe kann Ihren Kundinnen und Kunden automatisch die relevanten Zahlungsmethoden anzeigen, indem Währungen, Einschränkungen der Zahlungsmethode und andere Parameter ausgewertet werden.
> 
> - Befolgen Sie den Leitfaden [Eine Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=checkout&ui=stripe-hosted), um eine Checkout-Integration zu erstellen, die [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwendet.
- Wenn Sie keine dynamischen Zahlungsmethoden verwenden möchten, befolgen Sie die folgenden Schritte, um die Zahlungsmethoden in Ihrer Checkout-Integration manuell zu konfigurieren.

Affirm ist eine Zahlungsmethode für die [einmalige Nutzung](https://docs.stripe.com/payments/payment-methods.md#usage) mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification), bei der Kundinnen/Kunden ihre Zahlung [authentifizieren](https://docs.stripe.com/payments/payment-methods.md#customer-actions) müssen. Kundinnen/Kunden werden an die Affirm-Website weitergeleitet, wo sie den Bedingungen eines Ratenzahlungsvertrags zustimmen. Wenn die Kundinnen/Kunden die Bedingungen akzeptieren, werden die Gelder garantiert und auf Ihr Stripe-Konto überwiesen. Die Kundinnen/Kunden zahlen die Gelder über eine gewissen Zeitraum direkt an Affirm zurück.

> Bevor Sie mit der Integration beginnen, vergewissern Sie sich, dass Ihr Konto für Affirm geeignet ist. Dies können Sie in Ihren [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) prüfen.

## Kompatibilität bestimmen

**Kundenregion**: Canada, US

**Unterstützte Währungen**: `cad, usd`

**Transaktionswährungen**: `cad, usd`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

Für die Unterstützung von Zahlungen per Affirm muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen:

- Sie können nur einmalige Posten verwenden. Affirm unterstützt keine wiederkehrenden *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)pläne).
- Geben Sie alle *Preise* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) in Ihrer Landeswährung an.

## Zahlung annehmen

> Dieser Leitfaden beruht auf der grundlegenden Checkout-Integration für die [Annahme einer Zahlung](https://docs.stripe.com/payments/accept-a-payment.md?ui=stripe-hosted).

Das führt Sie durch die Aktivierung von Affirm und zeigt die Unterschiede zwischen dem Akzeptieren von Zahlungen mit dynamischen Zahlungsmethoden und dem manuellen Konfigurieren von Zahlungsmethoden.

### Affirm als Zahlungsmethode aktivieren

Führen Sie bei der Erstellung einer neuen [Checkout-Sitzung](https://docs.stripe.com/api/checkout/sessions.md) folgende Schritte aus:

1. Fügen Sie `affirm` der Liste der `payment_method_types` hinzu.
1. Stellen Sie sicher, dass alle `line_items` Ihre Landeswährung verwenden und der Gesamtbetrag die [Limits für Transaktionsbeträge](https://docs.stripe.com/payments/affirm.md#payment-options) von Affirm nicht überschreitet.
1. Optional können Sie über `shipping_address_collection[allowed_countries]` angeben, welche Länder Checkout als Versandorte zulässt.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  -d "shipping_address_collection[allowed_countries][0]=CA" \
  -d "shipping_address_collection[allowed_countries][1]=US" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Eingebettetes Formular

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "shipping_address_collection[allowed_countries][0]=CA" \
  -d "shipping_address_collection[allowed_countries][1]=US" \
  -d ui_mode=embedded_page
```

Wenn Sie Versandadressen nicht über Checkout erfassen möchten, können Sie die Versandadresse auch über `payment_intent_data[shipping]` angeben. Dies trägt zur Verbesserung der Kreditbewilligungsquoten bei.

#### Von Stripe gehostete Seite

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  --data-urlencode "success_url=https://example.com/success"
```

#### Eingebettetes Formular

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=5000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_method_types[0]=card" \
  -d "payment_method_types[1]=affirm" \
  --data-urlencode "return_url=https://example.com/return" \
  -d "payment_intent_data[shipping][name]=Jenny Rosen" \
  -d "payment_intent_data[shipping][address][line1]=1234 Main Street" \
  -d "payment_intent_data[shipping][address][city]=San Francisco" \
  -d "payment_intent_data[shipping][address][state]=CA" \
  -d "payment_intent_data[shipping][address][country]=US" \
  -d "payment_intent_data[shipping][address][postal_code]=94111" \
  -d ui_mode=embedded_page
```

### Bestellungen abwickeln

[Verwenden Sie eine Methode wie Webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks), um die *Ausführung* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) von Bestellungen zu tätigen. Verlassen Sie sich nicht darauf, dass Ihre Kundinnen/Kunden zur Zahlungsstatusseite zurückkehren.

Die folgenden Ereignisse werden übermittelt, wenn sich der Zahlungsstatus ändert:

| Ereignisname                                                                                                           | Beschreibung                                                                                                                                                                 | Nächste Schritte                                                                                |
| ---------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed)       | Die Kundin/der Kunde hat die Zahlung nach der Übermittlung des Checkout-Formulars erfolgreich autorisiert.                                                                   | Warten Sie, bis die Zahlung erfolgt oder fehlschlägt.                                           |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)           | Die Zahlung der Kundin/des Kunden war erfolgreich. Der `PaymentIntent` wechselt zu `succeeded`.                                                                              | Wickeln Sie die Bestellung der Waren oder Dienstleistungen ab, die der/die Kund/in gekauft hat. |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.payment_failed) | Die Zahlung der Kundin/des Kunden wurde abgelehnt oder ist aus einem anderen Grund fehlgeschlagen. Die `PaymentIntent` wechselt wieder zum Status `requires_payment_method`. | Senden Sie dem/der Kund/in eine E-Mail, um eine neue Bestellung anzufordern.                    |

Weitere Informationen zur [Ausführung von Bestellungen](https://docs.stripe.com/checkout/fulfillment.md).

## Integration testen

Wählen Sie beim Testen Ihrer Checkout-Integration Affirm als Zahlungsmethode aus und klicken Sie auf die Schaltfläche **Bezahlen**.

Testen Sie Ihre Affirm-Integration mit Ihren Test-API-Schlüsseln, indem Sie die Weiterleitungsseite anzeigen. Sie können die erfolgreiche Zahlung testen, indem Sie die Zahlung auf der Weiterleitungsseite authentifizieren. Der PaymentIntent wechselt von `requires_action` zu `succeeded`.

Um den Fall zu testen, bei dem sich Nutzer/innen nicht authentifizieren können, verwenden Sie Ihre Test-API-Schlüssel und zeigen Sie die Weiterleitungsseite an. Schließen Sie auf der Weiterleitungsseite das Fenster des Affirm-Modals und überprüfen Sie, ob die Zahlung fehlgeschlagen ist. Der PaymentIntent wechselt von `requires_action` zu `requires_payment_method`.

Bei einer Weiterleitung an die Affirm-Sandbox fragt Sie Affirm möglicherweise nach den letzten 4&nbsp;Ziffern Ihrer SSN. Affirm schlägt vor, `'0000'` oder `'5678'` zu verwenden.

Für die [manuelle Erfassung](https://docs.stripe.com/payments/affirm/accept-a-payment.md#manual-capture) von PaymentIntents im Testmodus läuft der nicht erfasste PaymentIntent 10 Minuten nach erfolgreicher Autorisierung automatisch ab.

## Fehlgeschlagene Zahlungen

Affirm berücksichtigt mehrere Faktoren bei der Entscheidung, ob eine Transaktion akzeptiert oder abgelehnt wird (zum Beispiel die Dauer der Nutzung von Affirm durch den/die Käufer/in, den ausstehenden Betrag, den der/die Kund/in zurückzahlen muss und den Wert der aktuellen Bestellung).

Bieten Sie in Ihrem Bezahlvorgang immer weitere Zahlungsoptionen wie `card` an, da Affirm-Zahlungen eine höhere Ablehnungsrate haben als viele andere Zahlungsmethoden. In diesen Fällen wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt, und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`.

Anders als bei einer abgelehnten Zahlung muss bei einem Affirm-[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) mit dem Status `requires_action` der Kunde/die Kundin die Zahlung innerhalb von 12&nbsp;Stunden nach Weiterleitung zur Afterpay-Website abschließen. Wird der Kunde/die Kundin innerhalb von 1&nbsp;Stunde nicht aktiv, wird die Verbindung mit der [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt, und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`.

Teilen Sie Ihren Kund/innen in diesen Fällen mit, dass sie es mit einer anderen Zahlungsoption versuchen sollten, die in Ihrem Bezahlvorgang zur Verfügung gestellt wird.

## Fehlercodes

Im Folgenden finden Sie die häufigsten Fehlercodes und die entsprechenden empfohlenen Maßnahmen:

| Fehlercode                               | Empfohlene Maßnahme                                                                                                                                                                                                                                                                         |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Ein allgemeiner Fehler, der auf den fehlgeschlagenen Affirm-Bezahlvorgang hinweist. Weitere Informationen finden Sie möglicherweise im Grund für das Ergebnis der Zahlung.                                                                                                                  |
| `payment_method_provider_decline`        | Affirm hat die Kundenzahlung abgelehnt. Als nächsten Schritt muss sich der Kunde/die Kundin an Affirm wenden, um weitere Informationen einzuholen.                                                                                                                                          |
| `payment_intent_payment_attempt_expired` | Die Kundin/der Kunde hat die Zahlung auf der Affirm-Checkout-Seite nicht abgeschlossen und die Payment-Sitzung ist abgelaufen. Stripe setzt PaymentIntents, die nicht erfolgreich autorisiert wurden, automatisch 12&nbsp;Stunden nach Erstellung des ursprünglichen Checkouts außer Kraft. |
| `payment_method_not_available`           | Bei Affirm ist ein Fehler im Zusammenhang mit der Dienstleistung aufgetreten und kann die Anfrage nicht abschließen. Versuchen Sie es zu einem späteren Zeitpunkt erneut.                                                                                                                   |
| `amount_too_small`                       | Geben Sie einen Betrag innerhalb der [Standard-Transaktionslimits](https://docs.stripe.com/payments/affirm.md#payment-options) von Affirm ein.                                                                                                                                              |
| `amount_too_large`                       | Geben Sie einen Betrag innerhalb der [Standard-Transaktionslimits](https://docs.stripe.com/payments/affirm.md#payment-options) von Affirm ein.                                                                                                                                              |

Bei einigen Fehlern können zusätzliche Erkenntnisse im Grund für das Zahlungsergebnis enthalten sein:

| Ergebnisursachen           | Was bedeutet das?                                                                                                                                                                                                                                                                                                                                                                                                    |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `generic_decline`          | Der Standardgrund für das Ergebnis einer Zahlung. Dies bedeutet in der Regel, dass die Partnerin/der Partner die Zahlung abgelehnt hat (z. B. aufgrund unzureichender Geldmittel), der Bankaussteller die Zahlung abgelehnt hat, die Transaktion einen Kauf mit hohem Risiko oder einen ähnlichen Grund enthielt. In diesen Fällen erhält Stripe möglicherweise nicht immer einen Grund für eine abgelehnte Zahlung. |
| `affirm_checkout_canceled` | Entweder hat der Kunde/die Kundin den Bezahlvorgang mit Affirm explizit abgebrochen oder Affirm hat den Kreditanspruch des Kunden/der Kundin abgelehnt. Stripe kann den Unterschied zwischen diesen beiden Ereignistypen nicht erkennen.                                                                                                                                                                             |


# Checkout Sessions API

> This is a Checkout Sessions API for when payment-ui is elements and api-integration is checkout. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=checkout.

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

**Kundenregion**: Canada, US

**Unterstützte Währungen**: `cad, usd`

**Transaktionswährungen**: `cad, usd`

**Zahlungsmodus**: Yes

**Einrichtungsmodus**: No

**Abonnementmodus**: No

Für die Unterstützung von Zahlungen per Affirm muss eine Checkout-Sitzung alle folgenden Bedingungen erfüllen:

- Sie können nur einmalige Posten verwenden. Affirm unterstützt keine wiederkehrenden *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)pläne).
- Geben Sie alle *Preise* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) in Ihrer Landeswährung an.

## Server einrichten [Serverseitig]

Verwenden Sie die offiziellen Bibliotheken von Stripe für den Zugriff auf die Stripe-API über Ihre Anwendung.

#### 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 auf Ihrem Server einen Endpoint hinzu, der eine [Checkout-Session](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 Ihrer Kundin/Ihres Kunden dar, während sie/er für einmalige Käufe oder Abos bezahlt. Checkout-Sitzungen laufen 24&nbsp;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: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 5000,
        },
        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: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 5000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'elements',
    payment_method_types: ['affirm'],
    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 `useCheckout()`-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 {useCheckout} from '@stripe/react-stripe-js/checkout';

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

  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.

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) aus dem Objekt `Checkout`.

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.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits bei [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm) validiert haben.

```html
<input type="text" id="email" />
<div id="email-errors"></div>
```

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

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;actions.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

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

Diese Anweisungen erstellen eine E-Mail-Eingabe und verwenden [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) aus dem Objekt `Checkout`.

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.
- Geben Sie eine E-Mail-Adresse ein, die Sie bereits auf [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm) validiert haben.

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

const EmailInput = () => {
  const checkoutState = useCheckout();
  const [email, setEmail] = React.useState('');
  const [error, setError] = React.useState(null);

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

  const handleBlur = () => {checkoutState.checkout.updateEmail(email).then((result) => {
      if (result.type === 'error') {
        setError(result.error);
      }
    })
  };

  const handleChange = (e) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div>
      <label htmlFor="checkout-form-email">Email</label>
      <input
        id="checkout-form-email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {error && <div>{error.message}</div>}
    </div>
  );
};

export default EmailInput;
```

## 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, useCheckout} from '@stripe/react-stripe-js/checkout';

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

  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 [bestätigen](https://docs.stripe.com/js/custom_checkout/confirm) von [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) aufruft, um die Zahlung zu übermitteln.

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

const PayButton = () => {
  const checkoutState = useCheckout();
  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;
```

## 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 Affirm weitergeleitet. Mit Affirm haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.


# Payment Intents API

> This is a Payment Intents API for when payment-ui is elements and api-integration is paymentintents. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=elements&api-integration=paymentintents.

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)

## Stripe einrichten [Serverseitig]

[Erstellen Sie ein Stripe-Konto](https://dashboard.stripe.com/register), um zu beginnen.

Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:

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

## Zahlungsdaten erfassen [Clientseitig]

Sie können nun mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das Payment Element ist eine vorgefertigte UI-Komponente, die die Erfassung von Zahlungsdaten für eine Vielzahl von 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.

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

#### HTML + JS

### Stripe.js einrichten

Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den `head` Ihrer HTML-Datei einbinden. 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 Zahlungsseite 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>>');
```

### Payment Element zu Ihrer Checkout-Seite hinzufügen

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

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

#### Zahlungsmethoden über das Dashboard steuern

Nachdem das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit einem Wert für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Fomular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren.

```javascript
const options = {mode:'payment',
  amount:5000,
  currency: 'usd',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

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

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### Zahlungsmethoden manuell auflisten

Um die Zahlungsmethoden, die verfügbar sein sollen, manuell aufzulisten, fügen Sie jede einzelne zu den `paymentMethodTypes` hinzu.

Erstellen Sie dann eine Instanz des Payment Element und verbinden Sie sie mit dem Container DOM-Knoten.

```javascript
const options = {mode:'payment',
  amount:5000,
  currency: 'usd',
  paymentMethodTypes: ['affirm'],
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

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

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

#### React

### Stripe.js einrichten

Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register.

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Den Elements-Anbieter zu Ihrer Checkout-Seite hinzufügen und konfigurieren

Um die Payment 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.

#### Zahlungsmethoden über das Dashboard steuern

Der `Elements`-Anbieter akzeptiert auch Werte für `mode`, `amount` und `currency`. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Formular anzugeben, müssen Sie sie unbedingt im [Dashboard](https://dashboard.stripe.com/settings/payment_methods) aktivieren.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
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>>');

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

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

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

#### Zahlungsmethoden manuell auflisten

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
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>>');

function App() {
  const options = {mode:'payment',
    amount:5000,
    currency: 'usd',
    paymentMethodTypes: ['affirm'],
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

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

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

### Payment Element hinzufügen

Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen.

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

const CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungs-Objekt](https://docs.stripe.com/elements/appearance-api.md) an `options` übergeben.

### Adressen einholen

Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun:

- Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten.
- Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular.

## PaymentIntent erstellen [Serverseitig]

> #### Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen
> 
> Navigieren Sie zu [Schritt&nbsp;5](https://docs.stripe.com/payments/finalize-payments-on-the-server.md?platform=web&type=payment#submit-payment) im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die `stripe.confirmPayment` auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln.

#### Zahlungsmethoden über das Dashboard steuern

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *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), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount` und einer `currency`. Um zu verhindern, dass böswillige Kundinnen/Kunden ihre eigenen Preise wählen, entscheiden Sie, wie viel Sie berechnen möchten, immer auf der Serverseite (einer vertrauenswürdigen Umgebung) und nicht auf dem Client.

Zu einem `PaymentIntent` gehört 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)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

#### Accounts&nbsp;v2

#### Ruby

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

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the customer's Account ID.
    customer_account: "{{CUSTOMER_ACCOUNT_ID}}",
    amount: 5000,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Customers&nbsp;v1

#### Ruby

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

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 5000,
    currency: 'usd',
  })
  {client_secret: intent.client_secret}.to_json
end
```

#### Zahlungsmethoden manuell auflisten

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen *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), um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem `amount`, einer `currency` und einer oder mehreren Zahlungsmethoden mithilfe von `payment_method_types`. Um zu verhindern, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen, sollten Sie den Preis immer auf der Serverseite (einer vertrauenswürdigen Umgebung) festlegen und nicht auf dem Client.

Zu einem PaymentIntent gehört 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)). Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

#### Ruby

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

post '/create-intent' do
  intent = Stripe::PaymentIntent.create({
    # To allow saving and retrieving payment methods, provide the Customer ID.
    customer: customer.id,
    amount: 5000,
    currency: 'usd',
    payment_method_types: ['affirm'],
  })
  {client_secret: intent.client_secret}.to_json
end
```

## 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 Payment Element abzuschließen.

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 weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur `return_url` weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur `return_url` sofort, wenn eine Zahlung erfolgreich ist.

Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, können Sie [redirect](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

#### HTML + JS

```javascript

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

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  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();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    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 {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

```

#### React

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

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);

  const handleError = (error) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

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

    setLoading(true);

    // Trigger form validation and wallet collection
    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();

    // Confirm the PaymentIntent using the details collected by the Payment Element
    const {error} = await stripe.confirmPayment({
      elements,
      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 {
      // Your customer is redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer is redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button type="submit" disabled={!stripe || loading}>
        Submit Payment
      </button>
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  );
}
```

## Optional: Ereignisse nach Zahlung verarbeiten

Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).

- **Manuelles Bearbeiten von Ereignissen im Dashboard**

  Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

- **Erstellen eines benutzerdefinierten Webhooks**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrieren einer vorgefertigten App**

  Bearbeiten Sie häufige Unternehmensereignisse, wie z.&nbsp;B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.

## Optional: Getrennte Autorisierung und Erfassung

Sie können Autorisierung und Erfassung trennen, um eine Zahlung sofort zu erstellen, Gelder jedoch später zu erfassen. Stripe storniert den PaymentIntent und sendet das Ereignis [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled), wenn die Zahlung nicht während des 7-tägigen Zeitfensters erfasst wird.

Wenn Sie wissen, dass Sie die Zahlung nicht erfassen können, empfehlen wir, [den PaymentIntent zu stornieren](https://docs.stripe.com/refunds.md#cancel-payment), anstatt zu warten, bis das Zeitfenster von 7&nbsp;Tagen abgelaufen ist.

### Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf dem Affirm-Konto der Kundin/des Kunden zu autorisieren.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=5000 \
  -d confirm=true \
  -d currency=usd \
  -d "payment_method_types[]=affirm" \
  -d "payment_method_data[type]=payment_method" \
  -d capture_method=manual \
  --data-urlencode "return_url=https://www.example.com/checkout/done"
```

### Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der [Status des PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) zu `requires_capture`. Um die autorisierten Gelder zu erfassen, führen Sie eine [Erfassungsanfrage](https://docs.stripe.com/api/payment_intents/capture.md) für den PaymentIntent durch.

```curl
curl -X POST https://api.stripe.com/v1/payment_intents/{PAYMENT_INTENT_ID}/capture \
  -u "<<YOUR_SECRET_KEY>>:"
```

Stripe erfasst standardmäßig den autorisierten Gesamtbetrag. Sie können auch angeben, dass `amount_to_capture` kleiner oder gleich der Summe sein soll.

### (Optional) Autorisierung stornieren

Wenn Sie eine Autorisierung stornieren müssen, können Sie [den PaymentIntent stornieren](https://docs.stripe.com/api/payment_intents/cancel.md).

## 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 Affirm weitergeleitet. Mit Affirm haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.

## Fehlercodes

In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen:

| Fehlercode                                                | Empfohlene Maßnahme                                                                                                                                                                                                                                                                                                                                                                                      |
| --------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_invalid_currency`                         | Geben Sie eine unterstützte Währung ein.                                                                                                                                                                                                                                                                                                                                                                 |
| `missing_required_parameter`                              | In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter.                                                                                                                                                                                                                                                                                                                    |
| `payment_intent_payment_attempt_failed`                   | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung.                                                                                                             |
| `payment_intent_authentication_failure`                   | Dieser Code kann im Feld [last_payment_error.code](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-last_payment_error-code) eines PaymentIntent erscheinen. Prüfen Sie die Fehlermeldung für einen detaillierten Grund des Fehlers und Hinweise zur Fehlerbehandlung. Dieser Fehler tritt auf, wenn Sie während des Testens Ihrer Integration manuell einen Fehler auslösen. |
| `payment_intent_redirect_confirmation_without_return_url` | Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent bestätigen.                                                                                                                                                                                                                                                                                                                                 |


# Direkt-API

> This is a Direkt-API for when payment-ui is direct-api. View the full page at https://docs.stripe.com/payments/affirm/accept-a-payment?payment-ui=direct-api.

Stripe-Nutzer/innen können die [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) – einen zentralen Integrationspfad für die Erstellung von Zahlungen mit einer beliebigen unterstützten Methode – verwenden, um Zahlungen per [Affirm](https://www.affirm.com/) von Kundinnen/Kunden aus folgenden Ländern anzunehmen:

- Kanada
- Vereinigte Staaten

Die Annahme von Affirm-Zahlungen auf Ihrer Website umfasst Folgendes:

- Objekt zur Zahlungsverfolgung erstellen
- Informationen zur Zahlungsmethode erfassen
- Zahlung zur weiteren Verarbeitung an Stripe übermitteln
- Umgang mit der Affirm-Weiterleitung und relevanten Webhook-Ereignissen

## Stripe einrichten [Serverseitig]

[Erstellen Sie zunächst ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## PaymentIntent erstellen [Serverseitig]

Ein [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) ist ein Objekt, das Ihre Absicht, eine Kundenzahlung einzuziehen, darstellt und den gesamten Zahlungsvorgang dokumentiert.

Erstellen Sie zunächst einen `PaymentIntent` auf Ihrem Server und geben Sie den einzuziehenden Betrag und die Währung an. Wenn Sie bereits eine Integration mit der [Payment Intents API](https://docs.stripe.com/payments/payment-intents.md) haben, fügen Sie Affirm zur Liste der [Zahlungsmethoden-Typen](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_types) für Ihren `PaymentIntent` hinzu:

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=6000 \
  -d currency=usd \
  -d "payment_method_types[]=affirm"
```

Sie können auch das Payment Element verwenden und Zahlungsmethoden über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe übernimmt die Rückgabe zulässiger Zahlungsmethoden auf Grundlage von Faktoren wie Transaktionsbetrag, Währung und Zahlungsablauf. Weitere Informationen finden Sie unter [Zahlung akzeptieren](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout).

### Client-Geheimnis abrufen

Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

#### Einseitige Anwendung

Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion `fetch` verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end
```

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Serverseitiges Rendering

Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden.

Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <button id="submit">Submit</button>
</form>
```

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

## Angaben zur Zahlungsmethode erfassen und weitergeben [Clientseitig]

Wenn Kundinnen/Kunden über das „Click to Pay“-Verfahren mit Affirm bezahlen, empfehlen wir Ihnen, [Stripe.js](https://docs.stripe.com/payments/elements.md) zu verwenden, um die Zahlung an Stripe zu übermitteln. Stripe.js ist unsere grundlegende JavaScript-Bibliothek für die Erstellung von Zahlungsabläufen. Sie übernimmt automatisch komplexe Integrationsaufgaben und ermöglicht es Ihnen, Ihre Integration in Zukunft unkompliziert um andere Zahlungsmethoden zu erweitern.

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum Header der HTML-Datei hinzufügen.

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

Erstellen Sie auf Ihrer Zahlungsseite eine Instanz von Stripe.js 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
var stripe = Stripe(
  '<<YOUR_PUBLISHABLE_KEY>>'
);
```

Anstatt das gesamte PaymentIntent-Objekt an den Client zu senden, verwenden Sie dessen Client-Geheimnis aus Schritt 1. Dieses unterscheidet sich von Ihren API-Schlüsseln, mit denen Anfragen der Stripe-API authentifiziert werden.

Gehen Sie vorsichtig mit dem Client-Geheimnis um, da es die Zahlung abschließen kann. Sie dürfen nicht protokolliert, in URLs eingebettet oder Personen außer dem Kunden selbst zugänglich gemacht werden.

**Zahlungserfolgsquoten mit zusätzlichen Details verbessern**

Wir empfehlen die Übergabe von [Versand](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping)- und [Abrechnungs](https://docs.stripe.com/api/payment_methods/create.md#create_payment_method-billing_details)-Daten, um die Konversionsraten zu verbessern, obwohl diese nicht erforderlich sind.

In diesem Integrationsleitfaden wird vorgeschlagen, die Versand- und Rechnungsinformationen auf dem Client zu übergeben, nachdem der/die Kund/in seine/ihre Zahlungsmethode ausgewählt hat.

Wenn Sie diese Felder übergeben, sollte die Versandadresse gültige Daten in den Feldern `line1`, `city`, `state`, `postal_code` und `country` enthalten. Ebenso müssen Abrechnungsdetails gültige Daten in den Feldern `line1`, `city`, `state`, `postal_code` und `country` aufweisen.

**PaymentIntent bestätigen**

Verwenden Sie `stripe.confirmAffirmPayment` um die Weiterleitung von Ihrer Seite zu verarbeiten und die Zahlung zu ermöglichen. Sie müssen außerdem eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) übergeben, um das Ziel anzugeben, an das Nutzer/innen weitergeleitet werden, nachdem sie die Zahlung auf der Website oder in der App von Affirm durchgeführt haben.

Auf der Zahlungsseite von Affirm wählen die Kund/innen die ihnen zur Verfügung stehenden Zahlungsoptionen aus. Weitere Informationen finden Sie auf der Übersichtsseite. Sie können die Zahlungsoptionen auf der Affirm-Zahlungsseite nicht einschränken oder vorab auswählen. Wenn Sie den Kund/innen diese Wahl überlassen, maximieren Sie ihre Möglichkeiten, Transaktionen mit Ihnen durchzuführen.

```javascript
// Redirects away from the client
stripe.confirmAffirmPayment(
  '{{PAYMENT_INTENT_CLIENT_SECRET}}',
  {
    payment_method: {
      // Billing information is optional but recommended to pass in.
      billing_details: {
        email: 'jenny@rosen.com',
        name: 'Jenny Rosen',
        address: {
          line1: '1234 Main Street',
          city: 'San Francisco',
          state: 'CA',
          country: 'US',
          postal_code: '94111',
        },
      },
    },

    // Shipping information is optional but recommended to pass in.
    shipping: {
      name: 'Jenny Rosen',
      address: {
        line1: '1234 Main Street',
        city: 'San Francisco',
        state: 'CA',
        country: 'US',
        postal_code: '94111',
      },
    },
    // Return URL where the customer should be redirected after the authorization.
    return_url: 'https://example.com/checkout/complete',
  }
).then(function(result) {
  if (result.error) {
    // Inform the customer that there was an error.
    console.log(result.error.message);
  }
});
```

Wenn Ihr Kunde/Ihre Kundin eine Zahlung übermittelt, leitet Stripe ihn an die `return_url` weiter und fügt die folgenden URL-Abfrageparameter ein. Die Rückgabeseite kann diese nutzen, um den Status des PaymentIntent abzurufen, damit der Kunde/die Kundin den Zahlungsstatus anzeigen kann.

Wenn Sie die `return_url` angeben, können Sie auch Ihre eigenen Abfrageparameter für die Verwendung auf der Rückgabeseite anhängen.

| Parameter                      | Beschreibung                                                                                                                                                                                                                                                                                                                                                   |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | Die eindeutige ID für den `PaymentIntent`.                                                                                                                                                                                                                                                                                                                     |
| `payment_intent_client_secret` | Das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. Bei Abonnementintegrationen wird dieses client_secret auch über [`confirmation_secret`](https://docs.stripe.com/api/invoices/object.md#invoice_object-confirmation_secret) im `Invoice`-Objekt sichtbar gemacht |

Wenn Kundinnen und Kunden auf Ihre Seite weitergeleitet werden, können Sie `payment_intent_client_secret` nutzen, um den PaymentIntent abzufragen und Ihren Kundinnen und Kunden den Transaktionsstatus anzuzeigen.

## Affirm-Integration testen

Testen Sie Ihre Affirm-Integration mit Ihren Test-API-Schlüsseln, indem Sie die Weiterleitungsseite anzeigen. Sie können die erfolgreiche Zahlung testen, indem Sie die Zahlung auf der Weiterleitungsseite authentifizieren. Der PaymentIntent wechselt von `requires_action` zu `succeeded`.

Um den Fall zu testen, dass sich der/die Nutzer/in nicht authentifizieren kann, verwenden Sie Ihre Test-API-Schlüssel und rufen Sie die Weiterleitungsseite auf. Klicken Sie auf der Weiterleitungsseite in der oberen linken Ecke auf **X**. Der PaymentIntent wechselt von `requires_action` zu `requires_payment_method`.

Bei einer Weiterleitung an die Affirm-Sandbox fragt Sie Affirm möglicherweise nach den letzten 4&nbsp;Ziffern Ihrer SSN. Affirm schlägt vor, `'0000'` oder `'5678'` zu verwenden.

## Optional: Getrennte Autorisierung und Erfassung

Affirm unterstützt die [getrennte Autorisierung und Erfassung](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md). Wenn es zu einer Verzögerung zwischen der Zahlung und der Auslieferung des Kaufs an Ihre Kundinnen/Kunden kommt, sollten Sie die Zahlung zuerst autorisieren und später erfassen. Zum Zeitpunkt der Erfassung leitet Affirm die Fälligkeitstermine für die nachfolgenden Rückzahlungen auf Kundenseite ein. **Sie müssen eine autorisierte Affirm-Zahlung innerhalb von 30 Tagen nach der Autorisierung erfassen**. Andernfalls wird die Autorisierung automatisch storniert und Sie können die Zahlung nicht mehr erfassen. Stripe storniert auch den PaymentIntent und sendet dann das [payment_intent.canceled](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.canceled)-Ereignis.

> Bei sehr großen Bestellbeträgen kann Affirm während der Autorisierung eine Anzahlung von der Kundin/dem Kunden verlangen. Wenn Sie die Zahlung stornieren oder die Autorisierung abläuft, erstattet Affirm die Anzahlung.

Wenn Sie wissen, dass Sie die Zahlung nicht erfassen können, sollten Sie [den PaymentIntent stornieren](https://docs.stripe.com/refunds.md#cancel-payment) und nicht warten, bis das Zeitfenster von 30 Tagen abgelaufen ist. Durch die proaktive Stornierung des PaymentIntent wird die erste Rate sofort an die Kundin/den Kunden zurückerstattet, sodass keine Verwirrung hinsichtlich der Zahlungen in ihrer Abrechnung entsteht.

### Stripe anweisen, nur die Autorisierung durchzuführen

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, legen Sie [capture_method](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-capture_method) beim Erstellen des PaymentIntent auf `manual` fest. Dieser Parameter weist Stripe an, nur den Betrag auf dem Affirmt-Konto der Kundin/des Kunden zu autorisieren.

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=6000 \
  -d "confirm"="true" \
  -d "currency"="usd" \
  -d "payment_method_types[]"="affirm" \
  -d "capture_method"="manual" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  -d "payment_method_data[type]"="affirm" \
  -d "return_url"="https://www.example.com/checkout/done"
```

### Die Gelder erfassen

Nach erfolgreicher Autorisierung wechselt der [Status](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-status) des PaymentIntent zu `requires_capture`. Um die autorisierten Gelder zu erfassen, führen Sie eine PaymentIntent-[Erfassungsanfrage](https://docs.stripe.com/api/payment_intents/capture.md) durch. Der autorisierte Gesamtbetrag wird standardmäßig erfasst. Sie können nicht mehr oder weniger als die Summe erfassen.

```bash
https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/capture \
  -u <<YOUR_SECRET_KEY>>: \
```

### (Optional) Autorisierung stornieren

Wenn Sie eine Autorisierung stornieren müssen, können Sie den [PaymentIntent](https://docs.stripe.com/refunds.md#cancel-payment) stornieren.

## Optional: Affirm-Weiterleitung manuell handhaben

Wir empfehlen, die Abwicklung von Affirm-Weiterleitungen und -Zahlungen auf der Client-Seite mit `confirmAffirmPayment` Stripe.js zu überlassen. Wenn Sie Stripe.js verwenden, können Sie Ihre Integration viel einfacher um weitere Zahlungsmethoden erweitern. Sie können Ihre Kund/innen jedoch auch mithilfe der folgenden Schritte manuell an Ihren Server weiterleiten:

- Erstellen und bestätigen Sie einen [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) vom Typ `affirm`. Durch Angabe von `payment_method_data` erstellen wir eine *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) und verwenden sie sofort mit diesem PaymentIntent.

  Sie müssen außerdem im Feld `return_url` die Weiterleitungs-URL angeben, an die Ihre Kund/innen weitergeleitet werden, nachdem sie ihre Zahlung abgeschlossen haben. Sie können in dieser URL Ihre eigenen Abfrageparameter übergeben. Diese Parameter sind bei Abschluss des Weiterleitungsablaufs in der endgültigen URL enthalten.

  ```bash
  curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d "amount"=6000 \
  -d "confirm"="true" \
  -d "currency"="usd" \
  -d "payment_method_types[]"="affirm" \
  // Shipping address is optional but recommended to pass in.
  -d "shipping[name]"="Jenny Rosen" \
  -d "shipping[address][line1]"="1234 Main Street" \
  -d "shipping[address][city]"="San Francisco" \
  -d "shipping[address][state]"="CA" \
  -d "shipping[address][country]"="US" \
  -d "shipping[address][postal_code]"=94111 \
  // Billing details are optional but recommended to pass in.
  -d "payment_method_data[billing_details][name]"="Jenny Rosen" \
  -d "payment_method_data[billing_details][email]"="jenny@example.com" \
  -d "payment_method_data[billing_details][address][line1]"="1234 Main Street" \
  -d "payment_method_data[billing_details][address][city]"="San Francisco" \
  -d "payment_method_data[billing_details][address][state]"="CA" \
  -d "payment_method_data[billing_details][address][country]"="US" \
  -d "payment_method_data[billing_details][address][postal_code]"=94111 \
  -d "payment_method_data[type]"="affirm" \
  -d "return_url"="https://example.com/checkout/complete"
  ```

  Der erstellte `PaymentIntent` hat den Status `requires_action`, und der Typ für `next_action` ist `redirect_to_url`.

  ```json
  {
    "status": "requires_action",
    "next_action": {
      "type": "redirect_to_url",
      "redirect_to_url": {
        "url": "https://hooks.stripe.com/...",
        "return_url": "https://example.com/checkout/complete"
      }
    },
    "id": "pi_xxx",
    "object": "payment_intent",
    "amount": 6000,
    "client_secret": "pi_xxx_secret_xxx",
    "confirm": "true",
    "confirmation_method": "automatic",
    "created": 1579259303,
    "currency": "usd",
    "livemode": true,
    "charges": {
      "data": [],
      "object": "list",
      "has_more": false,
      "url": "/v1/charges?payment_intent=pi_xxx"
    },
    "payment_method_types": [
      "affirm"
    ]
  }
  ```

- Leiten Sie die Kund/innen an die in der Eigenschaft `next_action.redirect_to_url.url` angegebene URL weiter. Das folgende Codebeispiel ist nur eine Annäherung und kann sich vom Weiterleitungsverfahren in Ihrem Web-Framework unterscheiden.

  Wenn der Kunde/die Kundin den Bezahlvorgang abgeschlossen hat, wird er/sie an die in Schritt&nbsp;1. erstellte `return_url` weitergeleitet. Die URL-Abfrageparameter `payment_intent` und `payment_intent_client_secret` sind enthalten. Wenn die `return_url` bereits Abfrageparameter enthält, werden diese ebenfalls beibehalten.

  Wir empfehlen die Verwendung von [Webhooks](https://docs.stripe.com/payments/payment-intents/verifying-status.md#webhooks), um den Zahlungsstatus zu bestätigen.

## Optional: Handhabung von Ereignissen nach der Zahlung

Stripe übermittelt ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen *Webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den [Unterschieden zwischen allen unterstützten Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide).

- **Manuelles Bearbeiten von Ereignissen im Dashboard**

  Verwenden Sie das Dashboard, um [Ihre Testzahlungen im Dashboard anzuzeigen](https://dashboard.stripe.com/test/payments), E-Mail-Belege zu senden, Auszahlungen zu bearbeiten oder fehlgeschlagene Zahlungen erneut zu versuchen.

- **Erstellen eines benutzerdefinierten Webhooks**

  [Build a custom webhook](https://docs.stripe.com/webhooks/handling-payment-events.md#build-your-own-webhook) handler to listen for events and build custom asynchronous payment flows. Test and debug your webhook integration locally with the Stripe CLI.

- **Integrieren einer vorgefertigten App**

  Bearbeiten Sie häufige Unternehmensereignisse, wie z.&nbsp;B.[Automatisierung](https://stripe.partners/?f_category=automation) oder[Marketing und Vertrieb](https://stripe.partners/?f_category=marketing-and-sales), indem Sie eine Partneranwendung integrieren.

## Optional: Payment Method Messaging auf Ihrer Website anzeigen

Das [Payment Method Messaging Element](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) ist eine integrierbare Komponente der Nutzeroberfläche, die Ihre Kundinnen/Kunden direkt auf Ihren Produkt-, Warenkorb- oder Zahlungsseiten darüber informiert, welche „Jetzt kaufen, später bezahlen“-Zahlungsoptionen ihnen beim Bezahlvorgang zur Verfügung stehen.

Informationen zum Hinzufügen des Payment Method Messaging Element zu Ihrer Website finden Sie unter [Payment Method Messaging anzeigen](https://docs.stripe.com/elements/payment-method-messaging.md).

## Fehlgeschlagene Zahlungen

Affirm berücksichtigt mehrere Faktoren bei der Entscheidung, ob eine Transaktion akzeptiert oder abgelehnt wird (zum Beispiel die Dauer der Nutzung von Affirm durch den/die Käufer/in, den ausstehenden Betrag, den der/die Kund/in zurückzahlen muss und den Wert der aktuellen Bestellung).

Bieten Sie in Ihrem Bezahlvorgang immer weitere Zahlungsoptionen wie `card` an, da Affirm-Zahlungen eine höhere Ablehnungsrate haben als viele andere Zahlungsmethoden. In diesen Fällen wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt, und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`.

Anders als bei einer abgelehnten Zahlung wird bei einem Affirm-[PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md) mit dem Status `requires_action` erwartet, dass die Kundinnen/Kunden die Zahlung innerhalb von 12 Stunden nach Weiterleitung zur Affirm-Website abschließen. Wenn nach 12 Stunden keine Aktion erfolgt ist, wird die [PaymentMethod](https://docs.stripe.com/api/payment_methods/object.md) getrennt und der Status des [PaymentIntent](https://docs.stripe.com/api/payment_intents/object.md)-Objekts wechselt automatisch zu `requires_payment_method`.

Teilen Sie Ihren Kund/innen in diesen Fällen mit, dass sie es mit einer anderen Zahlungsoption versuchen sollten, die in Ihrem Bezahlvorgang zur Verfügung gestellt wird.

## Fehlercodes

Im Folgenden finden Sie die häufigsten Fehlercodes und die entsprechenden empfohlenen Maßnahmen:

| Fehlercode                               | Empfohlene Maßnahme                                                                                                                                                                                                                                                                         |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent_payment_attempt_failed`  | Ein allgemeiner Fehler, der auf den fehlgeschlagenen Affirm-Bezahlvorgang hinweist. Weitere Informationen finden Sie möglicherweise im Grund für das Ergebnis der Zahlung.                                                                                                                  |
| `payment_method_provider_decline`        | Affirm hat die Kundenzahlung abgelehnt. Als nächsten Schritt muss sich der Kunde/die Kundin an Affirm wenden, um weitere Informationen einzuholen.                                                                                                                                          |
| `payment_intent_payment_attempt_expired` | Die Kundin/der Kunde hat die Zahlung auf der Affirm-Checkout-Seite nicht abgeschlossen und die Payment-Sitzung ist abgelaufen. Stripe setzt PaymentIntents, die nicht erfolgreich autorisiert wurden, automatisch 12&nbsp;Stunden nach Erstellung des ursprünglichen Checkouts außer Kraft. |
| `payment_method_not_available`           | Bei Affirm ist ein Fehler im Zusammenhang mit der Dienstleistung aufgetreten und kann die Anfrage nicht abschließen. Versuchen Sie es zu einem späteren Zeitpunkt erneut.                                                                                                                   |
| `amount_too_small`                       | Geben Sie einen Betrag innerhalb der [Standard-Transaktionslimits](https://docs.stripe.com/payments/affirm.md#payment-options) von Affirm ein.                                                                                                                                              |
| `amount_too_large`                       | Geben Sie einen Betrag innerhalb der [Standard-Transaktionslimits](https://docs.stripe.com/payments/affirm.md#payment-options) von Affirm ein.                                                                                                                                              |

Bei einigen Fehlern können zusätzliche Erkenntnisse im Grund für das Zahlungsergebnis enthalten sein:

| Ergebnisursachen           | Was bedeutet das?                                                                                                                                                                                                                                                                                                                                                                                                    |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `generic_decline`          | Der Standardgrund für das Ergebnis einer Zahlung. Dies bedeutet in der Regel, dass die Partnerin/der Partner die Zahlung abgelehnt hat (z. B. aufgrund unzureichender Geldmittel), der Bankaussteller die Zahlung abgelehnt hat, die Transaktion einen Kauf mit hohem Risiko oder einen ähnlichen Grund enthielt. In diesen Fällen erhält Stripe möglicherweise nicht immer einen Grund für eine abgelehnte Zahlung. |
| `affirm_checkout_canceled` | Entweder hat der Kunde/die Kundin den Bezahlvorgang mit Affirm explizit abgebrochen oder Affirm hat den Kreditanspruch des Kunden/der Kundin abgelehnt. Stripe kann den Unterschied zwischen diesen beiden Ereignistypen nicht erkennen.                                                                                                                                                                             |