# Account & Billing These are designs relating to a company's account/subscription plan and their ability to up/downgrade + enter and manage their payment details. This part of the Raise application is only viewable for admins of companies, and should show on the left hand side menu of the Raise platform... *It would also be viewable for the onboard@getraise.io account so they can assist companies with their accounts and billing.* ***[Here is a short prototype to get the feel for how it might work...](https://www.figma.com/proto/NwJdWqTE8d9BRIgrzkVuHl/Account-and-Billing?page-id=3%3A3048&node-id=3%3A3049&viewport=1057%2C563%2C0.25&scaling=min-zoom)*** ## States Here are a few of the states included in the Account & Billing page. ### Empty State <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3049" allowfullscreen></iframe> ### Full State <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3121" allowfullscreen></iframe> ... **If Discount is Applied as Default Payment Method** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D539%253A100" allowfullscreen></iframe> ### Mobile <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A2857" allowfullscreen></iframe> --- ## Components & Variables Here are some of the variables involved with the Account & Billing page... **Your Current Plan** Below are the following states and variables for the Current Plan card located at the top of the Account and Billing page. <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%3D850%253A179" allowfullscreen></iframe> ... **Payment Methods** For Desktop, the "Default" badge (indicating the default payment method) will be located on the right next to the Elipsis. For the mobile version, this badge will be located next to the subtext (Expiry Date). <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%3D850%253A972" allowfullscreen></iframe> ... **Payment Type** Here are the three variations of the payment method badges... - Visa - Mastercard - Discount Code <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%3D1295%253A75" allowfullscreen></iframe> ... **Elipsis Dropdown Options** When clicked, the elipsis button will show the following actions... - Edit - Remove - Make Default <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%3D1117%253A10833" allowfullscreen></iframe> ... **Invoice History** Companies should be able to see a list of all invoices from Raise. The column titles would be: - Invoice Number (#) - Amount - Date - Payment Method - Status - Scheduled (Organge badge) - Payed (Green badge) - Failed (Red badge) <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%3D1366%253A27" allowfullscreen></iframe> ... --- ## Modals **Add New Payment Method (Incomplete)** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3242" allowfullscreen></iframe> ... **Add New Payment Method (VISA/Mastercard Full)** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D539%253A1011" allowfullscreen></iframe> ... **Add New Payment Method (Discount Success)** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D539%253A1058" allowfullscreen></iframe> ... **Add New Payment Method (Discount Failure)** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D539%253A0" allowfullscreen></iframe> ... **Upgrade Plan (Desktop Only)** <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%2FNwJdWqTE8d9BRIgrzkVuHl%2FAccount-and-Billing%3Fnode-id%3D3%253A3270" allowfullscreen></iframe>