feat: add billing page

Signed-off-by: cutecutecat <junyuchen@tensorchord.ai>

src/cloud/getting-started/quick-start.md

@@ -4,6 +4,10 @@ This guide will help you get started with PGVecto.rs Cloud. First, you need to s
 
 ## Create a cluster
 
+::: tip
+You can only create Enterprise plan after you bind a [credit card](../payment/credit-card.md).
+:::
+
 To create a new cluster, navigate to the PGVecto.rs Cloud Console and click on the "Create Cluster" button.
 
 ![](../images/after_login_in.png)

src/cloud/payment/credit-card.md

@@ -1 +1,17 @@
-# Adding Credit Card
+# Subscribe by Adding Credit Card
+
+::: tip
+Billing is for the project, not the user. There are separate invoices for each project, and you must add the payment method separately.
+:::
+
+Pgvecto.rs Cloud supports credit card payments. You can add multiple credit cards or remove some of them by clicking `Delete`. Already added credit cards will be displayed on the billing page.
+
+![](../images/billing_page.png)
+
+The `Add Payment Method` button will take you to Stripe's `Add Credit Card page` where we will initiate a credit card pre-authorization request. There is no charge for this request. Once the add request is complete, the new credit card will be available and displayed on the `Billing` page.
+
+![](../images/billing_add_card.png)
+
+::: warning
+The last credit card for each project cannot be deleted.
+:::

src/cloud/payment/invoice.md

@@ -0,0 +1,41 @@
+# View Invoice
+
+Currently, the PgVecto.rs Cloud has Orb as its billing provider. From the Billing page, you can click `View invoices in Orb` to go to the Orb `Customer Portal`. On this external page you can do the following:
+
+- Review your compute resource and storage usage
+- Review your invoices, both paid, issued, and draft
+- Pay invoices that have been unsuccessfully charged
+
+![](../images/billing_invoice_intro.png)
+
+## Review the amount of usage
+
+On the `Overview` page of the `Customer Portal`, the `Current Billing Period` section allows you to check your recent usage:
+
+![](../images/billing_invoice_current_period.png)
+
+- Histogram titles beginning with `AWS` indicate compute resources in hours (h).
+- Histogram titles beginning with `EBS` show disk space in gigabyte-hours (Gi*h)
+
+## Review your invoices
+
+On the `Invoice History` page of the `Customer Portal`, you can view all historical invoices along with their usage over time.
+
+![](../images/billing_invoice_list.png)
+
+Each row can be clicked on to view the details of the invoice.
+
+![](../images/billing_invoice_detail.png)
+
+## Manually pay uncharged invoices
+
+For each invoice that is due, Pgvecto.rs Cloud will automatically try to charge 3 times within a week. If all attempts fail, your project will be suspended:
+
+- You will receive an email informing you that the project has been suspended
+- You will not be able to create new clusters of the project
+- Existing clusters in the project will be suspended
+- The data in the suspended clusters will be kept for 7 days
+
+![](../images/billing_manual_pay.png)
+
+These invoices are displayed in the `Unpaid Invoices` section of the `Overview` page with a status of failed or issued, and you can pay these invoices manually.