Payment Method Messaging Element

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.

United States (USD)

Payment Methods

$99.00

The Making of Prince of Persia: Journals 1985-1993

Jordan Mechner

$99.00

Create and mount the 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:

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'],
  // 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.

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:

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.

Appearance

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

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