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.

États-Unis (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é.

Customize Payment Methods

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'],
  // (optional) 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é.

Info modal

When the customer selects the info icon (ⓘ), the Payment Method Messaging Element displays a modal with details about buy now, pay later payment plans.

A preview of the info modal

La fenêtre modale inclut :

• A step-by-step overview of how to use a buy now, pay later payment method
• A summary of terms for each available payment plan
• A link to the full terms for each available payment plan

Plans pris en charge

Le composant Payment Method Messaging Element prend en charge les échéanciers de paiement suivants :

• Affirm
• Afterpay / Clearpay
• Klarna

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

Divulguer Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.