Billing App Store Receipt
A receipt card for mobile in-app subscriptions bought through the App Store or Google Play, meant to sit alongside a web billing history so a user can see everything they're charged for in one place. Shows the product, price, purchase and renewal dates, an optional Family Sharing note, and the transaction ID, with a link out to the store's own subscription management screen since neither Apple nor Google let you cancel from a web page.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-app-store-receipt.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing21.tsx instead.
Usage
The file also exports billing21Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing21, billing21Demo } from "@/components/blocks/billing/billing21"; export default function Page() { return <Billing21 {...billing21Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| store | "app-store" | "google-play" | none | Which store issued the receipt. Controls the header icon and label, and the store name used in the manage-subscription copy. |
| productName | string | none | Name of the purchased product or plan. |
| planLabel | string | none | Optional line under the product name, e.g. "Auto-renewing subscription". |
| price | string | none | Formatted price as charged by the store, shown as-is. |
| purchaseDate | string | none | Formatted original purchase date. |
| renewalDate | string | none | Formatted next renewal date, omitted from the receipt if not passed. |
| status | "active" | "canceled" | "expired" | "active" | Drives the status badge in the header. |
| transactionId | string | none | Store transaction identifier, shown in monospace. |
| familySharing | boolean | false | When true, shows a small Family Sharing note under the product name. |
| manageHref | string | none | Deep link to the store's subscription management page. The manage button and its footnote are omitted entirely if not set. |
| className | string | none | Extra classes for the outer card. |
Behavior notes
- The store icon and label are derived internally from the store prop through a lookup table, there is no icon prop to pass in.
- The manage button and the footnote below it only render when manageHref is provided, so a receipt with no store deep link just omits that whole footer section.
- The footnote text always states that the subscription can only be canceled from the purchasing device, since that's a hard platform rule from Apple and Google, not something a caller can configure away.
- The Family Sharing note is a plain boolean flag with static copy, it doesn't read anything from a receipt-validation payload itself, that mapping happens on your backend.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.