# Raise - Payments & Billing Feature This is an overview of the payments and billing feature throughout the platform in its multiple different states. ## Subscription Management I believe it would be best for users to manage their individual company plans via their Dashboards ("Company" section of the app). ***I recommend that this tab is only viewable to admins/founders as it contains sensitive payment details that could be copied by employees/stakeholders.*** We can do this by simply adding an extra tab which reads "Account & Billing". Here we can display 3 things: - Plan Type (Build, Grow, Scale) - Payment Info (Card Details etc) - Payment History (List of payments by month/year) ### Build <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcS9MXJVxArzni9B0iqo0Kd%2FCompany-Dashboard%3Fnode-id%3D202%253A321" allowfullscreen></iframe> ### Grow <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcS9MXJVxArzni9B0iqo0Kd%2FCompany-Dashboard%3Fnode-id%3D237%253A15090" allowfullscreen></iframe> ### Scale <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcS9MXJVxArzni9B0iqo0Kd%2FCompany-Dashboard%3Fnode-id%3D237%253A15466" allowfullscreen></iframe> ### Modals #### Upgrade Plan This modal will open in different parts of the application, allowing users to select the plan they wish to try. Once selected, the modal will turn into the Payment Details modal below... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcS9MXJVxArzni9B0iqo0Kd%2FCompany-Dashboard%3Fnode-id%3D237%253A14662" allowfullscreen></iframe> #### Payment Details This modal allows users to input their payment details and start paying for their premium account subsciptions. The user can preview the plan they are selecting (at the top), and have the ability to change plan (taking them back to the Upgrade Plan modal)... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FcS9MXJVxArzni9B0iqo0Kd%2FCompany-Dashboard%3Fnode-id%3D237%253A15030" allowfullscreen></iframe> ... ## Top Bar (Company Name) We have decided to include the Company subscription plan in the top bar, as well as an upgrade button to prompt users into upgrading their account (if free). I would suggest using 2 tags: - Free (Build) - Premium (Grow + Scale) Furthermore, perhaps only show the "Upgrade" button for Free users. For companies who have already upgraded, they should already know where to manage their subscription within the application and a button hinting them to upgrade once they are already paying might be annoying for them. <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D298%253A1766" allowfullscreen></iframe> ... ## Dropdown Menu (Manage Companies) The plan type (tag) can also be displayed in the dropdown menu which allows users to switch between different company accounts... <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FKbc4pBtdY9MEVzDxAdSnXN%2FRaise-Design-System%3Fnode-id%3D297%253A1041" allowfullscreen></iframe>