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.

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.

Add the Stripe.js script on your page by adding it to the head of your HTML file:
```
<script src="https://js.stripe.com/v3/"></script>
```
Create a placeholder element in your page where you want to mount the Payment Method Messaging Element:
```
<div id="payment-method-messaging-element"></div>
```

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

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.

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

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 does not 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.

Payment Method Messaging Element

Automatically explain buy now, pay later payment options.

Create and mount the Payment Method Messaging Element

Caution

OptionalUse with Stripe Connect

Dynamic display

Customize Payment Methods

Info modal

Supported plans

Caution

Appearance

Disclose Stripe to your customers