feat(astro): Add billing store

[dstaley]

Description

This PR adds a $billingStore export to our Astro SDK allowing access to the Clerk.billing object in Astro components. It also adds an integration tests confirming the functionality.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• New Features
  • Added a client-side billing store in the Astro integration to access billing functionality.
  • Added a billing demo page that displays available plans using the billing store.
• Tests
  • Added an end-to-end test that verifies billing plans render correctly in the Astro demo.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 2, 2026 6:59pm

[changeset-bot]

🦋 Changeset detected

Latest commit: d0865c0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dstaley]

!snapshot

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7732

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7732

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7732

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7732

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7732

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7732

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7732

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7732

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7732

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7732

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7732

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7732

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7732

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7732

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7732

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7732

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7732

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7732

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7732

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7732

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7732

commit: d0865c0

[clerk-cookie]

Hey @dstaley - the snapshot version command generated the following package versions:

Package	Version
@clerk/agent-toolkit	0.2.9-snapshot.v20260202172719
@clerk/astro	3.0.0-snapshot.v20260202172719
@clerk/backend	3.0.0-snapshot.v20260202172719
@clerk/chrome-extension	3.0.0-snapshot.v20260202172719
@clerk/clerk-js	6.0.0-snapshot.v20260202172719
@clerk/dev-cli	1.0.0-snapshot.v20260202172719
@clerk/expo	3.0.0-snapshot.v20260202172719
@clerk/expo-passkeys	1.0.0-snapshot.v20260202172719
@clerk/express	2.0.0-snapshot.v20260202172719
@clerk/fastify	2.7.0-snapshot.v20260202172719
@clerk/localizations	4.0.0-snapshot.v20260202172719
@clerk/msw	0.0.1-snapshot.v20260202172719
@clerk/nextjs	7.0.0-snapshot.v20260202172719
@clerk/nuxt	2.0.0-snapshot.v20260202172719
@clerk/react	6.0.0-snapshot.v20260202172719
@clerk/react-router	3.0.0-snapshot.v20260202172719
@clerk/shared	4.0.0-snapshot.v20260202172719
@clerk/tanstack-react-start	1.0.0-snapshot.v20260202172719
@clerk/testing	2.0.0-snapshot.v20260202172719
@clerk/ui	1.0.0-snapshot.v20260202172719
@clerk/upgrade	2.0.0-snapshot.v20260202172719
@clerk/vue	2.0.0-snapshot.v20260202172719

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/[email protected] --save-exact

@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/dev-cli

npm i @clerk/[email protected] --save-exact

@clerk/expo

npm i @clerk/[email protected] --save-exact

@clerk/expo-passkeys

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

@clerk/localizations

npm i @clerk/[email protected] --save-exact

@clerk/msw

npm i @clerk/[email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/nuxt

npm i @clerk/[email protected] --save-exact

@clerk/react

npm i @clerk/[email protected] --save-exact

@clerk/react-router

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-react-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

@clerk/upgrade

npm i @clerk/[email protected] --save-exact

@clerk/vue

npm i @clerk/[email protected] --save-exact

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds billing support to the Astro integration: it adds a changeset for @clerk/astro, exports a new client-side store $billingStore (computed from $clerk and exposing clerk?.billing) in packages/astro/src/stores/external.ts, adds an example page at integration/templates/astro-node/src/pages/billing/billing-store.astro that registers a <pricing-table> element using the store, and includes a Playwright test integration/tests/astro/billingStore.test.ts that verifies rendered billing plans.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(astro): Add billing store' is directly related to the main change, which introduces a new billing store export for the Astro package.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@integration/templates/astro-node/src/pages/billing/billing-store.astro`:
- Around line 19-21: The connectedCallback passes the instance method render
directly to $billingStore.subscribe which loses the component's this binding;
change connectedCallback to subscribe with a bound callback (e.g.,
this.render.bind(this)) or wrap it in an arrow function (() => this.render()) so
that render's this refers to the component instance (update the
connectedCallback and ensure any unsubscribe uses the same bound reference if
stored); refer to connectedCallback, render, and $billingStore.subscribe to
locate the fix.
- Around line 26-36: The template literal assigned to this.innerHTML uses
plans.map(...) which will be stringified with commas between items; update the
template to join the mapped strings (use plans.map(...).join('')) so the
generated divs are concatenated without commas—locate the plans.map(...) inside
the innerHTML template and append .join('') to it.

[wobsoriano]

🙏