Payment Success Card — Free HTML CSS JS Snippet

The payment success screen is the emotional peak of a checkout — the user just handed over money and needs unambiguous, satisfying confirmation. Stripe, PayPal, and every payment sheet converge on the same choreography: a checkmark that draws itself, the amount counting up, and a compact receipt beneath. This component implements that full moment in HTML, CSS, and vanilla JavaScript: an SVG circle-and-tick drawn with stroke-dashoffset, a spring-eased card entrance, an ease-out amount counter, a dashed-divider receipt, and a replay control that demonstrates how to restart CSS animations correctly.

Drawing the checkmark with stroke-dashoffset

The badge is a plain SVG — a <circle> and a <polyline> tick — animated with the line-drawing technique. Each shape's stroke-dasharray is set to its own path length (176 for the 28-radius circle, since 2πr ≈ 176; 36 for the tick), and stroke-dashoffset starts at that same value, hiding the stroke entirely. One keyframe animates the offset to 0, "unspooling" the dash along the path. The circle starts at 0.15s and draws over 0.6s from the twelve-o'clock position (a -90deg rotation, since SVG circles start at three o'clock); the tick waits until 0.7s so it snaps in just as the circle completes — the two animation-delays are what make it feel choreographed rather than simultaneous.

The count-up amount

The paid amount animates from $0.00 to the real figure in 900ms using requestAnimationFrame with an ease-out cubic (1 - (1-t)³), so it races through the small numbers and settles gently into the final one — the standard count up treatment. Formatting goes through Intl.NumberFormat on every frame, so separators and decimals are always correct, and tabular-nums stops the card layout jiggling as digit widths change. The counter's 900ms roughly matches the circle-plus-tick timeline, landing both payoffs together.

Restarting CSS animations: the reflow trick

CSS animations run once and will not restart just because you re-apply the same class. The replay button shows the canonical fix: set animation: none inline on the animated elements, force a synchronous reflow by reading offsetWidth (the void expression makes the read's intent explicit), then clear the inline override so the stylesheet animation re-attaches from frame zero. This three-step is worth stealing for any "play it again" control — toast re-entries, form-error shakes, celebration effects.

The receipt block

Details render as a semantic <dl> of label/value rows — reference (in monospace so the ID reads as a code), timestamp, payment method with a VISA chip and masked •••• 4242 digits, and merchant — separated from the amount by a dashed border that quotes physical receipt perforation. Real integrations map these straight off the payment-intent response; the masked-card pattern matches what processors return (brand + last4), so no full numbers ever touch the UI.

Entrance, actions, and reduced motion

The card itself pops in with a scale-and-rise keyframe on an overshooting cubic-bezier(0.34, 1.56, 0.64, 1), the same spring feel as a payment sheet presenting. Two actions close the loop — a ghost Receipt button (wire to your PDF endpoint) and a green Done that demos a redirecting state. A prefers-reduced-motion block collapses every animation to near-instant, so vestibular-sensitive users get the final state immediately without losing the confirmation.

Customisation

Set AMOUNT, currency locale, and the receipt fields from your payment response; swap the green for your brand's success colour (circle, tick, and primary button share it). For extra celebration layer a confetti celebration card burst behind the badge, and pair the flow with the checkout form that precedes it.