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

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

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:

Klarna	Afterpay	Affirm
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.