Skip to content
Sign in
An image of the Stripe logo
/
Create account
Sign in
Home
Payments
Finance automation
Banking as a service
Developer tools
No-code
All products
Home
Payments
Finance automation
Home
Payments
Finance automation
Banking as a service
Developer tools
Overview
Get started
About Stripe payments
Start an integration
Payment Links
Checkout
Web Elements
    Overview
    Elements
    Address Element
    Express Checkout Element
    Payment Element
    Link Authentication Element
    Payment Method Messaging Element
    Other Guides
    Elements Appearance API
    Link purchase protection
Mobile Elements
Payment scenarios
During the payment
After the payment
Add payment methods
More payment scenarios
Faster checkout with Link
Other Stripe products
Connect
Terminal
Radar
Financial Connections
Crypto
Identity
Climate
Resources
About the APIs
Implementation guides
Regulation support
Testing
Elements
·
HomePaymentsWeb Elements

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:

    <script src="https://js.stripe.com/v3/"></script>
  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', paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'], // the country that the end-buyer is in countryCode: 'US', }; const PaymentMessageElement = elements.create('paymentMethodMessaging', options); PaymentMessageElement.mount('#payment-method-messaging-element');

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
$500

When available, the interest-bearing loan payment plans are shown on a separate line from the pay-in-x plans, which might increase the space needed for the element.

Learn more modal

When the customer selects Learn more, the Payment Method Messaging Element displays a modal with details about buy now, pay later methods.

The 'Learn more' modal

A preview of the Learn more modal

The modal includes:

  • A timeline explaining the approval process
  • A summary of terms for each available method
  • A link to the full terms

Supported plans

The Payment Method Messaging Element supports these payment methods and payment plans:

KlarnaAfterpayAffirm
  • Pay in 3
  • Pay in 4
  • Pay in 30 days
  • Pay in 4
  • Interest-bearing loan installments
  • Pay in 4
  • 0% interest loan installments
  • Interest-bearing loan installments

It supports these values for countryCode: US, CA, AU, NZ, GB, IE, FR, ES, DE, AT, BE, DK, FI, IT, NL, NO, SE.

It supports these values for currency: USD, GBP, EUR, DKK, NOK, SEK, CAD, AUD.

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 for additional customization.

const appearance = { variables: { colorText: 'rgb(84, 51, 255)', colorTextSecondary: 'rgb(28, 198, 255)', // "Learn more" text color fontSizeBase: '16px', spacingUnit: '10px', fontWeightMedium: 'bolder', fontFamily: 'Ideal Sans, system-ui, sans-serif', } };

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?
Need help? Contact Support.
Watch our developer tutorials.
Check out our product changelog.
Questions? Contact Sales.
Powered by Markdoc
You can unsubscribe at any time. Read our privacy policy.
On this page
Create and mount the Payment Method Messaging Element
Dynamic display
Learn more modal
Supported plans
Appearance
Products Used
Payments
Stripe Shell
Test mode
Welcome to the Stripe Shell! Stripe Shell is a browser-based shell with the Stripe CLI pre-installed. Log in to your Stripe account and press Control + Backtick (`) on your keyboard to start managing your Stripe resources in test mode. - View supported Stripe commands: - Find webhook events: - Listen for webhook events: - Call Stripe APIs: stripe [api resource] [operation] (e.g., )
The Stripe Shell is best experienced on desktop.
$