fix: update deploy button and add Stripe configuration info. We will …

…need to keep this Stripe paragraph until our Stripe Test & Live integrations are updated (#76)

README.md

@@ -4,10 +4,10 @@ The all-in-one starter kit for high-performance SaaS applications.
 
 ## Features
 
-- Secure user management and authentication with [Supabase](https://supabase.io/docs/guides/auth).
-- Powerful data access & management tooling on top of PostgreSQL with [Supabase](https://supabase.io/docs/guides/database).
-- Integration with [Stripe Checkout](https://stripe.com/docs/payments/checkout) and the [Stripe customer portal](https://stripe.com/docs/billing/subscriptions/customer-portal), all plumbing already set up.
-- Automatic syncing of pricing plans, and subscription statuses via [Stripe webhooks](https://stripe.com/docs/webhooks).
+- Secure user management and authentication with [Supabase](https://supabase.io/docs/guides/auth)
+- Powerful data access & management tooling on top of PostgreSQL with [Supabase](https://supabase.io/docs/guides/database)
+- Integration with [Stripe Checkout](https://stripe.com/docs/payments/checkout) and the [Stripe customer portal](https://stripe.com/docs/billing/subscriptions/customer-portal)
+- Automatic syncing of pricing plans and subscription statuses via [Stripe webhooks](https://stripe.com/docs/webhooks)
 
 ## Demo
 
@@ -21,15 +21,19 @@ The all-in-one starter kit for high-performance SaaS applications.
 
 ## Deploy with Vercel
 
-The Vercel deployment will guide you through creating a Supabase account and project as well as a Stripe test account and automatically creates the Stripe webhook endpoint for you. After installation of the Supabase and Stripe integrations, all relevant environment variables will be set up so that the project is usable immediately after deployment.
+The Vercel deployment will guide you through creating a Supabase account and project. After installing the Supabase integration, you'll need to configure Stripe with a few simple steps.
 
-**Note:** The Stripe integration is still a work-in-progress.
+**Note:** We're working on our Stripe integration. We've documented the required steps below under "Configure Stripe" until the integration is ready.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&project-name=nextjs-subscription-payments&repo-name=nextjs-subscription-payments&demo-title=Next.js%20Subscription%20Payments%20Starter&demo-description=Demo%20project%20on%20Vercel&demo-url=https%3A%2F%2Fsubscription-payments.vercel.app&demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png&integration-ids=oac_pb1dqJT8Ry2D99Q0o9qXWIhJ,oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-subscription-payments)
+To get started, click the "Deploy with Vercel" button below.
 
-[![Screenshot of Vercel deployment](./public/vercel-deploy.png)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&project-name=nextjs-subscription-payments&repo-name=nextjs-subscription-payments&demo-title=Next.js%20Subscription%20Payments%20Starter&demo-description=Demo%20project%20on%20Vercel&demo-url=https%3A%2F%2Fsubscription-payments.vercel.app&demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png&integration-ids=oac_pb1dqJT8Ry2D99Q0o9qXWIhJ,oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-subscription-payments)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&project-name=nextjs-subscription-payments&repo-name=nextjs-subscription-payments&demo-title=Next.js%20Subscription%20Payments%20Starter&demo-description=Demo%20project%20on%20Vercel&demo-url=https%3A%2F%2Fsubscription-payments.vercel.app&demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-subscription-payments)
 
-Once the project has been deployed, continue with the configuration steps below.
+[![Screenshot of Vercel deployment](./public/vercel-deploy.png)](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnextjs-subscription-payments&project-name=nextjs-subscription-payments&repo-name=nextjs-subscription-payments&demo-title=Next.js%20Subscription%20Payments%20Starter&demo-description=Demo%20project%20on%20Vercel&demo-url=https%3A%2F%2Fsubscription-payments.vercel.app&demo-image=https%3A%2F%2Fsubscription-payments.vercel.app%2Fdemo.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-subscription-payments)
+
+Once the project has deployed, continue with the configuration steps below.
+
+The initial build will fail due to missing Stripe environment variables. After configuring Stripe, redeploy the application.
 
 ## Configure Supabase Auth
 
@@ -39,11 +43,45 @@ You can use third-party login providers like GitHub or Google. Refer to the [doc
 
 ## Configure Stripe
 
+To start developing your SaaS application, we'll need to configure Stripe to handle test payments. For the following steps, make sure you have the "viewing test data" toggle switched to "on."
+
+### Configure webhook
+
+We need to configure the webhook pictured in the architecture diagram above. This webhook is the piece that connects Stripe to your Vercel serverless functions.
+
+First, click the "Add endpoint" button on the [test Endpoints page](https://dashboard.stripe.com/test/webhooks).
+
+Then, set the endpoint URL to `https://your-deployment-url.vercel.app/api/webhooks`.
+
+Next, click the `receive all events` link in the `Events to send` section.
+
+Finally, copy the `Signing secret` as we'll need that in the next step.
+
+### Set environment variables
+
+To securely interact with Stripe, we need to add a few environment variables in the Vercel dashboard.
+
+- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`
+- `STRIPE_SECRET_KEY`
+- `STRIPE_WEBHOOK_SECRET_LIVE`
+
+You can find the first two keys on the [API keys tab](https://dashboard.stripe.com/test/apikeys) in Stripe. The `STRIPE_WEBHOOK_SECRET_LIVE` is the `Signing secret` copied in the previous webhook configuration step.
+
+### Redeploy and Test
+
+We need to redeploy the application so that the latest environment variables are present.
+
+Redeploy your application by going to the deployments tab, finding your deployment, and clicking "redeploy."
+
+Finally, click the `Send test webhook` button and send a `product.created` event. If everything works, you should see a test product in your Supabase database.
+
+After verifying that the configuration is working, delete the test products created via the webhook in Supabase.
+
 ### Create product and pricing information
 
-For Stripe to automatically bill your users for recurring payments, you need to create your product and pricing information in the [Stripe Dashboard](https://dashboard.stripe.com/test/products). When you create or update your product and price information, the changes are automatically synced with your Supabase database.
+For Stripe to automatically bill your users for recurring payments, you need to create your product and pricing information in the [Stripe Dashboard](https://dashboard.stripe.com/test/products). When you create or update your product and price information, the changes automatically sync with your Supabase database.
 
-Stripe Checkout currently supports pricing plans that bill a predefined amount at a specific interval. More complex plans (e.g. different pricing tiers or seats) are not yet supported.
+Stripe Checkout currently supports pricing that bills a predefined amount at a specific interval. More complex plans (e.g., different pricing tiers or seats) are not yet supported.
 
 For example, you can create business models with different pricing tiers, e.g.:
 
@@ -56,29 +94,37 @@ For example, you can create business models with different pricing tiers, e.g.:
 
 ### Configure the Stripe customer portal
 
-1. Set your custom branding in the [settings](https://dashboard.stripe.com/settings/branding).
-1. Configure the Customer Portal [settings](https://dashboard.stripe.com/test/settings/billing/portal).
-1. Toggle on "Allow customers to update their payment methods".
-1. Toggle on "Allow customers to update subscriptions".
-1. Toggle on "Allow customers to cancel subscriptions".
-1. Add the products and prices that you want to allow customer to switch between.
-1. Set up the required business information and links.
+1. Set your custom branding in the [settings](https://dashboard.stripe.com/settings/branding)
+1. Configure the Customer Portal [settings](https://dashboard.stripe.com/test/settings/billing/portal)
+1. Toggle on "Allow customers to update their payment methods"
+1. Toggle on "Allow customers to update subscriptions"
+1. Toggle on "Allow customers to cancel subscriptions"
+1. Add the products and prices that you want
+1. Set up the required business information and links
 
 ### That's it
 
-That's it, you're now ready to earn recurring revenue from your customers 🥳
+That's it. Now you're ready to earn recurring revenue from your customers 🥳
 
 ## Going live
 
-Before going live, make sure you archive all your test mode Stripe products, so you don't end up having a mix of test and live mode products on your page. Before creating your live mode products, make sure to follow the steps below to set up your live mode env vars and webhooks.
+### Archive testing products
+
+Archive all test mode Stripe products before going live. Before creating your live mode products, make sure to follow the steps below to set up your live mode env vars and webhooks.
+
+### Configure production environment variables
+
+To run the project in live mode and process payments with Stripe, modify the environment variables from Stripe "test mode" to "production mode." After switching the variables, be sure to redeploy the application.
+
+To verify you are running in production mode, test checking out with the [Stripe test card](https://stripe.com/docs/testing). The test card should not work.
 
-To run the project in live mode and process real payments with Stripe, you can add the [Stripe Go Live](https://vercel.com/integrations/stripe-live) integration to your project. This will set up your live API keys and webhook secret as environment variables for the production environment.
+### Redeploy
 
-Afterward you will need to rebuild your production deployment for the changes to take effect. Within your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy".
+Afterward, you will need to rebuild your production deployment for the changes to take effect. Within your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy."
 
 ## Develop locally
 
-Deploying with Vercel will have created a repository for you which you can clone to your local machine.
+Deploying with Vercel will create a repository for you, which you can clone to your local machine.
 
 Next, use the [Vercel CLI](https://vercel.com/download) to link your project:
 
@@ -95,7 +141,7 @@ Use the Vercel CLI to download the development env vars:
 vercel env pull .env.local
 ```
 
-This will create a new `.env.local` file in your project folder. For security purposes you will need to set the `SUPABASE_SERVICE_ROLE_KEY` manually from your [Supabase dashboard](https://app.supabase.io/) (Settings > API). Lastly, the webhook secret differs for local testing vs. when deployed to Vercel. Follow the instructions below to get the corresponding webhook secret.
+Running this command will create a new `.env.local` file in your project folder. For security purposes, you will need to set the `SUPABASE_SERVICE_ROLE_KEY` manually from your [Supabase dashboard](https://app.supabase.io/) (Settings > API). Lastly, the webhook secret differs for local testing vs. when deployed to Vercel. Follow the instructions below to get the corresponding webhook secret.
 
 ### Use the Stripe CLI to test webhooks
 
@@ -107,7 +153,7 @@ Next, start the webhook forwarding:
 stripe listen --forward-to=localhost:3000/api/webhooks
 ```
 
-The CLI will print a webhook secret (such as, `whsec_***`) to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file.
+Running this Stripe command will print a webhook secret (such as, `whsec_***`) to the console. Set `STRIPE_WEBHOOK_SECRET` to this value in your `.env.local` file.
 
 ### Install dependencies and run the Next.js client