Skip to content

Commit de9d2c3

Browse files
Billing flow revamp (#2130)
* Add new icons in project settings page * Add icon for Variables * Update documentation for Profile > Billing * Add documentation for Settings > Plans * Add new icons in Profile settings page + some improvements * Update/add documentation about Invoices * Add comments to update screenshots at the end of the project * Change Usage & Billing name everywhere + start documenting seats management * Document seats management * Create + Use snippet for invoices statuses info * Update TOC badges * Fix typos and errors after reviews * Update & add screenshots --------- Co-authored-by: Pierre Wizla <[email protected]>
1 parent 0acfa51 commit de9d2c3

38 files changed

+220
-102
lines changed

Diff for: docusaurus/docs/cloud/account/account-billing.md

+40-47
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
---
2-
title: Account billing details
2+
title: Account billing & invoices
33
displayed_sidebar: cloudSidebar
4-
description: Manage billing details for Strapi Cloud account.
4+
description: Manage billing details and invoices for Strapi Cloud account.
55
canonicalUrl: https://docs.strapi.io/cloud/account/account-billing.html
66
---
77

8-
# Account billing details
8+
import InvoiceStatus from '/docs/snippets/invoices-statuses.md'
99

10-
Through the *Profile* page, accessible by clicking on your profile picture on the top right hand corner of the interface then clicking on **Profile**, you can access the *Billing* tab.
10+
# Account billing & invoices
1111

12-
The *Billing* tab displays and enables you to modify the billing details and payment method set for the account. This information will by default be reused for every new project created with your Strapi Cloud account.
12+
Through the *Profile* page, accessible by clicking on your profile picture on the top right hand corner of the interface then clicking on **Profile**, you can access the [![Billing icon](/img/assets/icons/CreditCard.svg) *Billing*](#account-billing) and [![Invoices icon](/img/assets/icons/Invoice.svg) *Invoices*](#account-invoices) tabs.
1313

14-
:::note
15-
The Payment method section can only be accessible once the mandatory fields of the Billing details section have been filled in.
16-
:::
14+
## Account billing
15+
16+
The ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab displays and enables you to modify the billing details and payment method set for the account.
1717

1818
<ThemedImage
1919
alt="Billing tab of Profile page"
@@ -23,57 +23,50 @@ The Payment method section can only be accessible once the mandatory fields of t
2323
}}
2424
/>
2525

26-
## Managing subscriptions
26+
The *Payment method* section of the ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab allows you to manage the credit cards that can be used for the Strapi Cloud projects. The *Billing details* section requires to be filled in, at least for the mandatory fields, as this information will be the default billing details for all Strapi Cloud projects related to your account.
2727

28-
Using the **Manage subscriptions** button in the *Billing* tab, you can:
28+
### Adding a new credit card
2929

