stack/packages/stack-shared
Aman Ganapathy 710c820e6b
[Feat] Add payment methods page to dashboard (#1103)
### 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
2026-01-20 14:33:31 -08:00
..
src [Feat] Add payment methods page to dashboard (#1103) 2026-01-20 14:33:31 -08:00
.eslintrc.cjs tsup for stack-shared (#647) 2025-04-28 21:26:52 -07:00
LICENSE Licenses 2024-02-28 15:27:00 +01:00
package.json chore: update package versions 2026-01-20 11:49:56 -08:00
tsconfig.json Update packages, add bundle analyzer, add declarationMap (#665) 2025-05-16 17:07:44 -07:00
tsup.config.ts Convex README 2025-10-10 04:27:05 -07:00
vitest.config.ts In-source unit tests (#429) 2025-02-14 11:47:52 -08:00