Stripe frontend mockup

[sammybigbux]

• [ ] Build mockup of user profile page with name and some options:
• [ ] Past orders
• [ ] Link to "my products"
• [ ] Payment information
• [ ] Money left (plus cost of adding more, option to add more)

[sammybigbux]

From the UX requirements:

2. A user profile page should contain all functionality relating to payment. So it should allow the user to: a. Log out (which means log out button on the top toolbar can be removed) b. Check payment information, which should show the card that is saved via stripe (last 4 digits of the card and type like Visa, Mastercard, etc is the data we get from Stripe). c. Check past orders, this should show the date and product that was purchased (kind of like past orders on amazon) i. For these past orders there should be an option to request refund, or report an issue. d. Check how much money is left over. i. Since part of our pricing model is pay-as-you-go we need some visualization of how much money is leftover ii. Should contain the option to top-up payment (this will take them to a 3rd party Stripe page)
3. Once you click the top up payment button, it should prompt you for an amount of money
4. Once you submit that amount of money, then it will navigate to Stripe page iii. Should be some estimate of number of “questions” left alongside the amount of money left. iv. Visual element in the chat page when the amount of money gets to zero, and a warning element when it nears 0.
5. Once it’s locked, should be a prompt to go to the payment page e. For some inspiration, open ai has a similar pay-as-you-go model for their api, here is a link to the interface: https://platform.openai.com/settings/organization/billing/overview