## PaymentMethodMessagingElement

Use the `PaymentMethodMessagingElement` from `@stripe/react-stripe-js` to inform a customer about available buy-now-pay-later plans.

### Props

- `id` (string)
  Sets the DOM `id` attribute on the rendered Element container. Use this to
target the Element for styling or testing.

- `className` (string)
  Applies custom CSS classes to the Element container.

- `options` (object) **required**
  Options for displaying a `paymentMethodMessaging` element. [See visual examples in the docs.](/payments/payment-method-messaging.md)

  - `amount` (number) **required**
    The total amount in the [smallest currency unit](/currencies.md#zero-decimal).

  - `currency` (string) **required**
    The currency. One of `AUD`, `CAD`, `CHF`, `CZK`, `DKK`, `EUR`, `GBP`, `NOK`, `NZD`, `PLN`, `RON`, `SEK`, `USD`.

  - `countryCode` (string)
    The end-buyer country. One of `AT`, `AU`, `BE`, `CA`, `CH`, `CZ`, `DE`, `DK`, `ES`, `FI`,
`FR`, `GB`, `GR`, `IE`, `IT`, `NL`, `NO`, `NZ`, `PL`, `PT`, `RO`, `SE`, `US`.

If not set, the buyer's country will be inferred from the request.

  - `paymentMethodTypes` (array)
    A list of payment method types to render. You can omit this attribute to manage your payment methods from the [Stripe Dashboard](https://dashboard.stripe.com/settings/payment_methods). Any combination of `affirm`, `afterpay_clearpay`, `klarna`.

  - `paymentMethodOrder` (array)
    By default, the Payment Method Messaging Element uses a dynamic ordering that optimizes payment method display for each user.

You can override the default order in which payment methods display in the Payment Method Messaging Element with a list of payment method types.

If there are payment methods that will show that aren't specified in `paymentMethodOrder`, they display after the payment methods you specify. If you specify payment methods that won't show, they are ignored.

- `onReady` (function)
  Callback called once the Element is fully rendered.
Recieves the [ready event payload](/js/element/events/on_ready.md#element_on_ready-handler).

- `onBlur` (function)
  Callback called when the Element loses focus.

- `onFocus` (function)
  Callback called when the Element receives focus.

### Render PaymentMethodMessagingElement

```JSX
import React, {useMemo} from 'react';
import {Elements, PaymentMethodMessagingElement} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

const stripePromise = loadStripe('{TEST_PUBLISHABLE_KEY}');

export const App = ({clientSecret}) => (
  <Elements stripe={stripePromise} options={{clientSecret}}>
    <PaymentMethodMessagingElement options={{
      amount: 9900,
      currency: 'USD',
      // the country that the end-buyer is in
      countryCode: 'US'
    }} />
  </Elements>
);
```