mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
710c820e6b
### Summary of Changes We would like to setup a payment settings page. Here, developers should be able to toggle test mode, see their stripe connection status, and adjust the payment method configs. ## Test Mode Toggle This will exist in concert with the test mode banner. ## Stripe Connection Status While users cannot see the page unless they create a stripe account, they can still see it if they've created the stripe connected account but haven't finished onboarding. This is a handy place for them to finish their onboarding. ## Payment Methods We would like developers using our payments feature to be able to set what payment options should be made available to their users. Consequently, we create a route and a page on the dashboard which hits that route to update what payment options are made available. The UI stores "pending changes" which represent updates to be made to the payment method configs corresponding to that project's connected stripe account. These are then sent to the backend, validated with a schema, and then updated using stripe. We also note that some payment methods have dependencies on others: for example, the "apple pay" method cannot be enabled if the "debit/credit cards" method is not enabled. We note the two cases where it is observed to happen and raise an alert using `toast` to make it clear to the developer, and make it extensible in case other dependencies are added in the future. To ensure synchronization between the frontend dashboard UI and the backend route handler on the payment method names, we have both pull from a shared utility file. This ensures only one update will need to be made. **NOTE 1:** We chose to build our own component rather than using the Stripe embedded component as the Stripe component is still in pre-release mode. **NOTE 2:** To disable specific payment methods for all our users, we should update the platform account config in Stripe for stack-auth. This will prevent said payment method from being made available to them. **NOTE 3:** We skip the multi-account method config isolation test because the stripe mock server does not support testing with multiple accounts. However, the logic of the test has been verified with a real stripe account. ### UI Demo For this demo, I had a pre-created checkout link for a one-time purchase of a product for 100$. https://github.com/user-attachments/assets/a0139ee8-a9ce-480c-b8b5-9b5fb1e9c15f |
||
|---|---|---|
| .. | ||
| scripts | ||
| src | ||
| .env | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| components.json | ||
| LICENSE | ||
| next-env.d.ts | ||
| package-template.json | ||
| package.json | ||
| postcss.config.js | ||
| quetzal.config.json | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsup.config.ts | ||
| vitest.config.ts | ||
Stack Auth: Open-source Clerk/Auth0 alternative
📘 Docs | ☁️ Hosted Version | ✨ Demo | 🎮 Discord | GitHub
Stack Auth is a managed user authentication solution. It is developer-friendly and fully open-source (licensed under MIT and AGPL).
Stack Auth gets you started in just five minutes, after which you'll be ready to use all of its features as you grow your project. Our managed service is completely optional and you can export your user data and self-host, for free, at any time.
We support Next.js frontends, along with any backend that can use our REST API. Check out our setup guide to get started.
📦 Installation & Setup
- Run Stack Auth's installation wizard with the following command:
npx @stackframe/init-stack@latest - Then, create an account on the Stack Auth dashboard, create a new project with an API key, and copy its environment variables into the .env.local file of your Next.js project:
NEXT_PUBLIC_STACK_PROJECT_ID=<your-project-id> NEXT_PUBLIC_STACK_PUBLISHABLE_CLIENT_KEY=<your-publishable-client-key> STACK_SECRET_SERVER_KEY=<your-secret-server-key> - That's it! You can run your app with
npm run devand go to http://localhost:3000/handler/signup to see the sign-up page. You can also check out the account settings page at http://localhost:3000/handler/account-settings.
Check out the documentation for a more detailed guide.