shadcn.io is not affiliated with official shadcn/ui
App Store Receipt Billing Block for Svelte
Move a subscription from App Store billing to direct billing: a table of what you can do where, a three-box checklist, the first direct charge dated to the store renewal, and the monthly difference.
Installation
Overview
Help a subscriber leave store billing without being charged twice, with this app store receipt panel for Svelte with Ark UI. It is the billing page of Stillharbour, a meditation app, whose plan is billed by the App Store today. A hairline frame with a plus mark on each corner opens on a table of what you can do where: change plan, cancel, invoice and refund, with the store in one column beside a two-letter tile and direct billing in the other (a list on a phone). Under it three Checkboxes guard the switch: you cancelled the store subscription, you saved your store receipts, you accept the direct price. A sentence follows the boxes: with the cancel box ticked the first direct charge falls on the day the store would have renewed, so you pay once; without it, it warns that both bill you. The Shine Button is the only colored control and stays quiet until all three boxes are ticked. It's built from a native table, Checkbox, Field, Shine Button and Guides, with a CSS entrance only. For apps moving users from store billing to their own, where the store takes a share.
FAQ
How do I change the prices, the date and the table?
Edit the constants at the top of the file. STORE_CENTS and DIRECT_CENTS are the two monthly prices in cents, STORE_RENEWS is the store's next renewal as an ISO date, WAYS holds the table's rows and STEPS the three boxes. The saving, the charge date and the box text are derived from those.
How does it avoid billing twice?
The first direct charge is dated to the store's renewal, and the sentence under the boxes only says "you pay once" when the cancel box is ticked. A store subscription is cancelled in the store, never by you, so the box is a promise from the customer; in your app confirm it before the first direct charge by checking the store's server notifications or receipt status.
What stays local?
Everything. The button says "Switched to direct billing in this demo. Nothing was cancelled anywhere", and unticking any box takes the demo back. In your app create the direct subscription with your billing provider with a start date equal to the store renewal, and keep the store entitlement until then.
Is the store's brand used?
Only its name in text, with a two-letter tile and no logo or color, which is how the demo refers to any third party. Check the store's current rules on linking to or steering users toward other payment methods in your region before you ship a switch like this.
Is it accessible?
The table has a caption through its heading, column heads and row heads, and phones get a list with the same words. The three boxes are one group with a visible legend, each named by its sentence and described by its note. Pressed early, the button reads the number of open boxes in the status line and moves focus to the first one.