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

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx', {
  stripeAccount: 
'{{CONNECTED_ACCOUNT_ID}}',
});

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

Fenêtre modale d’information

Lorsque le client sélectionne l’icône d’information ((i)), le 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 échéancier de paiement disponible
• Lien vers les conditions complètes de chaque échéancier de paiement disponible

Plans pris en charge

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

• Affirm
• Afterpay / Clearpay
• Klarna (pour les paiements uniques uniquement)

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é.