Skip to content

Onboarding Flow Pattern

The onboarding flow guides merchants through initial setup. It uses a multi-step centered layout with a clear progress indicator (inspired by Clerk's onboarding).

Structure

┌─────────────────────────────────────┐
│  Page background (#F1F1F1)          │
│                                     │
│  ┌─────────────────────────────┐    │
│  │  MetrePay logo (centered)   │    │
│  │                             │    │
│  │  Step indicator             │    │
│  │  ● ● ○ ○                    │    │
│  │                             │    │
│  │  Step title                 │    │
│  │  Step description           │    │
│  │                             │    │
│  │  [Form fields]              │    │
│  │                             │    │
│  │  [Continue button]          │    │
│  │  [Back link]                │    │
│  └─────────────────────────────┘    │
│                                     │
└─────────────────────────────────────┘

Live Preview

MetrePay
STEP 2 OF 4

Business details

Tell us about your business so we can set up your payment account.

← Back

Step Indicator Variants

Dot Progress (Simple)

<div style="display:flex; justify-content:center; gap:8px; margin-bottom:32px;">
  <div style="width:8px; height:8px; border-radius:50%; background:#6E96FF;"></div>  <!-- completed -->
  <div style="width:8px; height:8px; border-radius:50%; background:#6E96FF;"></div>  <!-- current -->
  <div style="width:8px; height:8px; border-radius:50%; background:#E5ECFB;"></div>  <!-- upcoming -->
  <div style="width:8px; height:8px; border-radius:50%; background:#E5ECFB;"></div>  <!-- upcoming -->
</div>

Text Progress (Stripe-inspired)

<div style="margin-bottom:8px;">
  <span style="font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#6E96FF;">
    STEP 2 OF 4
  </span>
</div>
<h2 style="font-size:24px; font-weight:700; color:#333; margin:0 0 8px 0;">Business details</h2>

CSS Implementation

.onboarding-page {
  background: #F1F1F1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  font-family: 'Cabin', sans-serif;
}

.onboarding-logo {
  margin-bottom: 32px;
}

.onboarding-logo img {
  height: 36px;
}

/* Step dots */
.step-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E5ECFB;
  transition: background 0.3s ease;
}

.step-dot--active,
.step-dot--completed {
  background: #6E96FF;
}

/* Card */
.onboarding-card {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
}

.onboarding-step-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E96FF;
  display: block;
  margin-bottom: 8px;
}

.onboarding-title {
  font-size: 24px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 8px;
}

.onboarding-description {
  font-size: 14px;
  color: #999999;
  margin-bottom: 24px;
  line-height: 1.6;
}

.onboarding-back {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #6E96FF;
  text-decoration: none;
  margin-top: 12px;
}

.onboarding-back:hover {
  text-decoration: underline;
}

Rules

Onboarding rules

  • Always show the MetrePay logo at the top, centered
  • Use dot progress for 4+ steps, text progress for 2-3 steps
  • Card max-width: 480px — same as payment form
  • Step label: uppercase, blue, 12px, letter-spacing: 0.08em
  • Always include a "Back" link below the submit button
  • Never use more than 5 steps in an onboarding flow
  • Each step should have a single clear objective
  • Progress dots: blue for completed/current, #E5ECFB for upcoming