Feat: Stripe subscription tutorial

src/routes/docs/quick-starts/subscriptions-with-stripe/+page.markdoc

@@ -0,0 +1,89 @@
+---
+layout: article
+title: Subscriptions with Stripe
+description: This is the description used for SEO.
+---
+Learn how to accept payments and provide subscribers with premium features.
+
+{% section #step-1 step=1 title="Setup Stripe" %}
+
+Start by visiting [Stripe](https://stripe.com/) and creating an account. When successful, you will see Stripe Dashboard.
+
+This quick start will use test mode, but the same steps will work for live mode.
+
+![Stripe Dashboard screen](/images/docs/functions/quick-start/stripe-dashboard.png)
+
+In the header, you can switch to the **Developers** page, where you can switch 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.
+
+Next, switch to the **Webhooks** section and click the button to **Add an endpoint**.
+
+Let's add a fake endpoint for now in order to get a webhook secret. Later, when you set up the Appwrite Function, you will update this endpoint with the Function's endpoint.
+
+Enter `https://temporary-endpoint/` as **Endpoint URL** and feel free to write some **Description** for yourself. Leave everything else as is, and continue down to **Select events**. You need to toggle events `customer.subscription.created` and `customer.subscription.deleted`. You can use the search bar to your advantage. By searching for `subscription`, you should easily find those two events. Once both are selected, you can click a button to **Add events**. Finish off the form by clicking the **Add endpoint** button.
+
+![Stripe webhook setup screen](/images/docs/functions/quick-start/stripe-webhook-subscription.png)
+
+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.
+
+Keep this page open, as you will need it soon to update the endpoint with the real Function's endpoint.
+
+{% /section %}
+
+{% section #step-2 step=2 title="Create Function" %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console) and create a new project if you haven't already. If this is your first time using Appwrite, you will be asked to sign up first.
+
+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/functions/quick-start/templates-stripe-subscription.png)
+
+You will be asked to configure Function's **Name**, **Runtime**, and **Function ID**. Feel free to customize those or leave them as is. Click the **Next** button to continue to the environment variables definition.
+
+Toggle **Generate API key on completion** in the `APPWRITE_API_KEY` variable, so you don't need to go and generate it manually. Fill the `STRIPE_SECRET_KEY` variable with the key you copied from Stripe's Dashboard under the **API keys** section. Similarly, fill the `STRIPE_WEBHOOK_SECRET` variable with the secret copied after creating **Webhook**. If you are self-hosting Appwrite, you will need to change `APPWRITE_ENDPOINT` as well, under the **Optional variables** section. When done, click the **Next** button.
+
+In this section, you can decide whether to host your Function's source code in an existing repository or create a new one. Larger projects will benefit from having all functions in one repository, but to keep this quick start simple, let's stick to **Create a new repository**. 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.
+
+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.
+
+{% /section %}
+
+
+{% section #step-3 step=3 title="Configure Endpoint" %}
+
+Once the Function is created, a build process will start. Wait a little for this to finish. Once done, it will automatically activate the deployment and make your function live.
+
+You should see the **Active** card under the **Deployments** section. This card contains the **Domains** information telling you what domain was assigned to your Function.
+
+![Appwrite Function screen](/images/docs/functions/quick-start/functions-stripe-subscription.png)
+
+Copy the domain and head back to Stripe's **Webhook** page. In the upper right corner is a button with a dots icon, under which there is a **Update details...** button to open the configuration modal. In this modal, let's update the **Endpoint URL**.
+
+The function's domain I copied was `6512ac5b95af39df6469.appwrite.global`, and the endpoint needed for Stripe communication is `/webhook`. By combining those two, I get my new endpoint URL: `https://6512ac5b95af39df6469.appwrite.global/webhook`. Please do the same, but make sure to use the domain generated for your Function. When done, click **Update endpoint** to save changes.
+
+{% /section %}
+
+{% section #step-4 step=4 title="Execute Function" %}
+
+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.
+
+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/functions/quick-start/functions-add-web-platform.png)
+
+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. You don't need to follow the remaining screens, so you can click on **Skip optional steps**.
+
+Finally, you can visit our Function's domain in the browser to see the demo application.
+
+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.
+
+To also confirm the 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/functions/quick-start/user-subscriber-label.png)
+
+{% /section %}