chore: add Stripe docs

README.md

@@ -82,6 +82,10 @@ cp .env.example .env
 > JWT_SECRET=
 > GEMINI_API_KEY=
 > UNSPLASH_API_KEY=
+> STRIPE_SECRET_KEY=
+> WEBSITE_URL=https://opensass.org
+> STRIPE_PRICE_ONE=price_1...
+> STRIPE_PRICE_TWO=price_1...
 > ```
 >
 > If you're missing any of these keys, check the service's developer portal to generate them.
@@ -108,6 +112,10 @@ To obtain your API key, navigate to [Google AI Studio](https://aistudio.google.c
 
 AIBook uses Unsplash which provides a powerful API to search for and retrieve high-quality images. To communicate with this api you will need a [Secret key](https://unsplash.com/oauth/applications). If you don't already have one, sign up for a free account at Unsplash, create a new app, and copy the Secret key at the bottom of the page after creating the app.
 
+### 💳 Stripe API
+
+Follow [our quick guide](./Stripe.md) to set up your stripe account and connect it to your project!
+
 ### 🚀 Building and Running
 
 - Run the client:
@@ -129,6 +137,10 @@ Happy compiling! 😄
 
 ![Gemini Models](https://github.com/user-attachments/assets/58f531d0-c352-40eb-8bb2-aed7359fccbc)
 
+- Stripe support.
+
+![Stripe Demo](https://github.com/user-attachments/assets/2bbeacb0-ad01-4477-96b6-3e3d7f8c4bed)
+
 - Built-in Dark and Light themes.
 
 ![Light Dark Themes](https://github.com/user-attachments/assets/71820497-efcc-4227-a906-e97cdf9aa45b)

Stripe.md

@@ -0,0 +1,37 @@
+# Set Up Stripe Env Vars
+
+1. **Create Products and Pricing in Stripe**
+   - Go to the [Stripe Dashboard](https://dashboard.stripe.com/).
+   - **Create a Product**:
+     - Navigate to **Products > Add Product**.
+
+      ![add product](https://github.com/user-attachments/assets/46a2ca96-4769-48a4-b7a4-5188e030e9e5)
+
+     - Enter product details (e.g., "Monthly Plan", "Yearly Plan").
+
+      ![Monthly Plan](https://github.com/user-attachments/assets/3fba067e-143c-455c-9d44-96b042a3560f)
+      ![Yearly Plan](https://github.com/user-attachments/assets/eac0da1e-a14b-4f36-98f2-c4107f4cfc53)
+
+1. **Retrieve Your Product Price IDs**
+   - After creating products, note the **Price IDs** (e.g., `price_1...`) from the pricing section.
+     - **STRIPE_PRICE_ONE** = `price_1AbCDeFgHiJkLmNOpQrStUv` (Monthly Plan).
+     - **STRIPE_PRICE_TWO** = `price_1XyZaBcDeFgHiJkLmNoQrStUv` (Yearly Plan).
+
+      ![price id](https://github.com/user-attachments/assets/4ac40893-40d3-4cb4-83a6-45dd6e130a4a)
+      ![price id](https://github.com/user-attachments/assets/709ea1f6-5543-428d-ad9a-d4164d4f0762)
+      ![price id](https://github.com/user-attachments/assets/fe5d558d-79cc-48cd-9d52-7de8e48bfe35)
+      ![price id](https://github.com/user-attachments/assets/9a6f7cfa-e609-460e-9501-043d1c8b2880)
+
+1. **Set the Environment Variables**
+   Add the following to your `.env` file:
+   ```env
+   STRIPE_SECRET_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc
+   WEBSITE_URL=http://0.0.0.0:3000
+   STRIPE_PRICE_ONE=price_1AbCDeFgHiJkLmNOpQrStUv
+   STRIPE_PRICE_TWO=price_1XyZaBcDeFgHiJkLmNoQrStUv
+   ```
+
+1. **Set the hard coded price values**
+   Set the following price values:
+
+Your environment variables are set and ready for Stripe integration.

src/components/pricing.rs

@@ -9,7 +9,6 @@ use dioxus::prelude::*;
 use dioxus_logger::tracing;
 use gloo_storage::SessionStorage;
 use gloo_storage::Storage;
-use std::env;
 
 #[derive(Props, Clone, PartialEq)]
 struct PricingOption {
@@ -18,7 +17,7 @@ struct PricingOption {
     description: &'static str,
     features: Vec<&'static str>,
     highlight: bool,
-    plan_id: Option<String>,
+    plan_id: Option<&'static str>,
 }
 
 #[component]
@@ -51,7 +50,8 @@ pub fn Pricing() -> Element {
                 "Priority customer support",
             ],
             highlight: true,
-            plan_id: Some(env::var("STRIPE_PRICE_ONE").expect("STRIPE_PRICE_ONE must be set.")),
+            // TODO: Change to env var
+            plan_id: Some("price_1QO1"),
         },
         PricingOption {
             title: "Yearly",
@@ -66,10 +66,11 @@ pub fn Pricing() -> Element {
                 "Priority support",
             ],
             highlight: false,
-            plan_id: Some(env::var("STRIPE_PRICE_TWO").expect("STRIPE_PRICE_TWO must be set.")),
+            // TODO: Change to env var
+            plan_id: Some("price_1QO1"),
         },
     ];
-    let handle_plan_selection = move |plan: (Option<String>, &'static str)| {
+    let handle_plan_selection = move |plan: (Option<&'static str>, &'static str)| {
         if let Some(plan_id) = plan.0 {
             spawn({
                 let plan_title = plan.1.to_string();
@@ -156,7 +157,7 @@ pub fn Pricing() -> Element {
                                     if option.highlight { "bg-blue-500 text-white hover:bg-blue-600" } else { "bg-gray-300 text-gray-700 hover:bg-gray-400" }),
                                 onclick: move |e: Event<MouseData>| {
                                     e.stop_propagation();
-                                    handle_plan_selection((option.plan_id.clone(), option.title));
+                                    handle_plan_selection((option.plan_id, option.title));
                                 },
                                 "Select Plan"
                             }