k

pages/adding-products-to-stripe.mdx

@@ -2,7 +2,7 @@ import { Callout } from "nextra-theme-docs";
 
 # Adding Products to Stripe
 
-Let's create a product in Stripe so that users can upgrade their accounts to become Premium Users.
+Let's create a subscription product in Stripe so that users can upgrade their accounts to become Premium Users.
 
 <Callout emoji="📣"> **Important:** Do not add products before your extension is fully installed and the webhook is set up. Adding a product triggers the webhook, so if the installation isn't complete, your product might not appear until you update it. </Callout>
 
@@ -16,21 +16,21 @@ Let's create a product in Stripe so that users can upgrade their accounts to bec
 
 - Enter Product Details:
 
-  1. Product Name: Give your product a name, such as "Monthly Plan" or "Yearly Plan".
+  1. Product Name: Give your product a name, such as "SaaS Subscription". This name will appear on the checkout page, so choose appropriately.
   2. Description: Optionally, provide a brief description of the product.
-  3. Image: Providing a thumnail image is recommended, it will be displayed in the product catalog and on the checkout page.
+  3. Image: Providing a thumbnail image is recommended, it will be displayed in the product catalog and on the checkout page.
 
 - Configure the Product:
 
   1. Set the correct price.
 
-  2. Choose the type of charge (recurring, one-time, etc.).
+  2. Choose the type of charge (choose recurring and monthly for this price).
 
   3. Configure any other options according to your needs.
 
-The default subscription component in SaaSavant expects two products/prices, one for monthly and one for yearly. You can add additional products if you wish.
+- Save the product.
 
-2. Add Stripe "priceIds" to Environment Variables
+2. Add Stripe "priceId" to Environment Variables
 
 - Copy the Price ID:
 
@@ -49,20 +49,16 @@ The default subscription component in SaaSavant expects two products/prices, one
 - Paste the copied Price ID into the appropriate variable, for example:
 
 ```env
-Copy code
 NEXT_PUBLIC_MONTHLY_ID=your_monthly_price_id_here
 NEXT_PUBLIC_YEARLY_ID=your_yearly_price_id_here
 ```
 
-Replace `your_monthly_price_id_here` and `your_yearly_price_id_here` with the actual Price IDs you copied.
+- Click the `+` icon while still in the product details to add another price to this product. Choose recurring and yearly.
+
+- Repeat the above process for storing the Price ID in your environment variables.
 
 Save Your Changes:
 
 Ensure you save the `.env.local` file after pasting in the Price IDs.
-Repeat for Additional Products:
-
-If you have multiple products, repeat the process to add each product&apos;s Price ID to the `.env.local` file.
-
----
 
 You're all set! Your Stripe products are now configured, and the Price IDs are stored in your environment variables.

pages/connecting-firebase-to-stripe.mdx

@@ -1,46 +1,67 @@
-# Configuring the "Run Payments with Stripe" Extension
+# Installing the "Run Payments with Stripe" Extension
 
-Once you've created a Stripe webhook, you'll need to configure the "Run Payments with Stripe" extension in Firebase to handle various Stripe events, such as payment successes, subscription updates, and cancellations. Follow the steps below to ensure everything is set up correctly.
+Now that Firebase and Stripe are set up, you'll need to configure the "Run Payments with Stripe" extension in Firebase to handle various Stripe events, such as payment successes, subscription updates, and cancellations. Follow the steps below to ensure everything is set up correctly.
 
 ## Step 1: Configure the "Run Payments with Stripe" Extension
 
 1. Go to your Firebase Console.
