Skip to main content

Onboarding Modal

Onboarding state examples for missing address or payment setup and the ready state.

What This Example Demonstrates​

The modal decides which prerequisite the customer must complete before checkout. It distinguishes an account missing both address and payment setup, an account with only an address, and a ready account.

How to Use It​

Derive these booleans from authenticated backend responses, not from untrusted browser storage. Recheck readiness immediately before checkout because a saved address or payment method can be removed in another session.

{
  "description": "Extended logical payloads for the reference commerce UI. These examples can be used as mock API responses, Storybook fixtures, or frontend integration test data.",
  "onboardingModal": {
    "missingBoth": {
      "OnboardingModalProps": {
        "isOpen": true,
        "hasAddress": false,
        "haspayment_provider": false
      }
    },
    "addressOnly": {
      "OnboardingModalProps": {
        "isOpen": true,
        "hasAddress": true,
        "haspayment_provider": false
      }
    },
    "ready": {
      "OnboardingModalProps": {
        "isOpen": true,
        "hasAddress": true,
        "haspayment_provider": true
      }
    }
  }
}