Add Stripe subscription integration for paid storage upgrades#5810
Add Stripe subscription integration for paid storage upgrades#5810rtibbles wants to merge 1 commit intolearningequality:unstablefrom
Conversation
rtibbles
force-pushed
the
payment_processing
branch
4 times, most recently
from
e42f75e to
d8ea559
Compare
|
So far preliminary testing is looking good. A few suggestions, although only one is blocking (and I have not done much code review, just doing a bit of manual QA for happy paths) Blocking: The default 10 is the only number that works. I'm guessing there is a mismatch on the data type. manually entering any number (including 10) or using the increments doesn't work. 
Not blocking: a nice UI improvement would be some small adjustment from "(x10)"/ "Quantity: 10" to (10GB) or something like that 
Not blocking: If you have cancelled your subscription, but it hasn't yet expired, it still shows as active. It would be nice to include some slightly adjusted wording here like. "Your subscription will expire on [date]" if it's been cancelled. 
Out of scope of this PR but should do: update all stripe branding assets to current 
Question: if someone has 10 GB worth of storage and they cancel their subscription, what happens on the day after they stop paying for storage? (I am okay with "we will cross that bridge when we come to it" as a response for now. but. just wanted to ask so we can decide intentionally) |
Users can purchase additional storage (1-50 GB at $15/GB/year) via Stripe Checkout, manage subscriptions through the Customer Portal, and see their subscription status on the Storage settings page. Environment-gated configuration ensures non-production deployments use Stripe test/sandbox keys automatically. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rtibbles
force-pushed
the
payment_processing
branch
from
d8ea559 to
bee8581
Compare
marcellamaki
left a comment
marcellamaki
left a comment
There was a problem hiding this comment.
blocking (and impactful non-blocking) feedback resolved, and code is very readable/standard. i did not go over it with a super fine toothed comb but overall: readable, uses KComponents not vuetify, composables -- all good.
| fetchSubscriptionStatus, | ||
| createCheckoutSession, | ||
| createPortalSession, | ||
| } = useSubscription(); |
| </KButton> | ||
| </div> | ||
|
|
||
| <Banner |
There was a problem hiding this comment.
Would you please use non-Vuetify replacement StudioBanner?
Note that there will be a visual difference compared to Banner ~ it's intentional.
| :style="{ backgroundColor: $themePalette.grey.v_100 }" | ||
| > | ||
| <div | ||
| v-if="loading" |
There was a problem hiding this comment.
For new loaders, could you use v-if="show('loader', loading, 400)" to align with https://design-system.learningequality.org/loaders#minimum-visible-time?
(old loaders in Studio don't have this, and some newer loaders use wrong value, but 400 is closest to the expected experience ~ we recently fine-tuned with Tomiwa)
There was a problem hiding this comment.
Here's an example which also has transition applied https://design-system.learningequality.org/usekshow#example
| @click="handleUpgradeClick" | ||
| > | ||
| <span class="upgrade-btn-content"> | ||
| <KCircularLoader |
There was a problem hiding this comment.
https://github.com/learningequality/studio/pull/5810/changes#r3038962811
(not 100% sure, if I recall there may animation glitch if show applied directly on the loader component, so if you observe that ~ disableDefaultTransition on KCircularLoader should help, or maybe also applying show on the wrapping div / span)
3 participants
Summary
Adds Stripe subscription integration allowing users to purchase additional storage (1–50 GB at $15/GB/year). Uses Stripe Checkout Sessions for payment, Customer Portal for self-service management, and webhooks for lifecycle sync. Storage is additive to admin-granted quotas.
Environment-gated configuration (
BRANCH_ENVIRONMENT) ensures non-production deployments automatically use Stripe sandbox keys — no risk of processing real payments on QA/staging.Includes documentation at
docs/stripe_integration.mdcovering setup, Stripe Dashboard configuration, and local dev workflow withmake devserver-stripe.stripe-upgrade-demo.webm
Reviewer guidance
Testing
STRIPE_TEST_SECRET_KEY,STRIPE_TEST_PRICE_IDenv varsmake devserver-stripeto start the dev server with webhook forwarding4242 4242 4242 4242Risky areas
contentcuration/views/subscription.py— webhook handlers: verify idempotency and thatcustomer.subscription.updatedcorrectly syncs quantity after checkoutcontentcuration/migrations/0166_add_usersubscription.py— new table, review schemacontentcuration/frontend/shared/mixins.js—bytesForHumansnow shows 1 decimal for GB, 2 for TB instead of integers; affects all file size displays at GB+ scaleAI usage
Used Claude Code throughout. Reviewed Stripe best practices via their published AI skill, iterated on the implementation against those guidelines, and verified the UI in-browser using Playwright. Manually tested the full checkout, cancellation, and webhook flows against a Stripe sandbox.