# Externe Zahlungsmethoden

Fügen Sie dem Payment Element externe Zahlungsmethoden hinzu.

> Wir haben eine [nutzerdefinierte Zahlungsmethode](https://docs.stripe.com/payments/payment-element/custom-payment-methods.md)-Funktion entwickelt, mit der Sie Ihre Zahlungsintegration um Zahlungsmethoden erweitern können, die außerhalb von Stripe verarbeitet werden. Wir empfehlen die Verwendung dieser Methode für Ihre Integration anstelle von externen Zahlungsmethoden.

Das [Payment Element](https://docs.stripe.com/payments/payment-element.md) kann externe Zahlungsmethoden anzeigen, die Sie zusätzlich zu den über Stripe verarbeiteten Zahlungsmethoden unterstützen. Die Integration externer Zahlungsmethoden erfordert zusätzlichen Integrationsaufwand, da externe Zahlungsmethodentransaktionen außerhalb von Stripe verarbeitet und abgeschlossen werden.

> #### Haftungsausschluss für externe Zahlungsmethoden
> 
> Wenn Kundinnen/Kunden eine externe Zahlungsmethode wählen, werden sie zu einer URL weitergeleitet, die Sie für die externe Zahlungsmethode konfiguriert haben. Erfahren Sie mehr über [Ihren Verantwortungsbereich und die laufende Verfügbarkeit externer Zahlungsmethoden](https://docs.stripe.com/payments/external-payment-methods.md#external-payment-methods-disclaimer).

In diesem Leitfaden wird die externe Zahlungsmethode Divido anhand des HTML-/JS-Beispiels aus dem [Payment Element-Quickstart](https://docs.stripe.com/payments/quickstart.md) hinzugefügt.

## Before you begin

1. [Erstellen Sie ein Stripe-Konto](https://dashboard.stripe.com/register) oder [melden Sie sich an](https://dashboard.stripe.com/login).
1. Befolgen Sie den [Payment Element-Leitfaden](https://docs.stripe.com/payments/quickstart.md), um eine Zahlungsintegration abzuschließen.
1. Stellen Sie für jede externe Zahlungsmethode, die Sie hinzufügen möchten, sicher, dass Sie die Integration mit jeder externen Zahlungsmethode abgeschlossen und bestätigt haben, dass sie in der Region funktioniert, in der Sie sie aktivieren möchten.

## Externe Zahlungsmethoden hinzufügen

Geben Sie in Ihrer Datei `checkout.js`, in der Sie [Stripe Elements initialisieren](https://docs.stripe.com/payments/quickstart.md#init-elements), die externen Zahlungsmethoden an, die Sie dem Payment Element hinzufügen möchten. In diesem Beispiel wird Divido hinzugefügt:

```js
elements = stripe.elements({
    clientSecret: clientSecret,externalPaymentMethodTypes: ['external_divido']
  });
```

## Listener für die Auswahl der Zahlungsmethode handhaben

Es gibt zwei Möglichkeiten, die Weiterleitung zur externen Zahlungsmethode zu handhaben:

- Ersetzen Sie die Aktion der Stripe-Schaltfläche **Jetzt bezahlen**, um zur externen Zahlungsmethode weiterzuleiten.
- Ersetzen Sie die Stripe-Schaltfläche **Jetzt bezahlen** durch die Schaltfläche des externen Zahlungsmethodenanbieters.

#### Aktion „Ersetzen“

Dieser Listener ersetzt die Aktion der Stripe-Schaltfläche **Jetzt bezahlen**, um die Kundinnen/Kunden an die Bezahlseite von Divido weiterzuleiten, wo sie die Transaktion abschließen können. Fügen Sie in `checkout.js` den Listener-Code nach dem Aufruf von `paymentElement.mount` hinzu:

```js
paymentElement.mount("#payment-element");// Track selected payment method
let selectedPaymentMethod;
paymentElement.on('change', (event) => {
  selectedPaymentMethod = event?.value?.type;
});
```

Aktualisieren Sie die Funktion `handleSubmit`, um zur Bezahlseite von Divido weiterzuleiten:

```js
async function handleSubmit(e) {if (selectedPaymentMethod === 'external_divido') {
    // Redirect customer to the Divido checkout page to complete the transaction
    const dividoRedirectUrl = "<< fill the Divido redirect URL here >>";
    window.location.href = dividoRedirectUrl;
  } else {
    ...
  }
```

#### Schaltfläche „Ersetzen“

Dieser Listener ersetzt die Stripe-Schaltfläche **Jetzt bezahlen** durch die Schaltfläche **Mit Divido kaufen**, wenn Kundinnen/Kunden die Divido-Zahlungsmethode auswählen. Fügen Sie in `checkout.js` den Listener-Code nach dem Aufruf von `paymentElement.mount` hinzu.

- Die Stripe-Schaltfläche **Jetzt bezahlen** hat die ID `submit`.
- Die Schaltfläche **Mit Divido bezahlen** hat die ID `divido-button-container`.

```js
// Track Selected Payment Method
paymentElement.on('change', (event) => {
  const selectedPaymentMethod = event?.value?.type;
  if (selectedPaymentMethod === 'external_divido') {
    document.querySelector("#submit").style.display = "none";
    document.querySelector("#divido-button-container").style.display = "inline-block";
  } else {
    document.querySelector("#submit").style.display = "inline-block";
    document.querySelector("#divido-button-container").style.display = "none";
  }
});
```

#### Referenz des Zahlungsformulars

Als Referenz wird in diesem Beispiel das folgende HTML-Zahlungsformular verwendet:

```html
<!-- Display a payment form -->
<form id="payment-form">
  <div id="payment-element">
    <!--Stripe.js injects the Payment Element-->
  </div>
  <button id="submit">
    <div class="spinner hidden" id="spinner"></div>
    <span id="button-text">Pay now</span>
  </button>
  <!-- Display divido button; hidden by default -->
  <div id="divido-button-container" style="display: none"></div>
  <div id="payment-message" style="display: none"></div>
</form>
```

## Optional: Externe Zahlungsmethoden positionieren

Externe Zahlungsmethoden werden von der intelligenten Anordnungslogik von Stripe nicht intelligent eingestuft, da Stripe keinen Kontext zu diesen Zahlungsmethoden hat. Sie können [paymentMethodOrder](https://docs.stripe.com/js/elements_object/update_payment_element#payment_element_update-options-paymentMethodOrder) verwenden, um die externe Zahlungsmethode explizit im Payment Element zu positionieren. Die von Stripe unterstützten Zahlungsmethoden werden nach der externen Zahlungsmethode weiterhin intelligent eingestuft. Bei diesem Beispiel wird Divido an zweiter Stelle nach der Kartenzahlung konfiguriert.

> Beim Einrichten Ihrer Zahlungsmethoden können Sie externe Zahlungsmethoden nicht als Standardauswahl festlegen. Wenn sie an den Anfang gestellt werden, werden externe Zahlungsmethoden ab dem zweiten Feld angezeigt.

```js
const paymentElement = elements.create("payment", {
      paymentMethodOrder: ['card', 'external_divido']
  });
```

## Integration testen

1. Durchlaufen Sie Ihren eigenen Bezahlvorgang und vergewissern Sie sich, dass Divido im Payment Element angezeigt wird. In diesem Beispiel wird Divido an zweiter Stelle, nach der Kartenzahlung, konfiguriert.![Screenshot von Payment Element mit hinzugefügtem Divido](https://b.stripecdn.com/docs-statics-srv/assets/display-divido.cbee45d770b63f3938f71ad6682f3ecd.png)
   
   Payment Element mit Divido

1. Wählen Sie die Zahlungsmethode Divido aus, um eine Benachrichtigung über den nächsten Schritt der Weiterleitung an Divido zu verifizieren.![Screenshot von Payment Element mit Divido ausgewählt](https://b.stripecdn.com/docs-statics-srv/assets/select-divido.f695a72908b8e4b97d37c5bc89e9a2ba.png)
   
1. Klicken Sie auf **Jetzt bezahlen**, um Ihre bestehende Divido-Integration zu testen. Vergewissern Sie sich, dass Sie zu Divido weitergeleitet werden, um die Transaktion abzuschließen, und dass alle Aktionen nach der Zahlung (z.&nbsp;B. das Anzeigen einer Bestätigungsseite, Erfolgsmeldung oder Fehlermeldung) mit Ihrer Divido-Integration weiterhin funktionieren.

## Überlegungen zum Dashboard

[PaymentIntents](https://docs.stripe.com/api/payment_intents.md) für Transaktionen, die mit einem externen Anbieter von Zahlungsmethoden verarbeitet werden, weisen im Dashboard den Status `incomplete` auf. Stripe ist nicht an Transaktionen mit externen Zahlungsmethoden beteiligt und kann den Status dieser Transaktionen nicht ermitteln.

Wenn Sie [Zahlungsdetails erfassen, bevor Sie einen Intent erstellen](https://docs.stripe.com/payments/accept-a-payment-deferred.md), werden im Stripe-Dashboard keine `incomplete` Transaktionen für Transaktionen angezeigt, die mit einem externen Zahlungsmethodenanbieter verarbeitet wurden.

## Haftungsausschluss für externe Zahlungsmethoden

Sie können das Stripe Payment Element verwenden, um einige externe Zahlungsmethoden anzuzeigen, die derzeit von Stripe nicht unterstützt werden, mit denen Sie jedoch direkt vernetzt sind. Wenn Kundinnen/Kunden eine externe Zahlungsmethode wählen, werden sie zu einer URL weitergeleitet, die Sie für die externe Zahlungsmethode konfiguriert haben. Sie bestätigen Folgendes:

1. Externe Zahlungsmethoden werden von Stripe weder angeboten noch unterstützt. Der Betrieb und die Unterstützung externer Zahlungsmethoden wird durch den externen Anbieter von Zahlungsmethoden bereitgestellt.
1. Sie sind für die Bereitstellung einer direkten Integration mit dem externen Zahlungsmethodenanbieter verantwortlich.
1. Sie müssen eine Vereinbarung mit dem externen Zahlungsmethodenanbieter abschließen und sind für die Einhaltung Ihrer Vereinbarung(en) mit jedem externen Zahlungsmethodenanbieter verantwortlich.
1. Sie sind dafür verantwortlich, alle erforderlichen Rechte zu erwerben, um die Marken und Logos der externen Zahlungsmethodenanbieter in Ihrem Bezahlvorgang, wie in diesen Dokumenten beschrieben, zu verwenden.
1. Stripe ist nicht verantwortlich für die Verarbeitung von Transaktionen mit einem externen Zahlungsmethodenanbieter, einschließlich beispielsweise Zahlungen, Rückerstattungen, Anfechtungen, Zahlungsabwicklungen oder Geldbewegungen.
1. Sie oder der externe Zahlungsmethodenanbieter sind für den Abschluss des Kaufvorgangs verantwortlich, nachdem ein Kunde/eine Kundin eine externe Zahlungsmethode ausgewählt hat, einschließlich beispielsweise der Bestellbestätigung und des Bestellabgleichs.
1. Sie sind dafür verantwortlich, dass die Weiterleitungs-URL für die externe Zahlungsmethode korrekt konfiguriert wird.
1. Sie müssen alle externen Zahlungsmethoden sofort entfernen, falls Ihre Vereinbarung(en) mit einem externen Zahlungsmethodenanbieter beendet werden oder Stripe die Verfügbarkeit einer externen Zahlungsmethode aufhebt.
1. Sie dürfen nur die in diesem Leitfaden aufgeführten externen Zahlungsmethoden im Payment Element integrieren und dort darstellen.
1. Sie alleine sind dafür verantwortlich, sicherzustellen, ass Käufer/innen korrekt an die von ihnen ausgewählte externe Zahlungsmethode weitergeleitet werden.

### Ständige Verfügbarkeit externer Zahlungsmethoden

Stripe kann jederzeit beschließen, die Verfügbarkeit einer Zahlungsmethode als externe Zahlungsmethode aufzuheben. Stripe benachrichtigt Sie über die Aufheben einer externen Zahlungsmethode, die Sie verwenden, und Sie müssen die externe Zahlungsmethode sofort aus Ihrem Code entfernen. Andernfalls wird die externe Zahlungsmethode für Ihre Kundinnen/Kunden nicht gerendert.

## Verfügbare externe Zahlungsmethoden

Sie können die folgenden externen Zahlungsmethoden anzeigen. Sie müssen den entsprechenden externen Zahlungsmethodentyp in Ihrem Code verwenden.

| Region                | Zahlungsmethode                    | Typ der externen Zahlungsmethode    |
| --------------------- | ---------------------------------- | ----------------------------------- |
| AMER                  | Interac                            | `external_interac`                  |
| APAC                  | au PAY                             | `external_au_pay`                   |
| APAC                  | atone                              | `external_atone`                    |
| APAC                  | Touch’n Go                         | `external_tng_ewallet`              |
| APAC                  | ソフトバンクまとめて支払い (Softbank-Zahlungen) | `external_softbank_carrier_payment` |
| APAC                  | Toss Pay                           | `external_toss_pay`                 |
| APAC                  | Laybuy                             | `external_laybuy`                   |
| APAC                  | Bank Pay                           | `external_bank_pay`                 |
| APAC                  | auかんたん決済 (au easy-Zahlungen)       | `external_au_easy_payment`          |
| APAC                  | BitCash                            | `external_bitcash`                  |
| APAC                  | Azupay                             | `external_azupay`                   |
| APAC                  | d払い (d-barai)                      | `external_dbarai`                   |
| APAC                  | FamiPay                            | `external_famipay`                  |
| APAC                  | GCash                              | `external_gcash`                    |
| APAC                  | GrabPay Later                      | `external_grabpay_later`            |
| APAC                  | MoMo                               | `external_momo`                     |
| APAC                  | NET CASH                           | `external_net_cash`                 |
| APAC                  | Octopus                            | `external_octopus`                  |
| APAC                  | Paidy                              | `external_paidy`                    |
| APAC                  | PayPay                             | `external_paypay`                   |
| APAC                  | PlanPay                            | `external_planpay`                  |
| APAC                  | ペイジー (Pay-easy)                    | `external_pay_easy`                 |
| APAC                  | 楽天ペイ (Rakuten Pay)                 | `external_rakuten_pay`              |
| APAC                  | メルペイ (Merpay)                      | `external_merpay`                   |
| APAC                  | WebMoney                           | `external_webmoney`                 |
| Asien-Pazifik, Europa | ShopBack Pay                       | `external_shopback_pay`             |
| Europa                | Aplazame                           | `external_aplazame`                 |
| Europa                | Bizum                              | `external_bizum`                    |
| Europa                | Divido                             | `external_divido`                   |
| Europa                | Fonix                              | `external_fonix`                    |
| Europa                | Iwocapay                           | `external_iwocapay`                 |
| Europa                | KBC                                | `external_kbc`                      |
| Europa                | Nexi Pay                           | `external_nexi_pay`                 |
| Europa                | Oney                               | `external_oney`                     |
| Europa                | Payconiq                           | `external_payconiq`                 |
| Europa                | PayPo                              | `external_paypo`                    |
| Europa                | Sofinco                            | `external_sofinco`                  |
| Europa                | Postepay                           | `external_postepay`                 |
| Europa                | PostFinance                        | `external_postfinance`              |
| Europa                | Scalapay                           | `external_scalapay`                 |
| Europa                | TrueLayer                          | `external_truelayer`                |
| Europa                | Walley                             | `external_walley`                   |
| Europa                | YounitedPay                        | `external_younited_pay`             |
| Global                | LINE Pay                           | `external_line_pay`                 |
| Global                | paysafecard                        | `external_paysafecard`              |
| Global                | Samsung Pay                        | `external_samsung_pay`              |
| Global                | Sezzle                             | `external_sezzle`                   |
| LATAM                 | Dapp                               | `external_dapp`                     |
| LATAM                 | PicPay                             | `external_picpay`                   |
| MEA                   | Tabby                              | `external_tabby`                    |
| MEA                   | Benefit                            | `external_benefit`                  |
| MEA                   | Fawry                              | `external_fawry`                    |