# Payment Method Messaging Element
Expliquez automatiquement les options de paiement différé.
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.
## Créer et intégrer le Payment Method Messaging Element
#### HTML + JS
Utilisez Stripe Elements pour inclure le composant Element [Payment Method Messaging](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) sur votre site.
1. Intégrez le script Stripe.js à votre page en l’ajoutant entre les balises `head` de votre fichier HTML :
```html
```
2. Créez un élément substituable sur votre page à l’endroit où vous souhaitez intégrer le composant Element Payment Method Messaging :
```html
```
3. Sur vos pages de produit, de panier et de paiement, incluez le code suivant pour créer une instance de Stripe.js ([avec les paramètres régionaux](https://docs.stripe.com/js/appendix/supported_locales)) et intégrez le Payment Method Messaging Element :
```js
// 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('<>');
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');
```
#### React
Utilisez Stripe Elements pour inclure le composant Element [Payment Method Messaging](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging) sur votre site.
1. Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm.
```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```
2. Sur vos pages de produit, de panier et de paiement, incluez le composant `PaymentMethodMessagingElement` :
```jsx
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
// 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 stripePromise = loadStripe('<>');
const ProductDetail = () => (
);
```
> Si votre intégration nécessite que vous répertoriiez manuellement les moyens de paiement, consultez la page [Personnaliser les moyens de paiement](https://docs.stripe.com/elements/payment-method-messaging.md#customize-payment-methods).
## Optional: Utiliser avec Stripe Connect
Les plateformes *Connect* (Connect is Stripe's solution for multi-party businesses, such as marketplace or software platforms, to route payments between sellers, customers, and other recipients) qui créent des paiements directs doivent identifier le compte connecté qui affiche le composant Payment Method Messaging Element. Sur votre front-end, avant de créer le `PaymentMessageElement`, définissez l’option `stripeAccount` sur l’instance Stripe :
```javascript
const stripe = Stripe('<>', {
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
If you use [Dynamic payment methods](https://docs.stripe.com/payments/payment-methods/dynamic-payment-methods.md), the Payment Method Messaging Element automatically pulls your payment method preferences from the [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods) to dynamically show the most relevant payment methods to your customers. Alternatively, you can list payment methods manually using [paymentMethodTypes](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-paymentMethodTypes). The Payment Method Messaging Element still only displays plans that the customer is eligible for based on their location, the currency, and the amount of the payment.
#### HTML + JS
```js
// 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('<>');
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');
```
#### React
```jsx
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
// 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 stripePromise = loadStripe('<>');
const ProductDetail = () => (
<>
{/* ... */}
);
```
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](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-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](https://docs.stripe.com/payments/affirm.md#payment-options)
- [Afterpay / Clearpay](https://docs.stripe.com/payments/afterpay-clearpay.md#payment-options)
- [Klarna](https://docs.stripe.com/payments/klarna.md#payment-options) (pour les paiements uniques uniquement)
> Les messages ne s’affichent pas si la combinaison [countryCode](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-countryCode) et [devise](https://docs.stripe.com/js/elements_object/create_element?type=paymentMethodMessaging#elements_create-options-currency) transmise ne comporte aucun échéancier de paiement offres.
## Apparence
Utilisez l’[API Appearance](https://docs.stripe.com/elements/appearance-api.md) pour personnaliser la police et le logo de votre message. Vous pouvez sélectionner un [thème](https://docs.stripe.com/elements/appearance-api.md?platform=web#theme) comme dans l’exemple ci-dessous.
Utilisez des [variables](https://docs.stripe.com/elements/appearance-api.md#variables) et des [règles](https://docs.stripe.com/elements/appearance-api.md#rules) pour davantage de personnalisation.
```jsx
const appearance = {
variables: {
colorText: 'rgb(84, 51, 255)',
colorTextSecondary: 'rgb(28, 198, 255)',
fontSizeBase: '16px',
spacingUnit: '10px',
fontWeightMedium: 'bolder',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
},
rules: {
'.PaymentMethodMessaging': {
textAlign: 'right',
}
}
};
const elements = stripe.elements({appearance});
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);
```
## 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é](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).
Le Payment Method Messaging Element est un outil qui vous permet d’envoyer un message à vos clients pour leur proposer plusieurs options de paiement différé. Vous êtes responsable du respect des lois, règles et réglementations en vigueur concernant la promotion des options de paiement différé.