Skip to main content

Initiate Deployment

Use the "Vercel Deploy Button" to start. This process creates a new GitHub repository, sets up a Supabase project, and initializes the database schema.

Manual Setup (If Automatic Fails)​

  • Create a Supabase account and project.
  • In the project, use the SQL editor to add stripe-payment template if the deploy button fails.

Configure Auth​

  • In Supabase, go to auth > URL configuration.
  • Set your production URL (e.g., https://your-deployment-url.vercel.app) as the site URL.
  • In Vercel, add a Production environment variable named NEXT_PUBLIC_SITE_URL with the same URL.

Optional Steps​

  • Redirect Wildcards: Add wildcard URL in Supabase auth settings for deploy previews.
  • OAuth Providers: Configure and add third-party login providers in the Auth component page.
  • Supabase Environment Variables: If not set by Vercel integration, manually add them in Vercel deployment settings.

Configure Stripe​

  • Create a Stripe webhook in "Test Mode."
  • Set the endpoint URL and select all events.
  • Add Stripe environment variables in Vercel.

Redeploy with New Env Vars​

Redeploy in Vercel to apply new settings.

Set Up Products and Prices in Stripe​

  • Use the Stripe Dashboard to create product and pricing information.
  • Optionally, use Stripe CLI fixtures to bootstrap test data.

Configure Stripe Customer Portal​

  • Set branding and customer portal settings.
  • Add products, prices, and business information.

Develop Locally​

  • Clone the GitHub repository.
  • Link the project using Vercel CLI.
  • Set environment variables with Vercel CLI.
  • Test webhooks with Stripe CLI.
  • Install dependencies and run the Next.js client.

Prepare for Live Mode​

  • Archive test mode products in Stripe.
  • Set up production environment variables.
  • Redeploy for live mode.
  • Test with Stripe's production mode.

Follow these steps methodically to ensure a successful deployment and configuration of your project.