Payment Method Messaging Element

⭐️ Minimal reference integration: A single Payment Method Messaging Element which displays payment options and, when interacted with, a modal with more information

⚠️ Note: This integration is not production ready and should only be used as a reference.

⚙️ Integration

🧑‍💻 Code

<script src="https://js.stripe.com/v3/"></script>

<p id="payment-method-messaging-element"></p>
#payment-method-messaging-element {
  /* Show the boundary of the Element */
  border: solid 1px;
  /* Required for dark mode legibility */
  background-color: white;
  /* Aesthetics */
  border-radius: .25rem;
  padding: .5rem;
}
const stripe = Stripe('pk_test_51O2hxMC4JnNRtz8VToJJbGHrFTPPr6TkP09h7ql3YJaqpNcxoSNxtk38glyzi9VrZKStns858YynOO2ZyGmU7VRi00CIUWuUdk');

const elements = stripe.elements();

const paymentMethodMessagingElement = elements.create('paymentMethodMessaging', {
  amount: 14200,
  currency: 'USD',
  countryCode: 'US',
});

paymentMethodMessagingElement.mount('#payment-method-messaging-element');