Complete changes for Stripe tutorial

src/routes/docs/tutorials/+page.svelte

@@ -19,7 +19,9 @@
         sveltekit: 'icon-svelte',
         android: 'icon-android',
         apple: 'icon-apple',
-        flutter: 'icon-flutter'
+        flutter: 'icon-flutter',
+        stripe: 'icon-stripe'
+
     };
 
     const getIcon = (tutorial: MappedTutorial) => {

src/routes/docs/tutorials/subscriptions-with-stripe/step-1/+page.markdoc

@@ -1,23 +1,24 @@
 ---
 layout: tutorial
-title: Introduction
-description: This is the description used for SEO.
+title: Add app subscriptions with Stripe
+description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
 step: 1
 difficulty: easy
 readtime: 10
+framework: Stripe
 ---
 As you app grows, you may start offering paid services or features.
 This is an important part of growing your idea into a business.
 This tutorial will show you how to accept payments and provide subscribers with premium features using **Stripe**, a popular payment platform.
 
 {% only_dark %}
-![Project settings screen](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe.png)
+![Stripe subscription demo](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe.png)
 {% /only_dark %}
 {% only_light %}
-![Project settings screen](/images/docs/tutorials/subscriptions-with-stripe/stripe.png)
+![Stripe subscription demo](/images/docs/tutorials/subscriptions-with-stripe/stripe.png)
 {% /only_light %}
 
-## Prerequisites {% #prerequisites %}
+# Prerequisites {% #prerequisites %}
 1. A [GitHub account](https://github.com/) and working knowledge with GitHub
 1. A [Stripe account](https://stripe.com/en-ca).
 1. An [Appwrite Cloud account](https://cloud.appwrite.io/).

src/routes/docs/tutorials/subscriptions-with-stripe/step-2/+page.markdoc

@@ -1,7 +1,7 @@
 ---
 layout: tutorial
 title: Setup Stripe
-description: This is the description used for SEO.
+description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
 step: 2
 ---
 
@@ -9,14 +9,25 @@ Start by visiting [Stripe](https://stripe.com/) and creating an account. When su
 
 This quick start will use test mode, but the same steps will also work for live mode.
 
-![Stripe Dashboard screen](/images/docs/functions/quick-start/stripe-dashboard.png)
+{% only_dark %}
+![Stripe dashboard](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe-dashboard.png)
+{% /only_dark %}
+{% only_light %}
+![Stripe dashboard](/images/docs/tutorials/subscriptions-with-stripe/stripe-dashboard.png)
+{% /only_light %}
 
-## API key {% #api-key %}
+# API key {% #api-key %}
 
 In the header, you can switch to the **Developers** page, where you can head to the **API Keys** section. On this page, reveal and copy the **Secret key**. Note it down, as you will need it later when setting the `STRIPE_SECRET_KEY` environment variable.
 
+{% only_dark %}
+![Stripe API key screen](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe-api-key.png)
+{% /only_dark %}
+{% only_light %}
+![Stripe API key screen](/images/docs/tutorials/subscriptions-with-stripe/stripe-api-key.png)
+{% /only_light %}
 
-## Webhooks {% #webhooks %}
+# Webhooks {% #webhooks %}
 
 Go to the **Webhooks** section and click the button to **Add an endpoint**.
 
@@ -29,7 +40,13 @@ You can use the search bar to your advantage. By searching for `subscription`, y
 
 Once both are selected, you can click a button to **Add events**. Finish off the form by clicking the **Add endpoint** button.
 
+
+{% only_dark %}
+![Stripe webhook setup screen](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe-webhook-subscription.png)
+{% /only_dark %}
+{% only_light %}
 ![Stripe webhook setup screen](/images/docs/tutorials/subscriptions-with-stripe/stripe-webhook-subscription.png)
+{% /only_light %}
 
 Once created, click **Reveal** under **Signing secret** and copy the secret. Note it down, as you will need it later when setting the `STRIPE_WEBHOOK_SECRET` environment variable.
 

src/routes/docs/tutorials/subscriptions-with-stripe/step-3/+page.markdoc

@@ -1,7 +1,7 @@
 ---
 layout: tutorial
 title: Create function
-description: This is the description used for SEO.
+description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
 step: 3
 ---
 
@@ -10,13 +10,19 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console) and create a n
 ## Create a new function {% #create-function %}
 Once inside your project overview, switch to the **Functions** page from the left sidebar. Under the **Templates** section, use the search bar and look for `subscriptions`. You will find the **Subscriptions with Stripe** template, which you can use by clicking the **Create function** button.
 
-![Appwrite templates screen](/images/docs/tutorials/subscriptions-with-stripe/templates-stripe-subscription.png)
 
-## Create a new function {% #create-function %}
+{% only_dark %}
+![Project settings screen](/images/docs/tutorials/subscriptions-with-stripe/dark/templates-stripe-subscription.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/tutorials/subscriptions-with-stripe/templates-stripe-subscription.png)
+{% /only_light %}
+
+# Create a new function {% #create-function %}
 
 You will be asked to configure Function's **Name**, **Runtime**, and **Function ID**. Feel free to customise those or leave them as is. Click the **Next** button to continue to the environment variables definition.
 
-## Configure variables {% #configure-variables %}
+# Configure variables {% #configure-variables %}
 
 Toggle **Generate API key on completion** in the `APPWRITE_API_KEY` variable, so you don't need to go and generate it manually. 
 
@@ -28,7 +34,7 @@ If you are self-hosting Appwrite, you will need to change `APPWRITE_ENDPOINT` a
 
 When done, click the **Next** button.
 
-## Connect repository {% #connect-repository %}
+# Connect repository {% #connect-repository %}
 
 In this section, you can decide whether to host your Function's source code in an existing repository or create a new one. 
 
@@ -38,6 +44,6 @@ Click the **Next** button to continue.
 
 You will be asked to connect your project to Git provider. Click the one you want to use, and follow the authorization process. Once done, you will be redirected back to the Appwrite Console. Here, you can configure **Repository name** and toggle if you want to **Keep repository private**. Once done, click the **Next** button to continue to the final step.
 
-## Select branch {% #select-branch %}
+# Select branch {% #select-branch %}
 
 Finally, you can configure repository-related settings such as **Production branch**, **Root directory**, or **Silent mode**. Let's stick to the default values provided by the template and click the **Create** button to create the function.

src/routes/docs/tutorials/subscriptions-with-stripe/step-4/+page.markdoc

@@ -1,52 +1,37 @@
 ---
 layout: tutorial
-title: Execute Function
-description: This is the description used for SEO.
+title: Configure web platform
+description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
 step: 4
 ---
 
-You are now ready to use the Appwrite Function in your front end. You can initialize the payment process by redirecting your user to the `/subscribe` endpoint on the Function's domain.
-
-## Add platform {% #add-platform %}
+# Add platform {% #add-platform %}
 To showcase the functionality, the template ships with a demo frontend that you can use. To allow this demo, you must add Function's domain as a trusted web platform. Head to your project's **Overview** page in Apwrite Console, and scroll down to the **Integrations** section. Click the **Add platform** button and select **Web App** from the dropdown.
 
-![Appwrite Platforms screen](/images/docs/tutorials/subscriptions-with-stripe/functions-add-web-platform.png)
+{% only_dark %}
+![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
 
-Set **Name** to `Subscription demo` and **Hostname** to your Function's domain. In my case, it is `6512ac5b95af39df6469.appwrite.global`. Click the **Next** button to continue. 
+Set **Name** to `Subscription demo` and **Hostname** to your Function's domain. 
+You can find your function's domain under the **Domains** tab.
+
+{% only_dark %}
+![Functions domain](/images/docs/tutorials/subscriptions-with-stripe/dark/functions-stripe-domain.png)
+{% /only_dark %}
+{% only_light %}
+![Functions domain](/images/docs/tutorials/subscriptions-with-stripe/functions-stripe-domain.png)
+{% /only_light %}
+
+Click the **Next** button to continue. 
 
 You don't need to follow the remaining screens, so you can click on **Skip optional steps**.
 
-## Visit demo {% #visit-demo %}
+# Update webhook endpoint {% #update-webhook-endpoint %}
 
-You can visit our Function's domain in the browser to see the demo application.
+Navigate to your Stripe dashboard, under **Developers**, go to the **Webhooks** tab.
+Click on the webhook we added earlier, under the three-dot menu, click **Update details**.
 
-In the demo app, click the **Register as anonymous** button to create a guest session. This will create a new user in your Appwrite Project. After registering, the demo app will show that you are **Not subscribed**. This means that your user does not have a `subscriber` label. You can click **Subscribe with Stripe** to start the payment process.
-
-Once redirected to Stripe, fill out the payment form. If your Stripe account is in test mode, you can use test card number `4242 4242 4242 4242` with any future expiration date and any CVC code. When done, click the **Subscribe** button.
-
-Once processed, you will be redirected back to the demo application, where **Subscription status** will say **Subscribed**. If it doesn't, please allow Stripe a few moments to process the payment. You can keep refreshing the website until the status is updated.
-
-## Verify label {% #verify-label %}
-
-Once someone subscribes, they should receive a special label that will grant them permissions.
-To verify that a label was added successfully to the user, 
-you can switch to Appwrite Console and visit the **Auth** page of our Appwrite Project. 
-Here, you should see one anonymous user. 
-
-Let's click on this user to see the details. 
-After scrolling down to the **Labels** card, you can see the `subscriber` label has been added to this user.
-
-![Appwrite User screen](/images/docs/tutorials/subscriptions-with-stripe/user-subscriber-label.png)
-
-## Permissions {% #permissions %}
-
-The label created will grant the user access to any resource with the following permissions.
-
-| Description                                 | Code Snippet                                |
-| ------------------------------------------- | ------------------------------------------- |
-| Read   | `Permissions.read(Role.label('subscriber'))`|
-| Update | `Permissions.update(Role.label('subscriber'))` |
-| Delete | `Permissions.delete(Role.label('subscriber'))` |
-| Create | `Permissions.create(Role.label('subscriber'))` |
-
-[Learn more about permissions {% icon icon="cheveron-right" /%}](/docs/advanced/platform/permissions)
+Update the **Endpoint URL** to `https://<YOUR_FUNCTION_DOMAIN>/webhook`. For example, `https://6579ea96aa28a5cfb66a.appwrite.global/webhook`

src/routes/docs/tutorials/subscriptions-with-stripe/step-5/+page.markdoc

@@ -0,0 +1,55 @@
+---
+layout: tutorial
+title: All set
+description: Add paid app subscription plans to your app with Stripe and Appwrite Functions.
+step: 5
+---
+You are now ready to use the Appwrite Function in your front end. You can initialize the payment process by redirecting your user to the `/subscribe` endpoint on the Function's domain.
+
+# Visit demo {% #visit-demo %} 
+
+You can visit our Function's domain in the browser to see the demo application.
+
+{% only_dark %}
+![Stripe subscription demo](/images/docs/tutorials/subscriptions-with-stripe/dark/stripe.png)
+{% /only_dark %}
+{% only_light %}
+![Stripe subscription demo](/images/docs/tutorials/subscriptions-with-stripe/stripe.png)
+{% /only_light %}
+
+In the demo app, click the **Register as anonymous** button to create a guest session. This will create a new user in your Appwrite Project. After registering, the demo app will show that you are **Not subscribed**. This means that your user does not have a `subscriber` label. You can click **Subscribe with Stripe** to start the payment process.
+
+Once redirected to Stripe, fill out the payment form. If your Stripe account is in test mode, you can use test card number `4242 4242 4242 4242` with any future expiration date and any CVC code. When done, click the **Subscribe** button.
+
+Once processed, you will be redirected back to the demo application, where **Subscription status** will say **Subscribed**. If it doesn't, please allow Stripe a few moments to process the payment. You can keep refreshing the website until the status is updated.
+
+# Verify label {% #verify-label %}
+
+Once someone subscribes, they should receive a special label that will grant them permissions.
+To verify that a label was added successfully to the user, 
+you can switch to Appwrite Console and visit the **Auth** page of our Appwrite Project. 
+Here, you should see one anonymous user. 
+
+Let's click on this user to see the details. 
+After scrolling down to the **Labels** card, you can see the `subscriber` label has been added to this user.
+
+{% only_dark %}
+![Appwrite User screen](/images/docs/tutorials/subscriptions-with-stripe/dark/user-subscriber-label.png)
+{% /only_dark %}
+{% only_light %}
+![Appwrite User screen](/images/docs/tutorials/subscriptions-with-stripe/user-subscriber-label.png)
+{% /only_light %}
+
+
+# Permissions {% #permissions %}
+
+The label created will grant the user access to any resource with the following permissions.
+
+| Description                                 | Code Snippet                                |
+| ------------------------------------------- | ------------------------------------------- |
+| Read   | `Permissions.read(Role.label('subscriber'))`|
+| Update | `Permissions.update(Role.label('subscriber'))` |
+| Delete | `Permissions.delete(Role.label('subscriber'))` |
+| Create | `Permissions.create(Role.label('subscriber'))` |
+
+[Learn more about permissions {% icon icon="cheveron-right" /%}](/docs/advanced/platform/permissions)