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.
Create and mount the Payment Method Messaging Element
Caution
If your integration requires you to list payment methods manually, see Customize payment methods.
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 | $1200 |
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.
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.
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.
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 these payment methods and payment plans:
Klarna | Afterpay | Affirm |
|
|
|
It supports these values for countryCode
: AT, AU, BE, CA, CZ, DE, DK, ES, FI, FR, GB, GR, IE, IT, NL, NO, NZ, PL, PT, RO, SE, US
.
It supports these values for currency
: AUD, CAD, CZN, DKK, EUR, GBP, NOK, NZD, PLN, RON, SEK, USD
.
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)', // 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.