Storing Payment Status of Customer on the frontend
[NextJs 15] - What's the go-to/best practice approach to storing and accessing the payment status of a customer across all components in the frontend? Local storage? Global State like Zustand ? React context? React Query? I'm already using the status on a server component but I need the status on an unrelated client component
7 Replies
Depending on how secure you want your application to be, you can send a validation request to the server. I usually save it on the context. If you are ok with possibility of users seeing some paid components if they tamper with local storage, you can use local storage. Just make sure actual paid content and requests are verified with every request (https-only cookies are a good way). Otherwise, you can fetch the paid status in the context everytime the app starts.
When you say everytime the app starts, do you mean on every page refresh / navigation which would clear the context?
If you do this, you take a responsibility that you don't want to have unless you have good lawyers lined up, and enough cash to be able to refund money for any damages you would have created.
Best way is to let the Browser (native functionality) to store this data, like autofill etc aka you don't touch this data at all, you only retrieve or ask for "autofill" and the user just tells firefox or chrome to autofill it.
I'm not referring to storing any sensitive payment details here like card number etc. I am referring to storing whether the user has paid for the product or not ( which I store in my database ) - the question is how do I make this boolean flag available throughout the frontend
Mabe using https://dexie.org/ to sync the backend with the frontend and then have some sort of caching?
Dexie.js - Minimalistic IndexedDB Wrapper
The easiest way to use IndexedDB. A lightweight, minimalistic wrapper that provides a straightforward API for developers using IndexedDB.
hm, I'm already using postgres so I don't think this works for me
Ideally just looking for some practice/pattern in NextJs/browser like react context / zustand
Yeah, react context is not persisted across refreshes and page page navigation, and yeah that’s what I meant everytime the app starts.