convert-checkout-page

# Convert Checkout Page - Checkout Micro-Copy + Trust Signals

> *"By the time they hit checkout, the heavy persuasion is done. The job here is friction reduction. Every doubt that creeps in between the buy button and the confirm button is a sale you already won and lost again. Micro-copy is the lever."*

This skill builds the checkout-page surface: order summary, form-field copy, optional bump slot, button label, guarantee restatement, and the trust signals that close the gap between intent and confirm.

## When to Use

Trigger phrases: `checkout page`, `order page`, `order form copy`, `checkout copy`, `cart page`, `/convert checkout <product>`.

Use when:
- The user has a sales page (or VSL page) that needs a checkout surface to land on.
- The checkout will be assembled from a payment processor (Stripe Checkout, ThriveCart, SamCart, custom). This skill emits the *page chrome* and copy - the form fields themselves usually come from the processor.
- The user wants to reduce checkout abandonment.

## When NOT to Use

- **The bump component itself** → `/convert bump` (this skill includes a slot for it).
- **Post-purchase OTO** → `/convert oto-page`.
- **Pre-purchase sales page** → `/convert sales-page`.
- **Auditing existing checkout** → `/convert audit`.

## Inputs

Required:
1. **Product + price + components** - what's being bought.
2. **Payment processor** - Stripe Checkout / ThriveCart / SamCart / custom. Determines what form fields you control vs. inherit.
3. **Guarantee terms** - exact text.
4. **One person + the brand voice from the upstream sales page** (voice continuity matters here).
5. **Bump (optional)** - if a `/convert bump` exists, this page reserves a slot for it.

Optional:
- **Brand colors / logo.**
- **Trust badges / payment-method icons / SSL signal copy.**
- **Existing testimonial for sidebar reassurance block.**
- **`out_path`** - defaults via `build_report_path`.

## Workflow - All Eight Method Phases (radically compressed; checkout is execution, not persuasion)

The checkout page is **post-decision** copy. The Method still applies, but every phase compresses to a sentence or a label.

### Phase 0 - Four Questions (call `convert-four-questions`)

The buyer's *current* questions at the moment they hit checkout:
- **Why You?** - Already answered upstream.
- **Why Me?** - Already answered.
- **Why This?** - Already answered.
- **Why Now?** - *"Should I really do this right now?"* This is the only Question still alive at checkout, and it's the one micro-copy must address.

### Phase 1 - Temperature

Boiling. Don't pitch. Confirm.

### Phase 2 - Four-Layer Open (call `convert-open`)

A page-top reassurance line collapses Layers 1–3 into one sentence:

*"You're seconds away from [the desired state]. Fill in the details below - I'll have your access ready before you finish your coffee."*

Layer 4 (Fingerprint) lives in the voice consistency between this page and the sales page.

### Phase 3 - Three Locks

- **Want** = the state, restated in one line at top.
- **Trust** = guarantee block + payment badges + (optional) one inline testimonial.
- **Excuse** = the guarantee. Restated *next to* the buy button - not at the bottom of the page where the eye doesn't reach.

### Phase 4 - Bullets

3 bullets max in the order summary - what's included. Mostly Snapshot ("Module 1: ...", "Bonus: ...") for clarity, not curiosity.

### Phase 5 - Proof

A single inline testimonial in a sidebar or below the form. Optional but high-leverage. One Anecdote / Receipt is enough; more distracts from form completion.

### Phase 6 - Cascade Close

The buy button is the Door. Label it with Vision:

- ✗ "Submit" / "Pay now" / "Continue"
- ✓ "Get instant access" / "Lock in my spot" / "Start the program"

### Phase 7 - Greased Chute

Eye flow: order summary → form fields → bump (optional) → guarantee + trust badges → buy button. No detours, no popups, no "are you sure?" interrupts.

### Phase 8 - Voice + Bullshit Filter

The biggest filter test: *"Does the voice on this page match the voice on the sales page?"* Voice mismatch between sales page and checkout is one of the largest sources of cart abandonment - buyers feel like they're suddenly on a different site.

## Section Architecture

| # | Section | Purpose |
|---|---------|---------|
| 1 | Top reassurance line | Open compressed |
| 2 | Order summary block (with edit option) | Want lock |
| 3 | Form fields (name, email, payment) | Friction layer |
| 4 | Bump slot (optional) | Bump from /convert bump |
| 5 | Guarantee restatement | Excuse lock |
| 6 | Buy button (Vision-labeled) | Door |
| 7 | Trust signals (badges, SSL, payment methods) | Trust lock |
| 8 | Inline testimonial (sidebar or below button) | Trust reinforcement |
| 9 | Footer: contact link + refund link + privacy | Friction reduction |

## HTML/CSS Reference Implementation

```html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checkout - {{PRODUCT_NAME}}</title>
  <meta name="description" content="{{META_DESCRIPTION}}">
  <meta property="og:title" content="Checkout - {{PRODUCT_NAME}}">
  <meta property="og:type" content="website">
  <style>
    :root{--ink:#0e1116;--ink-soft:#3a3f47;--paper:#fbfaf6;--accent:#c0392b;--accent-ink:#fff;--rule:#e6e2d8;--max:920px}
    *,*::before,*::after{box-sizing:border-box}
    body{margin:0;font:17px/1.55 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--paper)}
    main{max-width:var(--max);margin:0 auto;padding:24px 20px 64px;display:grid;grid-template-columns:1fr;gap:24px}
    @media(min-width:820px){main{grid-template-columns:1.2fr 1fr}}
    h1{font-size:clamp(22px,3.8vw,28px);line-height:1.2;margin:0 0 14px}
    h2{font-size:18px;margin:24px 0 10px}
    p{margin:0 0 14px}
    .reassure{background:#fff;border:1px solid var(--rule);padding:14px 16px;border-radius:8px;font-size:15px;color:var(--ink-soft)}