← Web Components

Web Components · Account

<mmm-signup>

Account creation form with email + phone (OTP) verification. After a successful signup the SDK auto-signs the user in and fires both signup-success and login-success plus the global commmerce:auth-changed.

Overview

UI mirrors <mmm-login> with extra fields (name + confirm password). Uses the embedded <mmm-phone-input> for phone verification. After signup, the user is logged in immediately — listen for signup-success if you need a distinct welcome flow, or login-success if you just want a unified post-auth hook.

Quick start

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

<mmm-signup></mmm-signup>

Attributes

AttributeTypeDefaultDescription
theme-modestringlightlight or dark — swaps the default palette.
background-colorstring#f5f5f5 (light) / #121212 (dark)Page background.
panel-backgroundstring#ffffff (light) / #1f1f1f (dark)Signup-box background.
font-familystringtheme description font / inheritCard font family.
heading-font-weightstringtheme heading weight / 600Heading font weight.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Subtitle and helper text.
input-stroke-colorstringtheme input stroke / #dddInput border colour.
button-colorstringtheme button fill / #000Create-account button background.
link-colorstringtheme hyperlink / #0066cc"Sign in instead" link colour.
link-hover-colorstringtheme hyperlink hover / text-primaryLink hover colour.
border-radiusstringtheme border radiusBorder-radius for inputs, buttons, and the card.
button-font-sizestringtheme button size / 14pxButton font size.
button-font-weightstringtheme button weight / 500Button font weight.
button-font-familystringtheme button font / inheritButton font family.
link-font-weightstringtheme link weight / 500Link font weight.

Events

EventTargetPayload
signup-successelement (bubbles, composed){ firstName, lastName, email, phone, dialCode }
login-successelement (bubbles, composed){ firstName, lastName, email, phone, dialCode }
commmerce:auth-changedwindow{ isLoggedIn: true, userName: string }

Live preview

store sample-store tag <mmm-signup>

Examples

1. Default

<mmm-signup></mmm-signup>

2. Welcome flow only on first signup

document.querySelector('mmm-signup').addEventListener('signup-success', (e) => {
  /* Just-signed-up — open the welcome modal */
  myWelcomeModal.open({ name: e.detail.user.name });
});

3. Brand-coloured signup card

<mmm-signup
  button-color="#c8a8ff"
  link-color="#c8a8ff"
  link-hover-color="#b990ff"
  heading-font-weight="700">
</mmm-signup>