# Payment Method Messaging Element
Zahlungsoptionen vom Typ „Jetzt kaufen, später bezahlen“ automatisch erklären.
Das Payment Method Messaging Element ist eine Komponente der Nutzeroberfläche, mit der Kundinnen und Kunden über verfügbare Pläne vom Typ „Jetzt kaufen, später bezahlen“ zu informieren. Sie ermittelt automatisch die verfügbaren Pläne und Bedingungen, generiert eine lokalisierte Beschreibung und zeigt diese im Design Ihres Formulars an.
## Erstellen und verbinden Sie das Payment Method Messaging Element
#### HTML + JS
Verwenden Sie Stripe Elements, um das [Payment Method Messaging](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) Element auf Ihrer Website einzubinden.
1. Fügen Sie das Stripe.js-Skript zu Ihrer Seite hinzu, indem Sie es zum `head` Ihrer HTML-Datei hinzufügen:
```html
```
1. Erstellen Sie ein Platzhalterelement auf Ihrer Seite an der Stelle, an der das Payment Method Messaging Element eingebunden werden soll:
```html
```
1. Fügen Sie auf Ihren Produkt-, Warenkorb- und Zahlungsseiten den folgenden Code ein, um eine Instanz von Stripe.js ([mit Gebietsschema](https://docs.stripe.com/js/appendix/supported_locales)) zu erstellen und das Payment Method Messaging Element einzubinden:
```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('<>');
const elements = stripe.elements();
const options = {
amount: 9900, // 99.00 USD
currency: 'USD',
// (optional) the country that the end-buyer is in
countryCode: 'US',
};
const PaymentMessageElement =
elements.create('paymentMethodMessaging', options);
PaymentMessageElement.mount('#payment-method-messaging-element');
```
#### React
Verwenden Sie Stripe Elements, um das [Payment Method Messaging](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) Element auf Ihrer Website einzubinden.
1. 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
```
1. Fügen Sie in Ihren Produkt-, Warenkorb- und Zahlungsseiten die Komponente `PaymentMethodMessagingElement` ein:
```jsx
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-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 stripePromise = loadStripe('<>');
const ProductDetail = () => (
);
```
> Wenn Sie für Ihre Integration Zahlungsmethoden manuell auflisten müssen, lesen Sie [Zahlungsmethoden anpassen](https://docs.stripe.com/elements/payment-method-messaging.md#customize-payment-methods).
## Optional: Mit Stripe Connect verwenden
*Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients)-Plattformen, die Direct Charges erstellen, müssen das verbundene Konto identifizieren, das das Payment Method Messaging Element darstellt. Legen Sie in Ihrem Frontend vor dem Erstellen des `PaymentMessageElement` die Option `stripeAccount` für die Stripe-Instanz fest:
```javascript
const stripe = Stripe('<>', {
stripeAccount: '{{CONNECTED_ACCOUNT_ID}}',
});
```
## Dynamische Anzeige
Das Element zeigt dynamisch Zahlungspläne an, auf die der Kunde/die Kundin Anspruch hat. Diese hängen vom Standort und der Währung des Kunden/der Kundin ab. Sie hängen auch von der Höhe der Zahlung ab, wie in diesem Beispiel:
Einige Zahlungsmethoden bieten zusätzlich zu den „Später bezahlen“-Plänen auch Optionen für „Jetzt bezahlen“ an. Wenn nur die Option „Jetzt bezahlen“ verfügbar ist, wird nichts angezeigt.
## Zahlungsmethoden anpassen
Wenn Sie [dynamische Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md) verwenden, übernimmt das Payment Method Messaging Element automatisch Ihre Zahlungsmethodeneinstellungen aus dem [Stripe-Dashboard](https://dashboard.stripe.com/settings/payment_methods), um Ihren Kundinnen und Kunden dynamisch die für sie relevantesten Zahlungsmethoden anzuzeigen. Alternativ können Sie Zahlungsmethoden auch manuell mit [`paymentMethodTypes`](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-paymentMethodTypes) auflisten. Das Payment Method Messaging Element zeigt jedoch weiterhin nur Pläne an, die anhand Kundenstandort, Währung und Zahlungsbetrag für die Kundinnen und Kunden kompatibel sind.
#### HTML + JS
```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('<>');
const elements = stripe.elements();
const options = {
amount: 9900, // 99.00 USD
currency: 'USD',paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
// (optional) the country that the end-buyer is in
countryCode: 'US',
};
const PaymentMessageElement =
elements.create('paymentMethodMessaging', options);
PaymentMessageElement.mount('#payment-method-messaging-element');
```
#### React
```jsx
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-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 stripePromise = loadStripe('<>');
const ProductDetail = () => (
<>
{/* ... */}
);
```
Standardmäßig verwendet das Payment Method Messaging Element eine dynamische Bestellung, die die Anzeige der Zahlungsmethode für jede/n Nutzer/in optimiert. Verwenden Sie die Option [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-paymentMethodOrder), um Ihre Zahlungsmethoden in der von Ihnen gewünschten Reihenfolge anzuzeigen.
## Info-Modal
Wenn der Kunde/die Kundin das Info-Symbol (ⓘ) auswählt, zeigt das Payment Method Messaging Element ein Modal mit Details zu den Zahlungsplänen für „Jetzt kaufen, später bezahlen“ an.
Eine Vorschau auf das Info-Modal
Das Modal umfasst:
- Eine detaillierte Übersicht über die Verwendung einer Zahlungsmethode vom Typ „Jetzt kaufen, später bezahlen“
- Eine Zusammenfassung der Bedingungen für jeden verfügbaren Zahlungsplan
- Ein Link zu den vollständigen Bedingungen für jeden verfügbaren Zahlungsplan
## Unterstützte Pläne
Das Payment Method Messaging Element unterstützt Zahlungspläne von:
- [Affirm](https://docs.stripe.com/payments/affirm.md#payment-options)
- [Afterpay / Clearpay](https://docs.stripe.com/payments/afterpay-clearpay.md#collection-schedule)
- [Klarna](https://docs.stripe.com/payments/klarna.md#payment-options) (nur für einmalige Zahlungen)
> Die Nachricht wird nicht angezeigt, wenn die übergebene Kombination aus [countryCode](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-countryCode) und [currency](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-currency) keine zulässigen Zahlungspläne enthält.
## Erscheinungsbild
Verwenden Sie die [Appearance API](https://docs.stripe.com/elements/appearance-api.md), um die Schriftart und das Logo Ihrer Nachrichten anzupassen. Sie können ein [Design](https://docs.stripe.com/elements/appearance-api.md?platform=web#theme) auswählen, wie im Beispiel unten.
Verwenden Sie [Variablen](https://docs.stripe.com/elements/appearance-api.md#variables) und [Regeln](https://docs.stripe.com/elements/appearance-api.md#rules) für weitere Anpassungen.
```jsx
const appearance = {
variables: {
colorText: 'rgb(84, 51, 255)',
colorTextSecondary: 'rgb(28, 198, 255)', // info icon color
fontSizeBase: '16px',
spacingUnit: '10px',
fontWeightMedium: 'bolder',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
},
rules: {
'.PaymentMethodMessaging': {
textAlign: 'right',
}
}
};
const elements = stripe.elements({appearance});
const options = {
amount: 9900, // 99.00 USD
currency: 'USD',
paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
// (optional) the country that the end-buyer is in
countryCode: 'US',
};
const PaymentMessageElement = elements.create('paymentMethodMessaging', options);
```
## Stripe Ihren Kundinnen/Kunden anzeigen
Stripe erfasst Informationen über Kundeninteraktionen mit Elements , um Ihnen Dienste bereitzustellen, Betrug vorzubeugen und seine Dienste zu verbessern. Dies umfasst auch die Verwendung von Cookies und IP-Adressen, um zu ermitteln, welche Elements ein/e Kund/in während einer einzelnen Checkout-Sitzung gesehen hat. Sie sind dafür verantwortlich, alle Rechte und Zustimmungen offenzulegen und einzuholen, die Stripe benötigen, um Ihre Daten auf diese Weise zu nutzen. Weitere Informationen finden Sie in unserem [Datenschutzcenter](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
Das Payment Method Messaging Element ist ein Tool, mit dem Sie Ihren Kundinnen und Kunden über verschiedene Zahlungsoptionen des Typs „Jetzt kaufen, später zahlen“ mitteilen können. Sie sind für die Einhaltung der geltenden Gesetze, Regeln und Vorschriften in Bezug auf die Förderung von Zahlungsoptionen des Typs „Jetzt kaufen, später zahlen“ verantwortlich.