shadcn.io is not affiliated with official shadcn/ui
Free Trial Checkout Block for Svelte
A charting tool's trial start: 14 days with no card or 30 days with one, a ledger of start, end and first charge worked out from a fixed date, a held card form, and a reminder switch.
Installation
Overview
Let people choose how they start a trial, with this trial form for Svelte with Ark UI. A compact header holds the title and one sentence from Knapweed, a charting tool that draws from spreadsheets. Inside a hairline frame with a plus mark on each corner, two choice cards differ in one thing: "14 days, no card" asks for nothing, and "30 days, add a card" gives sixteen more days and says plainly that nothing is charged today and that the first charge falls on the day the trial ends. Beside them (under them on a phone) is a ledger that follows the choice, with the start, the end, the first charge and the reminder, all worked out from a fixed date, and under it the place the card goes: choosing the longer trial reveals the card fields in a space that is already held, so the foot never moves. The card is one joined control with a brand from the first digits, the number grouped as you type, a Luhn check and an expiry checked against a fixed month. A Switch asks for a reminder three days before the end. Start my trial is the only Shine Button and its label follows the choice. For software, memberships and any trial that can trade a card for time.
FAQ
How are the dates worked out?
From one fixed date, AS_OF (Wednesday 14 October 2026), so the page reads the same on the server and in every time zone. A trial of n days ends n days after it, 14 days is Wed 28 Oct and 30 days is Fri 13 Nov; the first charge, only with a card, is on the day it ends, and the reminder is three days before that. Nothing reads the clock, and the dates are written without Intl.
What does the card form check, and is it safe to ship?
It formats the number as you type (4-4-4-4, or 4-6-5 for Amex), names the brand from the first digits, runs the Luhn check and compares the expiry with a fixed month, and a press with problems names each one and moves focus to the first. It is a pattern, not a payment form: a real page never lets card digits reach its own code, and uses the fields your payment provider hosts, with the real tokens cc-number, cc-exp, cc-csc and cc-name as autocomplete. Autocomplete is off here so a browser never offers a real card to a demo. The test number 4242 4242 4242 4242 passes with any future expiry; 4000 0000 0000 0002 is the demo's decline.
Why doesn't the foot move when I choose?
The three things the card area can show (a sentence for the trial with no card, the card fields, and the card kept) sit in the same grid cell, and the two that aren't showing are invisible, inert and hidden from assistive technology, so the cell is always as tall as the card fields. Choosing a trial changes only what is visible in it.
What happens to the card after Start?
A short wait (the button keeps its size), then only the brand and the last four stay in this tab's memory: the area shows "Visa ending 4242" and every digit is wiped. A second button, Use another card, brings the fields back. Choosing the shorter trial afterwards keeps the card in memory but unused, and the ledger says there is nothing to charge.
Is it accessible from the keyboard?
Yes. The choices are native radios in a labelled group, so Tab enters them and the arrow keys move between them; the card number, expiry and CVC are three named inputs in one bordered group with one focus ring, a complete part moves focus to the next and Backspace in an empty part moves back; the switch is named by its text. One polite status message in the foot reports each result. The switch is controlled with checked and onCheckedChange.
What stays local in the demo, and how do I wire it up?
Everything. Start my trial says that the trial started in this demo and that nothing was charged; the reminder is only a flag in the block's state and no email is sent. In your app create the trial with your billing provider, collect the card with its hosted fields and attach the token (never digits), schedule the reminder on your server from the end date, and take the length and the price from your plan.