Integrations · Phase 1

Enquiry, payments & consent

The three components that ship value on day one for Aoife, Niamh and Cathal. Each works without JavaScript, keeps card data off the site, and treats consent as something the visitor grants — never a pre-ticked default. Build detail in specs/integrations.md.

No client backend EUR incl. VAT Consent recorded

01 · Enquiry form Phase 1

For Cathal (Forge Hyrox) — triage leads by goal and experience, with a separate, unticked marketing opt-in so a "yes" is real.

Name

Your goal

Experience

Anything we should know? (optional)

I agree to Forge contacting me about my enquiry, and to my details being handled per the privacy policy. Required — this is the lawful basis for replying to you. Send me occasional training tips and offers. Optional, and separate — leave unticked and we still reply to your enquiry.

Enquiry sent

Thanks — we'll reply by email. Your consent was recorded with a timestamp.

Submitting records the exact consent wording and an ISO timestamp on the component (data-consent-at) — the audit trail GDPR expects.

02 · Deposit payment Phase 1

For Niamh (Gloss Nail Studio) — one button, one job: take a deposit so the chair doesn't sit empty. Card details go to Stripe, never the site.

€45.00 incl. VAT

Secure your appointment with a deposit. Deducted from the balance on the day.

Pay deposit securely

Stripe-hosted · Visa, Mastercard, Apple Pay, Google Pay

No PCI burden on the client: Stripe hosts the card form. Start with a static Payment Link, graduate to Checkout when the amount is dynamic.

03 · Consent banner Phase 1

The cross-cutting prerequisite — for all three. Nothing third-party with cookies (scheduler, map) loads until the visitor opts in. It appears once; your choice is remembered.

The functional banner (fixed, bottom-right) sits at the end of the <body> and is shown/hidden by ui.js based on localStorage. The demo above is the same markup with position:static.

<div class="consent" data-consent-banner role="region" aria-label="Cookie consent">
  <p class="consent__text">
    <strong>We keep it light.</strong> We'd like to load embedded
    content (booking calendar, map) that sets cookies.
    Load it only with your consent? See our
    <a href="/privacy">privacy policy</a>.
  </p>
  <div class="consent__actions">
    <button class="btn btn--ghost" type="button" data-consent="reject">
      No, essentials only
    </button>
    <button class="btn btn--primary" type="button" data-consent="accept">
      Accept embeds
    </button>
  </div>
</div>
<!-- ui.js wires up data-consent-banner automatically -->

Consent-gated embed

For Aoife (Lotus & Lime) — her class scheduler is an embed that sets cookies, so it stays a fast façade until consent is granted, then loads on demand.

The booking calendar loads once you accept cookies for embedded content.