Skip to content

Recurrent Payment Pattern

The recurrent/subscription payment form uses a purple hero header to signal the subscription context. The layout is identical to the single payment form but with purple branding.

Structure

Same as the Payment Form Pattern but with: - Purple hero (#5C0390) instead of blue - "Subscribe" or "Authorize debit" as the CTA label - Subscription period displayed in the hero - Additional consent checkbox before submit

Live Preview

Acme Corp

Pro Subscription

$29.99/month

STEP 1 OF 2

Your information

Powered by MetrePay · Secure payment

Key Differences from Single Payment

Element Single Payment Recurrent Payment
Hero color #6E96FF (blue) #5C0390 (purple)
Step label color Blue Purple
Submit button Blue Purple
CTA label "Continue →" "Authorize subscription →"
Hero subtitle Amount only Amount + period
Consent checkbox Not required Required

The consent checkbox is mandatory for recurrent payments. It must: - Clearly state the amount and frequency - Mention cancellation rights - Be unchecked by default - Block form submission if unchecked

<div style="margin-bottom:20px; display:flex; align-items:flex-start; gap:10px;">
  <input type="checkbox" id="consent" required
    style="margin-top:3px; width:16px; height:16px; accent-color:#5C0390; flex-shrink:0;">
  <label for="consent" style="font-size:13px; color:#666; line-height:1.5;">
    I authorize the automatic monthly debit of <strong>$29.99</strong> from my account.
    I can cancel at any time by contacting support.
  </label>
</div>

CSS Changes (Purple Variant)

/* Override blue → purple for recurrent flows */
.checkout-hero         { background: #5C0390; }
.step-label            { color: #5C0390; }
.btn-submit            { background: #5C0390; }
.btn-submit:hover      { background: #3A005C; }
.input:focus           { border-color: #5C0390; box-shadow: 0 0 0 3px rgba(92, 3, 144, 0.15); }
input[type="checkbox"] { accent-color: #5C0390; }