Skip to content

Split Checkout Pattern

The split checkout is a two-panel layout inspired by Stripe. The left panel shows the order summary on a gradient background; the right panel contains the payment form on white.

Structure

┌──────────────────────────────────────────────────┐
│  Page background (#F1F1F1)                       │
│                                                  │
│  ┌─────────────────┬────────────────────────┐    │
│  │  LEFT PANEL     │  RIGHT PANEL           │    │
│  │  (Gradient)     │  (White)               │    │
│  │                 │                        │    │
│  │  Merchant logo  │  Step indicator        │    │
│  │  Product name   │  Form fields           │    │
│  │  Price          │  Payment method tabs   │    │
│  │  Period         │  Card input group      │    │
│  │  Line items     │  Submit button         │    │
│  │  Total          │  Security note         │    │
│  └─────────────────┴────────────────────────┘    │
│                                                  │
└──────────────────────────────────────────────────┘

On mobile, the panels stack vertically (summary on top, form below).

Live Preview

Acme Corp

$29.99

per month

Pro Plan $29.99
Tax $0.00
Total due today $29.99
STEP 2 OF 2

Payment details

🔒 Secured by MetrePay

CSS Implementation

.split-checkout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 900px;
  margin: 40px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 10px 16px rgba(0, 14, 45, 0.1);
  font-family: 'Cabin', sans-serif;
}

/* Left panel */
.split-checkout__summary {
  background: linear-gradient(73deg, #6E96FF 20%, #5C0390 100%);
  padding: 40px 32px;
  color: white;
}

.split-checkout__product-name { font-size: 13px; opacity: 0.8; margin-bottom: 4px; }
.split-checkout__price        { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
.split-checkout__period       { font-size: 13px; opacity: 0.7; margin-bottom: 32px; }

.split-checkout__line-items {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 16px;
}

.split-checkout__line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.split-checkout__line--total {
  font-weight: 700;
  font-size: 15px;
  border-bottom: none;
  padding-top: 12px;
}

.split-checkout__line-muted { opacity: 0.7; }

/* Right panel */
.split-checkout__form {
  background: #FFFFFF;
  padding: 40px 32px;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .split-checkout {
    grid-template-columns: 1fr;
  }
}

When to Use

Use Split Checkout Use Single Form
Subscription / recurrent payments One-time payments
Multiple line items Single product
When showing order summary adds trust Simple invoice payment
Stripe-quality checkout experience Quick payment link

Rules

Split checkout rules

  • Left panel always uses --mp-gradient-hero
  • Right panel always uses white background
  • Border radius: 16px on the outer container
  • On mobile: summary panel stacks on top, form below
  • Submit button in right panel uses purple (subscription context)
  • Always show a security note below the submit button
  • Line items in left panel use rgba(255,255,255,0.1) dividers