Web Components · Cart & Checkout
<mmm-checkout-payment>
Payment-method picker plus inline payment forms — card, UPI, wallet, COD, etc. Reads available providers from CheckoutStore.paymentMethods and calls the SDK's payment service to capture the transaction on submit.
Overview
Each enabled provider becomes a selectable card. Some providers (Stripe card, UPI ID, BNPL) inline their own input fields; others (PayPal, Apple Pay, COD) collapse to a single button. The "Pay now" CTA submits to the SDK with the current cart + addresses; on success the shopper is redirected to the order confirmation page.
When to use
- As the final step of the checkout flow.
- Pair with
<mmm-checkout-price-summary>so the shopper sees what they're paying.
Quick start
<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>
<mmm-checkout-payment></mmm-checkout-payment>Attributes
Every value falls through to the theme; set inline to override.
AttributeTypeDefaultDescription
border-colorstringtheme border / #d9d9d9Payment-method card border and disabled Pay-now background.text-primary-colorstringtheme primary text / #111Method-name text colour.text-secondary-colorstringtheme secondary text / #666Method-extra / placeholder icon colour.button-colorstringtheme button fill / #000Selected-card accent and Pay-now button background.button-hover-colorstringtheme button hover fill / #333Pay-now button hover background.button-font-weightstringtheme button weight / 500Method-name and Pay-now button font weight.Live preview
Examples
1. Default
<mmm-checkout-payment></mmm-checkout-payment>2. End of the standard checkout left column
<section class="checkout-left">
<mmm-checkout-login-signup-card></mmm-checkout-login-signup-card>
<mmm-checkout-shipping-address></mmm-checkout-shipping-address>
<mmm-checkout-shipping-method></mmm-checkout-shipping-method>
<mmm-checkout-payment></mmm-checkout-payment>
</section>