Payment Method Messaging Element

Le Payment Method Messaging Element est un composant de l’interface utilisateur qui permet d’informer le client des plans de paiement différé disponibles. Il détermine automatiquement les plans et conditions disponibles, génère une description localisée et l’affiche dans le thème de votre formulaire.

United States (USD)

Payment Methods

99,00 $US

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

99,00 $US

Créer et intégrer le Payment Method Messaging Element

Affichage dynamique

L’élément affiche de manière dynamique les plans de paiement auxquels le client est éligible. Ceux-ci dépendent du lieu ou se trouve le client et de la devise. Ils dépendent également du montant du paiement, comme dans cet exemple :

Certains moyens de paiement proposent des offre de « paiement immédiat » en plus des offres de « paiement différé ». Si seule l’option « paiement immédiat » est disponible, rien n’est affiché.

Personnaliser les moyens de paiement

Si vous utilisez des moyens de paiement dynamiques, le composant Payment Method Messaging Element extrait automatiquement vos préférences en matière de moyens de paiement du Dashboard Stripe afin d’afficher dynamiquement les moyens de paiement les plus pertinents pour vos clients. Vous pouvez également répertorier manuellement les moyens de paiement à l’aide de paymentMethodTypes. Le composant Payment Method Messaging Element n’affiche que les moyens de paiement que le client peut utiliser en fonction de sa localisation, de la devise et du montant du paiement.

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

Par défaut, le composant Payment Method Messaging Element utilise un ordre dynamique qui optimise l’affichage des moyens de paiement pour chaque utilisateur. Utilisez l’option paymentMethodOrder pour définir votre ordre préféré.

Fenêtre modale d’information

Lorsque le client sélectionne l’icône d’information (ⓘ), le composant Payment Method Messaging Element affiche une fenêtre modale contenant des informations sur les plans de paiement différé.

Aperçu de la fenêtre modale d’information

La fenêtre modale inclut :

• Présentation étape par étape de l’utilisation d’un moyen de paiement différé
• Un résumé des conditions de chaque plan de paiement disponible
• Lien vers les conditions complètes de chaque plan de paiement disponible

Plans pris en charge

Le Payement Method Messaging Element prend en charge les moyens de paiement et plans de paiement suivants :

Les valeurs suivantes sont prises en charge pour le countryCode : AT, AU, BE, CA, CZ, DE, DK, ES, FI, FR, GB, GR, IE, IT, NL, NO, NZ, PL, PT, RO, SE, US.

Les valeurs suivantes sont prises en charge pour les currency: AUD, CAD, CZN, DKK, EUR, GBP, NOK, NZD, PLN, RON, SEK, USD.

Apparence

Utilisez l’API Appearance pour personnaliser la police et le logo de votre message. Vous pouvez sélectionner un thème comme dans l’exemple ci-dessous.

Utilisez des variables et des règles pour davantage de personnalisation.

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