30-
- view and edit your subscriptions by clicking on the active subscription(s) tile(s): change project name, update shipping details, [edit current subscription](#edit-subscription) and [cancel current subscription](#cancel-subscription),
31-
- view and edit your Account Information: email, password and company name,
32-
- view and edit your Billing & Shipping Addresses,
33-
- view and edit your Payment Methods and add new ones,
34-
- access your Billing History and download your invoices.
30+
1. In the *Payment method* section of the ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab, click on the **Add card** button.
31+
2. Fill in the following fields:
3532

36-
<ThemedImage
37-
alt="Subscriptions management modal"
38-
sources={{
39-
light: '/img/assets/cloud/manage-subscriptions.png',
40-
dark: '/img/assets/cloud/manage-subscriptions_DARK.png',
41-
}}
42-
/>
43-
44-
## Edit subscription
33+
| Field name | Description |
34+
| --- | --- |
35+
| Card Number | Write the number of the credit card to add as payment method. |
36+
| Expires | Write the expiration date of the credit card. |
37+
| CVC | Write the 3-numbers code displayed at the back of the credit card. |
4538

46-
From the subscription management modal, you can view and modify any current subscription. This includes upgrading or downgrading to another plan.
39+
3. Click on the **Save** button.
4740

48-
:::caution
49-
If you choose to downgrade to another plan but your current usage exceeds the limits of that plan, you are taking the risk of getting charged for the overages. Not also that you may lose access to some features: for example, downgrading to the Developer plan which doesn't include the Backups feature, would make you lose all your project's backups. Please refer to [Usage & Billing](/cloud/getting-started/usage-billing) for more information.
41+
:::tip
42+
The first credit card to be added as payment method for the account will by default be the primary one. It is however possible to define another credit card as primary by clicking on the ![Menu icon](/img/assets/icons/more.svg) icon, then **Switch as primary**.
5043
:::
5144

52-
<ThemedImage
53-
alt="Subscription edition modal"
54-
sources={{
55-
light: '/img/assets/cloud/edit-subscription-modal.png',
56-
dark: '/img/assets/cloud/edit-subscription-modal_DARK.png',
57-
}}
58-
/>
45+
### Deleting a credit card
46+
47+
To remove a credit card from the list of payment methods for the account:
48+
49+
1. Click on the ![Menu icon](/img/assets/icons/more.svg) icon of the credit card you wish to delete.
50+
2. Click **Remove card**. The card is immediately deleted.
5951

60-
1. Click on an active subscription tile (e.g. "Strapi Cloud Pro $99.00" located above the subscriptions management links such as _Account Information_, _Billing & Shipping Addresses_). You will be redirected to your subscription details.
61-
2. Click on the **Edit Subscription** link.
62-
3. If you only want to add addons (e.g. additional seats), click on the **Add Addons** button.
63-
4. If you want to change plan, whether it is a plan upgrade or a downgrade (e.g. from Pro plan to Team plan, or from Pro plan to Developer plan), click on **Change** and select a new plan.
64-
5. Confirm your modifications by clicking on the **Update Subscription** button at the bottom of the modal.
52+
:::note
53+
You cannot delete the primary card as at least one credit card must be available as payment method, and the primary card is by default that one. If the credit card you wish to delete is currently the primary card, you must first define another credit card as primary, then delete it.
54+
:::
6555

66-
## Cancel subscription
56+
## Account invoices
57+
58+
The ![Invoices icon](/img/assets/icons/Invoice.svg) *Invoices* tab displays the complete list of invoices for all your Strapi Cloud projects.
6759

6860
<ThemedImage
69-
alt="Subscription cancellation modal"
61+
alt="Invoices tab of Profile page"
7062
sources={{
71-
light: '/img/assets/cloud/cancel-subscription-modal.png',
72-
dark: '/img/assets/cloud/cancel-subscription-modal_DARK.png',
63+
light: '/img/assets/cloud/account-invoices.png',
64+
dark: '/img/assets/cloud/account-invoices_DARK.png',
7365
}}
7466
/>
7567

76-
1. Click on an active subscription tile (e.g. "Strapi Cloud Pro $99.OO"). You will be redirected to your subscription details.
77-
2. Click on the **Cancel Subscription** link.
78-
3. Select the reason of your cancellation from the drop-down menu, and optionally add a comment in the textbox.
79-
4. Confirm your choice by clicking on the **Confirm Cancellation** button.
68+
<InvoiceStatus components={props.components} />
69+
70+
:::strapi Invoices are also available per project.
71+
In the *Settings > Invoices* tab of any project, you will find the invoices for that project only. Feel free to check the [dedicated documentation](/cloud/projects/settings#invoices).
72+
:::

Diff for: docusaurus/docs/cloud/account/account-settings.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ canonicalUrl: https://docs.strapi.io/cloud/account/account-settings.html
99

1010
The *Profile* page enables you to manage your account details and preferences. It is accessible by clicking on your profile picture, on the top right hand corner of the interface, and **Profile**.
1111

12-
There are 3 tabs available in the *Profile* interface: [*General*](#general), [*Preferences*](#preferences) and *Billing* (the latter is documented in the [Account billing details](/cloud/account/account-billing) section of this documentation).
12+
There are 3 tabs available in the *Profile* interface: ![General icon](/img/assets/icons/Faders.svg) [*General*](#general), ![Preferences icon](/img/assets/icons/Palette.svg) [*Preferences*](#preferences), ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* and ![Invoices icon](/img/assets/icons/Invoice.svg) Invoices (the last 2 are documented in the [Account billing details](/cloud/account/account-billing) section of this documentation).
1313

1414
## General
1515

16-
The *General* tab enables you to edit the following details for your account profile:
16+
The ![General icon](/img/assets/icons/Faders.svg) *General* tab enables you to edit the following details for your account profile:
1717

1818
- Details: to see the name associated with your account.
1919
- Connected accounts: to manage Google, GitHub and GitLab accounts connected with your Strapi Cloud account (see [Managing connected accounts](#managing-connected-accounts)).
@@ -39,13 +39,13 @@ You can also click on the three dots button of a connected account and click on
3939

4040
You can delete your Strapi Cloud account, but it will be permanent and irreversible. All associated projects and their data will be deleted as well and the subscriptions for the projects will automatically be canceled.
4141

42-
1. In the *Delete account* section of the *General* tab, click on the **Delete account** button.
42+
1. In the *Delete account* section of the ![General icon](/img/assets/icons/Faders.svg) *General* tab, click on the **Delete account** button.
4343
2. In the dialog, type `DELETE` in the textbox.
4444
3. Confirm the deletion of your account by clicking on the **Delete** button.
4545

4646
## Preferences
4747

48-
The *Preferences* tab enables you to choose the appearance of your Strapi Cloud dashboard: either the Light or Dark theme.
48+
The ![Preferences icon](/img/assets/icons/Palette.svg) *Preferences* tab enables you to choose the appearance of your Strapi Cloud dashboard: either the Light or Dark theme.
4949

5050
<ThemedImage
5151
alt="Preferences tab of Profile page"

Diff for: docusaurus/docs/cloud/getting-started/cloud-fundamentals.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Before going any further into this Strapi Cloud documentation, we recommend you
1313

1414
- **Strapi Cloud Pricing Plans** <br/> As a Strapi Cloud user you have the choice between 3 tiers: Developer, Pro and Team. Depending on the tier, you have access to different functionalities, support and customization options (see [Pricing page](https://strapi.io/pricing-cloud) for more details). In this Strapi Cloud documentation, the <CloudDevBadge />, <CloudProBadge />, and <CloudTeamBadge /> badges can be displayed beside a section's title to indicate for which tier the feature is available.
1515

16-
- **Strapi CMS Enterprise features** <br/> Some of Strapi features, usually accessible via the Enterprise Edition of Strapi CMS, are included in some Strapi Cloud tiers (see [Pricing page](https://strapi.io/pricing-cloud) and [Usage & Billing](/cloud/getting-started/usage-billing) for more details). These features, highlighted with an <EnterpriseBadge /> badge, are documented in the [User Guide](https://docs.strapi.io/user-docs/intro) and the [Developer Documentation](https://docs.strapi.io/dev-docs/intro).
16+
- **Strapi CMS Enterprise features** <br/> Some of Strapi features, usually accessible via the Enterprise Edition of Strapi CMS, are included in some Strapi Cloud tiers (see [Pricing page](https://strapi.io/pricing-cloud) and [Information on billing & usage](/cloud/getting-started/usage-billing) for more details). These features, highlighted with an <EnterpriseBadge /> badge, are documented in the [User Guide](https://docs.strapi.io/user-docs/intro) and the [Developer Documentation](https://docs.strapi.io/dev-docs/intro).
1717

1818
- **Types of Strapi Cloud users** <br/> There can be 2 types of users on a Strapi Cloud project: owners and maintainers. The owner is the one who has created the project and has therefore access to all features and options for the project. Maintainers are users who have been invited to contribute to an already created project by its owner. Maintainers, as documented in the [Collaboration](/cloud/projects/collaboration) page, cannot view and access all features and options from the Strapi Cloud dashboard.
1919

Diff for: docusaurus/docs/cloud/getting-started/intro.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ The Strapi Cloud documentation that you are currently reading is organised in to
3939

4040
<CustomDocCardsWrapper>
4141
<CustomDocCard emoji="☁️" title="Project creation" description="Step-by-step guide to guide you through the creation and deployment of a Strapi Cloud project." link="/cloud/getting-started/deployment" />
42-
<CustomDocCard emoji="💸" title="Usage & Billing" description="All details on Strapi Cloud plans & billing, including overages and project suspension." link="/cloud/getting-started/usage-billing" />
42+
<CustomDocCard emoji="💸" title="Information on billing & usage" description="All details on Strapi Cloud plans & billing, including overages and project suspension." link="/cloud/getting-started/usage-billing" />
4343
<CustomDocCard emoji="🗃️" title="Projects overview" description="Information on how to access Strapi Cloud projects to view their details & usage, and manage them." link="/cloud/projects/overview" />
4444
<CustomDocCard emoji="⚙️" title="Projects settings" description="Details on all the available settings for Strapi Cloud projects and how to configure them." link="/cloud/projects/settings"/>
4545
<CustomDocCard emoji="🤝" title="Collaboration" description="Documentation for the Collaboration feature to invite other users to access and manage a project." link="/cloud/projects/collaboration"/>

Diff for: docusaurus/docs/cloud/getting-started/usage-billing.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
---
2-
sidebar_label: 'Usage & Billing'
2+
sidebar_label: 'Information on billing & usage'
33
displayed_sidebar: cloudSidebar
44
sidebar_position: 3
55
---
66

7-
# Usage & Billing
7+
# Information on billing & usage
88

99
This page contains general information related to the usage and billing of your Strapi Cloud account and projects.
1010

@@ -42,7 +42,7 @@ Strapi Cloud offers a free 14 days trial for all new accounts, and 3 paid plans:
4242

4343
Seats represent the maximum number of users that can access the Strapi admin panel. Each plan comes with a default number of seats.
4444

45-
You can add more seats either by upgrading to a higher plan, or manually adding individual seats as desired. Seats can be added from the **Account Settings** (see [Edit subscription](/cloud/account/account-billing#edit-subscription)).
45+
You can add more seats either by upgrading to a higher plan, or manually adding individual seats as desired. Seats can be added from the **Billing & Usage** tab of a project's settings (see [Managing project's number of seats](/cloud/projects/settings#managing-projects-number-of-seats)).
4646

4747
There is however a maximum number of seats that can be added per plan:
4848

0 commit comments

Comments
 (0)