← Web Components

Web Components · Order

<mmm-order-status>

Post-checkout success / failure page. Renders a checkmark animation on success with auto-redirect to the order-detail page, or an error state on payment failure with retry. Reads orderAccessToken from the URL path.

Overview

Auto-detects state from the URL — visit /checkout/success/{orderAccessToken} for success or /checkout/failed/{orderAccessToken}?reason=payment_failed for the failure state. The status attribute overrides URL detection if you need to force a state for testing.

On success, the component calls the orderSuccessPageTrackingSnippets API and then redirects to the order-detail page (after redirect-delay seconds — defaults to 5). Set auto-redirect="false" to disable the auto-redirect entirely.

When to use

  • At /checkout/success/{accessToken} and /checkout/failed/{accessToken} — the redirect landing pages from the payment gateway.
  • Inside an order-detail layout when you want a top-of-page success banner with countdown.

Quick start

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

<mmm-order-status auto-redirect="true" redirect-delay="5"></mmm-order-status>

Attributes

AttributeTypeDefaultDescription
statusstringURL-derivedsuccess or failed. When omitted, derived from the URL path / query string.
auto-redirectbooleantrueAuto-navigate to /orders/{orderNo}/{accessToken} after the countdown. Set false to require a manual click.
redirect-delaynumber5Seconds before redirect. Used as the countdown timer.
text-primary-colorstringtheme primary textHeadline / order-no colour.
text-secondary-colorstringtheme secondary textSubtitle / countdown text colour.
button-colorstringtheme button fillPrimary CTA background ("View order" / "Try again").
button-color-hoverstringtheme button hover fillCTA hover.
border-colorstringtheme borderCard / divider border.
link-colorstringtheme hyperlink defaultOrder-number link colour in the success card.

Events

EventTargetPayload
order-status:api-successwindow{ orderAccessToken, response }
order-status:api-errorwindow{ orderAccessToken, error }
order-status:redirectwindow{ orderNo, orderAccessToken, status }
order-status:shop-morewindow{ orderNo }
order-status:retry-paymentwindow{ orderNo, orderAccessToken }

Live preview

store sample-store tag <mmm-order-status>

Examples

1. Default auto-redirect success page

<mmm-order-status></mmm-order-status>

2. No auto-redirect, longer review window

<mmm-order-status auto-redirect="false" redirect-delay="15"></mmm-order-status>

3. Forced success state for QA / preview

<mmm-order-status status="success" auto-redirect="false"></mmm-order-status>

4. Fire analytics + custom retry flow

window.addEventListener('order-status:api-success', () => analytics.track('order_success'));
window.addEventListener('order-status:retry-payment', (e) => {
  location.href = `/checkout?retry=${e.detail.orderNo}`;
});