KEMBAR78
Payment Method Messaging Element | Stripe Documentation
Skip to content
Create account or Sign in
The Stripe Docs logo
/
Create accountSign in
OverviewUpgrade your integration
Online payments
OverviewFind your use caseUse Managed Payments
Payment methods
Payment interfaces
Payment scenarios
In-person payments
Beyond payments

Payment Method Messaging Element

Automatically explain buy now, pay later payment options.

The Payment Method Messaging Element is a UI component for informing a customer about available buy-now-pay-later plans. It automatically determines the available plans and conditions, generates a localized description, and displays it in your form’s theme.

Prince of Persia book
The Making of Prince of Persia: Journals 1985-1993
Jordan Mechner
$99.00

Create and mount the Payment Method Messaging Element

Use Stripe Elements to include the Payment Method Messaging Element on your site.

  1. Add the Stripe.js script on your page by adding it to the head of your HTML file:

  2. Create a placeholder element in your page where you want to mount the Payment Method Messaging Element:

    <div id="payment-method-messaging-element"></div>

  3. On your product, cart, and payment pages, include the following code to create an instance of Stripe.js (with locale) and mount the Payment Method Messaging Element:

    // 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',
  // (optional) the country that the end-buyer is in
  countryCode: 'US',
};
const PaymentMessageElement =
  elements.create('paymentMethodMessaging', options);
PaymentMessageElement.mount('#payment-method-messaging-element');

Caution

If your integration requires you to list payment methods manually, see Customize payment methods.

OptionalUse with Stripe Connect

Connect platforms that create direct charges must identify the connected account that renders the Payment Method Messaging Element. On your frontend, before creating the PaymentMessageElement, set the stripeAccount option on the Stripe instance:

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

Dynamic display

The element dynamically displays payment plans that the customer is eligible for. These depend on the customer’s location and currency. They also depend on the amount of the payment, as in this example:

$0.99
$99
$1200

Some payment methods offer “pay now” in addition to “pay later” plans. If only a “pay now” option is available, nothing is shown.

Customize Payment Methods

If you use Dynamic payment methods, the Payment Method Messaging Element automatically pulls your payment method preferences from the Stripe Dashboard to dynamically show the most relevant payment methods to your customers. Alternatively, you can list payment methods manually using 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.

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

By default, the Payment Method Messaging Element uses a dynamic ordering that optimizes payment method display for each user. Use the paymentMethodOrder option to set your preferred order.

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.

The info modal

A preview of the info modal

The modal includes:

  • 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

Supported plans

The Payment Method Messaging Element supports payment plans from:

Caution

Messaging doesn’t render if the countryCode and currency combination passed has no eligible payment plans.

Appearance

Use the Appearance API to customize the font and logo of your messaging. You can select a theme as in the example below.

Flat
Night
Stripe

Use variables and rules for additional customization.

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

Disclose Stripe to your customers

Stripe collects information on customer interactions with Elements to provide services to you, prevent fraud, and improve its services. This includes using cookies and IP addresses to identify which Elements a customer saw during a single checkout session. You’re responsible for disclosing and obtaining all rights and consents necessary for Stripe to use data in these ways. For more information, visit our privacy center.

The Payment Method Messaging Element is a tool that allows you to message various buy now, pay later payment options to your customers. You’re responsible for compliance with applicable laws, rules, and regulations regarding the promotion of buy now, pay later payment options.

Was this page helpful?
YesNo