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.

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

99,00 $

Erstellen und verbinden Sie das Payment Method Messaging Element

Verwenden Sie Stripe Elements, um das Payment Method Messaging Element auf Ihrer Website einzubinden.

Fügen Sie das Stripe.js-Skript zu Ihrer Seite hinzu, indem Sie es zum head Ihrer HTML-Datei hinzufügen:
```
<script src="https://js.stripe.com/basil/stripe.js"></script>
```
Erstellen Sie ein Platzhalterelement auf Ihrer Seite an der Stelle, an der das Payment Method Messaging Element eingebunden werden soll:
```
<div id="payment-method-messaging-element"></div>
```

Fügen Sie auf Ihren Produkt-, Warenkorb- und Zahlungsseiten den folgenden Code ein, um eine Instanz von Stripe.js (mit Gebietsschema) zu erstellen und das Payment Method Messaging Element einzubinden:

// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
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');

Vorsicht

Wenn Sie für Ihre Integration Zahlungsmethoden manuell auflisten müssen, lesen Sie Zahlungsmethoden anpassen.

OptionalMit Stripe Connect verwenden

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:

$0.99	$99	$1200

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 verwenden, übernimmt das Payment Method Messaging Element automatisch Ihre Zahlungsmethodeneinstellungen aus dem Stripe-Dashboard, um Ihren Kundinnen und Kunden dynamisch die für sie relevantesten Zahlungsmethoden anzuzeigen. Alternativ können Sie Zahlungsmethoden auch manuell mit 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.

// 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('pk_test_TYooMQauvdEDq54NiTphI7jx'
);
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');

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, um Ihre Zahlungsmethoden in der von Ihnen gewünschten Reihenfolge anzuzeigen.

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:

Vorsicht

Nachrichten werden nicht gerendert, wenn die übergebene Kombination aus countryCode und Währung keine berechtigten Zahlungspläne enthält.

Erscheinungsbild

Verwenden Sie die Appearance API, um die Schriftart und das Logo Ihrer Nachrichten anzupassen. Sie können ein Design auswählen, wie im Beispiel unten.

Flat	Night	Stripe

Verwenden Sie Variablen und Regeln für weitere Anpassungen.

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',
    }
  }
};

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.

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.