-2. Navigate to `Extensions` and select the "Run Payments with Stripe" extension.
-3. Click `Install`.
+2. Navigate to `Extensions` and select the "Run Payments with Stripe" extension. There are two extensions with the same exact name, one made by Stripe and another made by Invertase. Oddly enough, the one we want is the one made by Invertase. Here is a direct link to the correct extension - [Run Payments With Stripe](https://extensions.dev/extensions/invertase/firestore-stripe-payments).
 
-Follow the on-screen instructions to install the extension, You will need to enable a billing account, continue to follow the on-screen instructions and enable the two neccessary services:
+3. Click `Install`.
 
-![User Dashboard](../public/strip1.png)
+Follow the on-screen instructions to install the extension. At some point you will need to enable a billing account, do so and then continue to follow the on-screen instructions and enable the neccessary services when asked.
 
-Click next (2 or three times) to be taken to the configuration form. I recommend the following settings, but you can change them as needed (e.g., if you want to use a different Cloud Functions deployment location). Replace the API and webhook secrets with your own. They can be found in your `.env.local` file.
+Click next (2 or three times) to be taken to the configuration form. I recommend the following settings, but you can change them as needed (e.g., if you want to use a different Cloud Functions deployment location). 
 
 ![User Dashboard](../public/strip2.png)
-![User Dashboard](../public/strip3.png)
-![User Dashboard](../public/strip4.png)
 
-## Step 4: Test the Integration
+Leave the API keys blank for now and head back to the stripe dashboard. Click the `Developers` button in the top-right corner and open the `API Keys` section from the pop-up menu.
+
+![User Dashboard](../public/rkey.png)
+
+Generate a new `Restricted Key` with
+
+- Write access to Customers
+- Write access to Checkout Sessions
+- Write access to Customer Portal
+- Read access to Subscriptions
 
-Before going live, it's important to test the webhook to ensure everything is working correctly.
+Once saved, copy the Restricted Key and put it in the Firebase Extension config in the "Stripe API Key with Restricted Access" field. Click "create key" to encrypt and save the key.
 
-1. In your Stripe Dashboard, go to **Developers > Webhooks**.
-2. Select your webhook and click **Send test webhook**.
-3. Choose an event type (e.g., `checkout.session.completed`) and click **Send test webhook**.
-4. Verify that the test event triggers the correct updates in your Firebase database.
+Click "Install" at the bottom. This process will take 3-5 minutes.
 
-## Step 5: Monitor and Troubleshoot
+After it is done installing, copy the url from the "How this extension works" tab.
 
-After deploying, keep an eye on both the Stripe Dashboard and Firebase Console to monitor for any issues.
+![User Dashboard](../public/ext-1.png)
+![User Dashboard](../public/ext-2.png)
 
-- **Stripe Dashboard:** Check the logs under **Developers > Webhooks** to ensure events are being delivered successfully.
-- **Firebase Console:** Monitor your Cloud Function logs to catch any errors or unexpected behavior.
+Go back to the Stripe Dashboard and click the `Developers` button in the top-right corner and open the `Webhooks` section from the pop-up menu.
 
-## Conclusion
+Click `Create new endpoint` and copy the url from the "How this extension works" tab as the endpoint.
 
-Your "Run Payments with Stripe" extension should now be fully configured and ready to handle Stripe events through your webhook. This setup allows you to automate payment processing and keep your Firebase database in sync with Stripe.
+Select the following events to send to the endpoint:
 
-For more advanced configurations: 
+- product.created
+- product.updated
+- product.deleted
+- price.created
+- price.updated
+- price.deleted
+- checkout.session.completed
+- customer.subscription.created
+- customer.subscription.updated
+- customer.subscription.deleted
+- tax_rate.created (optional)
+- tax_rate.updated (optional)
+- invoice.paid (optional, will sync invoices to Cloud Firestore)
+- invoice.payment_succeeded (optional, will sync invoices to Cloud Firestore)
+- invoice.payment_failed (optional, will sync invoices to Cloud Firestore)
+- invoice.upcoming (optional, will sync invoices to Cloud Firestore)
+- invoice.marked_uncollectible (optional, will sync invoices to Cloud Firestore)
+- invoice.payment_action_required (optional, will sync invoices to Cloud Firestore)
 
-- [Stripe documentation](https://stripe.com/docs/webhooks)
+Once the webhook is complete, copy the signing secret and place it in the `env.local` file of your project. 
 
-- [Firebase Extensions documentation](https://firebase.google.com/products/extensions).
+Now, head to the Firebase dashboard and click the Extensions tab. Find your "Run Payments With Stripe" extension and click 'Reconfigure'. Paste the webhook signing secret into the "Stripe Webhook Secret" field.
 
+Save the changes, this will take another 3-5 minutes. 

pages/setup-firebase-project.mdx

@@ -22,7 +22,7 @@ Click on the web button here as pictured below:
 
 ![Demo Two](../public/demo-2.png)
 
-It will ask you to give your app a name, name it whatever you like (eg. "MySaaSProject", or your product's name if you have one.)
+You will be asked to give your app a name, name it whatever you like (eg. "MySaaSProject", or your product's name if you have one.)
 
 <Callout emoji="📣">
   {" "}
@@ -50,15 +50,13 @@ And click the `Get Started` button on the page
 
 We'll start by enabling Email/Password Auth since it is aleady implemented in SaaSavant.
 
-Select `Email/Password` under the Sign-in method tab of the authentication page.
+Select `Email/Password` under the Sign-in method tab of the authentication page. toggle the `Enable` checkbox.
 
 Now Click `Save`.
 
-Choose a public facing name for you project (Your users will see this, just name it your app's / company's name)
+Choose a public facing name for you project (Your users will see this, just name it your app's / company's name) and configure a support email for the project (optional).
 
-and configure a support email for the project (most likely just your email already connected to firebase.)
-
-Auth is done, now go setup Firestore. From the left side menu, click on `Build` and click on `Firestore Database`.
+Auth is done, now it's time to setup Firestore. From the left side menu, click on `Build` and click on `Firestore Database`.
 
 ![Demo 6](../public/demo-6.png)
 
@@ -70,6 +68,63 @@ Set the location to the most appropriate location for your users (or just leave
 
 ![Demo 6](../public/create-db.png)
 
-Start in `test mode` for now and click the `Create` button
-
-![Demo 6](../public/create-db-2.png)
+Start in `production mode` and click the `Create` button
+
+![Demo 6](../public/create-db-2.png)
+
+Go to the `Rules` tab and set the following rules:
+
+![Demo Three](../public/rules.png)
+
+```json
+rules_version = '2';
+service cloud.firestore {
+  match /databases/{database}/documents {
+
+    // Users collection
+    match /users/{uid} {
+      allow read, write: if true;
+    }
+        match /announcements/{id} {
+      allow read, write: if true;
+    }
+   match /newsletters/{id} {
+      allow read, write: if true;
+    }
+       match /supportTickets/{id} {
+      allow read, write: if true;
+    }
+       match /waitingList/{id} {
+      allow read, write: if true;
+    }
+
+    // Customers collection
+    match /customers/{uid} {
+      allow read: if true;
+
+      match /checkout_sessions/{id} {
+        allow read, write: if true;
+      }
+      match /subscriptions/{id} {
+        allow read: if true;
+      }
+      match /payments/{id} {
+        allow read: if true;
+      }
+    }
+
+    // Products collection
+    match /products/{id} {
+      allow read: if true;
+
+      match /prices/{id} {
+        allow read: if true;
+      }
+
+      match /tax_rates/{id} {
+        allow read: if true;
+      }
+    }
+  }
+}
+```

pages/setup-stripe.mdx

@@ -64,31 +64,3 @@ To allow users to manage their subscriptions and payment methods, you'll need to
    - SaaSavant includes a pre-made user account page with a link that directs users to their Stripe portal. Ensure that this link is correctly integrated into your product by.
 
 
-### **Stripe Webhook**
-
-Now we need to setup a Stripe Webhook. The webhook is used to send notifications to your application when certain events occur in Stripe. This ensures that only paying users see certain content.
-
-To do that, we'll go to the Stripe Dashboard, and click Developers > Webhooks.
-
-Select the following events to send to that endpoint:
-
-- product.created
-- product.updated
-- product.deleted
-- price.created
-- price.updated
-- price.deleted
-- checkout.session.completed
-- customer.subscription.created
-- customer.subscription.updated
-- customer.subscription.deleted
-- tax_rate.created (optional)
-- tax_rate.updated (optional)
-- invoice.paid (optional, will sync invoices to Cloud Firestore)
-- invoice.payment_succeeded (optional, will sync invoices to Cloud Firestore)
-- invoice.payment_failed (optional, will sync invoices to Cloud Firestore)
-- invoice.upcoming (optional, will sync invoices to Cloud Firestore)
-- invoice.marked_uncollectible (optional, will sync invoices to Cloud Firestore)
-- invoice.payment_action_required (optional, will sync invoices to Cloud Firestore)
-
-Once the webhook is complete, copy the signing secret and place it in the `env.local` file of your project.