← Web Components

Web Components · Cart & Checkout

<mmm-checkout-login-signup-card>

The first step of the checkout flow when the shopper is signed-out — pick between sign-in, guest checkout, or signup. Includes phone-OTP flows alongside email + password. Theme-aware with a small set of inline overrides.

Overview

For logged-in shoppers the card collapses to a single "Continue as <name>" row. Otherwise it shows three options stacked: sign in, continue as guest, or create an account. Form submission writes the authenticated identity into CheckoutStore; downstream components react automatically.

When to use

  • At the top of the checkout layout, above shipping address.
  • For stores that allow guest checkout but encourage signups.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-checkout-login-signup-card></mmm-checkout-login-signup-card>

Attributes

Every value falls through to the theme; set inline to override.

AttributeTypeDefaultDescription
heading-font-weightstringtheme heading weight / 600Heading font weight.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Secondary text colour (subtitles, hints).
border-colorstringtheme border / #e5e7ebCard border colour.
input-stroke-colorstringtheme input stroke / #d9d9d9Input border colour.
button-colorstringtheme button fill / #000Primary button background.
button-color-hoverstringtheme button hover fill / #333Primary button hover background.
button-font-weightstringtheme button weight / 500Primary button font weight.

Live preview

store sample-store tag <mmm-checkout-login-signup-card>

Examples

1. Default

<mmm-checkout-login-signup-card></mmm-checkout-login-signup-card>

2. Accent-button branding

<mmm-checkout-login-signup-card
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  border-color="#2a2e33"
  text-primary-color="#fafafa"
  text-secondary-color="#9ca3af">
</mmm-checkout-login-signup-card>

3. High-contrast inputs

<mmm-checkout-login-signup-card
  input-stroke-color="#0e1011"
  button-color="#0e1011"
  heading-font-weight="700">
</mmm-checkout-login-signup-card>