[Docs]- Added Payments docs and code examples#1068
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Older cmux preview screenshots (latest comment is below)Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
|
Warning Rate limit exceeded@madster456 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 3 minutes and 44 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds a new payments examples collection and Payments guide, merges the examples into the examples index, and updates docs navigation. Changes are documentation and example assets only; no public API or runtime code modifications. (48 words) Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Greptile OverviewGreptile SummaryAdded comprehensive payments documentation and code examples across multiple frameworks (Next.js, React, Django, FastAPI, Flask, Express, Node.js). The documentation covers Stripe integration, checkout URLs, item management, product listings, and credit consumption. Key Changes:
Issues Found:
Confidence Score: 4/5
Important Files ChangedFile Analysis
Sequence DiagramsequenceDiagram
participant User as User/Browser
participant App as Application
participant SDK as Stack SDK
participant API as Stack Auth API
participant Stripe as Stripe
Note over User,Stripe: Creating Checkout Session
User->>App: Click purchase button
App->>SDK: user.createCheckoutUrl({productId, returnUrl})
SDK->>API: POST /payments/purchases/create-purchase-url
API->>Stripe: Create checkout session
Stripe-->>API: Session URL
API-->>SDK: Checkout URL
SDK-->>App: Checkout URL
App->>User: Redirect to Stripe checkout
User->>Stripe: Complete payment
Stripe->>API: Webhook: payment succeeded
API->>API: Grant product & items to user
Stripe->>User: Redirect to returnUrl
Note over User,API: Consuming Credits (Server-side)
User->>App: Perform action requiring credits
App->>SDK: credits.tryDecreaseQuantity(amount)
SDK->>API: POST /payments/items/.../update-quantity
API->>API: Atomic check & decrease
alt Sufficient credits
API-->>SDK: Success (200)
SDK-->>App: true
App->>App: Perform action
App->>User: Success response
else Insufficient credits
API-->>SDK: Error (400)
SDK-->>App: false
App->>User: Insufficient credits error
end
Note over User,API: Real-time Item Tracking
User->>App: View credits page
App->>SDK: user.useItem("credits")
SDK->>API: GET /payments/items/user/{userId}/{itemId}
API-->>SDK: Item data {quantity, displayName}
SDK-->>App: Item object
App->>User: Display credits: {nonNegativeQuantity}
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/code-examples/payments.ts (1)
617-700: Clarify remaining balance calculation aftertryDecreaseQuantityIn the
consume-credits-serverexamples you compute the remaining balance ascredits.quantity - amountafter callingawait credits.tryDecreaseQuantity(amount).Whether this is correct depends on
ServerItemsemantics:
- If
tryDecreaseQuantitymutatescredits.quantity, this subtraction would under-report the remaining balance.- If it does not mutate the instance, this happens to match the new quantity but may still be confusing to readers.
To avoid ambiguity in docs, consider either:
- Returning the authoritative field from the updated item (e.g.
nonNegativeQuantityif it’s guaranteed to be updated), or- Explicitly documenting that
credits.quantityis not mutated and that subtractingamountis only for illustration.Right now the example leaves the behavior unclear for readers implementing this pattern.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/code-examples/index.ts(1 hunks)docs/code-examples/payments.ts(1 hunks)docs/content/docs/(guides)/apps/payments.mdx(1 hunks)docs/content/docs/(guides)/meta.json(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Always add new E2E tests when changing the API or SDK interface
For blocking alerts and errors, never use toast; use alerts instead as they are less easily missed by the user
NEVER try-catch-all, NEVER void a promise, and NEVER .catch(console.error); use loading indicators and async callbacks instead, or use runAsynchronously/runAsynchronouslyWithAlert for error handling
Use ES6 maps instead of records wherever you can
Files:
docs/code-examples/payments.tsdocs/code-examples/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,css}: Keep hover/click transitions snappy and fast; avoid fade-in delays on hover. Apply transitions after action completion instead, like smooth fade-out when hover ends
Use hover-exit transitions instead of hover-enter transitions; for example, use 'transition-colors hover:transition-none' instead of fade-in on hover
Files:
docs/code-examples/payments.tsdocs/code-examples/index.ts
{.env*,**/*.{ts,tsx,js}}
📄 CodeRabbit inference engine (AGENTS.md)
Prefix environment variables with STACK_ (or NEXT_PUBLIC_STACK_ if public) so changes are picked up by Turborepo and improves readability
Files:
docs/code-examples/payments.tsdocs/code-examples/index.ts
🧬 Code graph analysis (2)
docs/code-examples/payments.ts (1)
docs/lib/code-examples.ts (1)
CodeExample(15-22)
docs/code-examples/index.ts (3)
docs/lib/code-examples.ts (1)
CodeExample(15-22)docs/code-examples/api-keys.ts (1)
apiKeysExamples(3-1351)docs/code-examples/payments.ts (1)
paymentsExamples(3-1017)
🪛 LanguageTool
docs/content/docs/(guides)/apps/payments.mdx
[uncategorized] ~190-~190: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ...ways validate credit consumption on the server side 2. Use tryDecreaseQuantity: This ...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (12)
- GitHub Check: build (22.x)
- GitHub Check: E2E Tests (Node 22.x, Freestyle prod)
- GitHub Check: E2E Tests (Node 22.x, Freestyle mock)
- GitHub Check: check_prisma_migrations (22.x)
- GitHub Check: build (22.x)
- GitHub Check: restart-dev-and-test-with-custom-base-port
- GitHub Check: all-good
- GitHub Check: restart-dev-and-test
- GitHub Check: lint_and_build (latest)
- GitHub Check: setup-tests-with-custom-base-port
- GitHub Check: docker
- GitHub Check: setup-tests
🔇 Additional comments (5)
docs/code-examples/payments.ts (1)
1-3: Overall examples structure and wiring look correct
paymentsExamplesusespaymentsas the subsection key and groups examples under names that match the<PlatformCodeblock document="apps/payments" examples={...} />usage inpayments.mdx. Arrays are consistently cast toCodeExample[], so the shape aligns withallExamplesandCodeExample. No structural issues here.Also applies to: 228-229, 915-1016
docs/content/docs/(guides)/meta.json (1)
14-23: Navigation entry for Payments is consistentAdding
"apps/payments"under the Apps section matches the newapps/payments.mdxguide and follows the existing pattern used by other apps (e.g.,apps/api-keys). Looks good.docs/code-examples/index.ts (1)
3-4: Apps examples merge correctly include PaymentsSpreading
paymentsExamplesinto the'apps'section alongsideapiKeysExamplesensures thatapps/paymentsdocument paths resolve viagetExample/getDocumentExampleswithout changing their call sites. This is a straightforward extension of the existing pattern and looks correct, assuming subsection keys inapiKeysExamplesandpaymentsExamplesremain distinct.Also applies to: 6-12
docs/content/docs/(guides)/apps/payments.mdx (2)
50-121: Guide correctly references Payments code examplesThe
<PlatformCodeblock>usages withdocument="apps/payments"and example names ("create-checkout-url","team-checkout-url","get-item","use-item","consume-credits-server","list-products","grant-product-server") line up with the keys defined inpaymentsExamples. The guide and examples are well-aligned.
188-193: Minor wording tweak: “server-side” as a compound adjectiveIn “Always validate credit consumption on the server side”, consider hyphenating “server-side” since it’s used as a compound adjective (“server-side validation”) rather than a noun phrase.
Suggested edit:
-1. **Validate on Server**: Always validate credit consumption on the server side +1. **Validate on Server**: Always validate credit consumption on the server-sideLikely an incorrect or invalid review comment.
Older cmux preview screenshots (latest comment is below)Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
Older cmux preview screenshots (latest comment is below)Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
Older cmux preview screenshots (latest comment is below)Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
docs/code-examples/index.ts (1)
9-9: Consider adding a merge validation helper to prevent future key collisions.The spread operator
{...apiKeysExamples, ...paymentsExamples}currently works safely sinceapiKeysExamplescontains'api-keys'andpaymentsExamplescontains'payments'with no overlapping keys. However, this approach has no runtime safeguard against accidental collisions if future sections are added. A simple merge helper would catch such issues early:+function mergeExamples(...sources: Record<string, any>[]) { + const merged: Record<string, any> = {}; + for (const source of sources) { + for (const key of Object.keys(source)) { + if (key in merged) { + throw new Error(`Duplicate key '${key}' found when merging examples`); + } + merged[key] = source[key]; + } + } + return merged; +} + const allExamples: Record<string, Record<string, Record<string, CodeExample[]>>> = { 'setup': setupExamples, - 'apps': {...apiKeysExamples, ...paymentsExamples }, + 'apps': mergeExamples(apiKeysExamples, paymentsExamples), 'getting-started': viteExamples,
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/code-examples/index.tsdocs/content/docs/(guides)/meta.json
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/content/docs/(guides)/meta.json
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Always add new E2E tests when changing the API or SDK interface
For blocking alerts and errors, never use toast; use alerts instead as they are less easily missed by the user
NEVER try-catch-all, NEVER void a promise, and NEVER .catch(console.error); use loading indicators and async callbacks instead, or use runAsynchronously/runAsynchronouslyWithAlert for error handling
Use ES6 maps instead of records wherever you can
Files:
docs/code-examples/index.ts
**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,css}: Keep hover/click transitions snappy and fast; avoid fade-in delays on hover. Apply transitions after action completion instead, like smooth fade-out when hover ends
Use hover-exit transitions instead of hover-enter transitions; for example, use 'transition-colors hover:transition-none' instead of fade-in on hover
Files:
docs/code-examples/index.ts
{.env*,**/*.{ts,tsx,js}}
📄 CodeRabbit inference engine (AGENTS.md)
Prefix environment variables with STACK_ (or NEXT_PUBLIC_STACK_ if public) so changes are picked up by Turborepo and improves readability
Files:
docs/code-examples/index.ts
🧬 Code graph analysis (1)
docs/code-examples/index.ts (3)
docs/lib/code-examples.ts (1)
CodeExample(15-23)docs/code-examples/api-keys.ts (1)
apiKeysExamples(3-1351)docs/code-examples/payments.ts (1)
paymentsExamples(3-1017)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (13)
- GitHub Check: Vercel Agent Review
- GitHub Check: E2E Tests (Node 22.x, Freestyle prod)
- GitHub Check: E2E Tests (Node 22.x, Freestyle mock)
- GitHub Check: restart-dev-and-test-with-custom-base-port
- GitHub Check: setup-tests
- GitHub Check: lint_and_build (latest)
- GitHub Check: setup-tests-with-custom-base-port
- GitHub Check: build (22.x)
- GitHub Check: restart-dev-and-test
- GitHub Check: check_prisma_migrations (22.x)
- GitHub Check: docker
- GitHub Check: build (22.x)
- GitHub Check: all-good
🔇 Additional comments (1)
docs/code-examples/index.ts (1)
3-3: LGTM!The import follows the established pattern and is correctly structured.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Preview Screenshots⏳ Preview screenshots are being captured... Workspace and dev browser links will appear here once the preview environment is ready. Generated by cmux preview system |
2 participants
Adds payment docs and code examples to docs.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.