Student & Nonprofit Discount Card — Free HTML CSS JS Snippet

Student and nonprofit discounts are structurally different from a generic promo code: they require proving eligibility, not just knowing a string. Applying a coupon code is instant and self-serve; a student or nonprofit discount typically routes through a third-party eligibility-verification service (SheerID and similar providers are common in production) that checks a .edu email, an enrollment record, or a nonprofit registry before the discount actually activates. This snippet models that distinction directly in the UI instead of collapsing it into a generic "have a code?" input.

A discount that's genuinely computed

The full price, discount percentage, discounted price, and annual savings are not four separately hand-typed numbers that happen to agree — only FULL_PRICE and DISCOUNT_PCT are set directly; everything else is derived: discountedPrice = FULL_PRICE * (1 - DISCOUNT_PCT / 100) and annualSavings = (FULL_PRICE - discountedPrice) * 12. At \$20/month and 60% off, that's \$8/month and \$144/year in savings — change either constant and every displayed figure recalculates consistently, which is exactly the property you want when the same discount logic might later drive a real checkout total.

The verification notice sits above the CTA, not after it

Rather than let a visitor assume the discount applies the moment they click "Subscribe," the .sdc-verify block states plainly, before any button is pressed, that eligibility is confirmed by a verification partner before the discount activates. Setting that expectation early avoids the frustrating pattern of a visitor completing checkout only to discover afterward that a follow-up verification step stands between them and the price they thought they'd locked in.

A distinct flow, not a coupon input

Clicking the CTA doesn't reveal a text field for a code — it reveals two identity options ("I'm a student" / "I work at a nonprofit"), because the two paths verify against different data sources in a real implementation (an academic email or enrollment record versus a nonprofit registry lookup). This is deliberately modeled apart from a coupon card or promo code input, which apply immediately against a known code with no external verification step.

A mocked hand-off that mirrors the real one

The setTimeout after picking a verification type stands in for a real redirect to a verification provider, which returns control to your app via a webhook or redirect once eligibility is confirmed — that's why the completed state explicitly says "We'll email you within 1 business day" rather than "You're now on the discounted plan," since real verification is rarely instant.

Customizing it

Swap in your real full price and discount percentage — the computed fields update automatically — and replace the mocked setTimeout with an actual redirect to your verification provider's hosted flow, resuming this component's completed state once their webhook confirms eligibility.