Payment Method Messaging Element

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.

United States (USD)

Payment Methods

99,00 $

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

99,00 $

Erstellen und verbinden Sie das Payment Method Messaging Element

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 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'],
  // 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.

Infomodal

Wenn der Kunde/die Kundin das Informationssymbol (ⓘ) auswählt, zeigt das Payment Method Messaging Element ein Modal mit Details zu den Methoden vom Typ „Jetzt kaufen, später bezahlen“ an.

Eine Vorschau auf das Infomodal

Das Modal umfasst:

• Eine detaillierte Übersicht über die Verwendung einer Zahlungsmethode vom Typ „Jetzt kaufen, später bezahlen“
• Eine Übersicht der Bedingungen für jeden verfügbaren Zahlungsplan
• Link zu den vollständigen Bedingungen für jeden verfügbaren Zahlungsplan

Unterstützte Pläne

Das Payment Method Messaging Element unterstützt die folgenden Zahlungsmethoden und Zahlungspläne:

Die folgenden Werte werden für countryCode unterstützt: AT, AU, BE, CA, CZ, DE, DK, ES, FI, FR, GB, GR, IE, IT, NL, NO, NZ, PL, PT, RO, SE, US.

Die folgenden Werte werden für currency unterstützt: AUD, CAD, CZN, DKK, EUR, GBP, NOK, NZD, PLN, RON, SEK, USD.

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.

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