Stripe OAuth with Next.js 14

Setting up Stripe Connect

1. Go to Connect in your Stripe account.
2. Click Get started with Connect.

3. Open up Complete your platform profile and click Start.

4. You will then be prompted with a few questions. For Platform profile select the option that applies to you. We will be selecting Other and click Continue.

5. Select Not applicable. You do not plan to process payments through Stripe, you only use financial services and click Continue.

6. Then complete the last step of setting up the platform profile and click Submit.

Get Stripe environmental variables

These are the Stripe environmental variables we want to get to add into our Next.js project.

NEXT_PUBLIC_BASE_URL=http://localhost:3001
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_*** 
STRIPE_SECRET_KEY=sk_test_***
NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID=ca_*** 

1. NEXT_PUBLIC_BASE_URL will be either your localhost url path for development and you actual url path in production.

2. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and STRIPE_SECRET_KEY can be found in your Developers -> API keys path.

2. Go to Onboarding options from the Connect settings. Make sure you are on the OAuth tab. Your NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID will be located there. You will also need to Enable OAuth. And Add URI.

Setting up your Next.js project

1. Add the Stripe environmental variables to your projects .env file.

2. You will need to call the url below to redirect to the Stripe OAuth.

'use client';

import React from 'react';

import Link from 'next/link';

import { Button } from '@/components/ui/button';
import { Icon } from '@iconify/react';

export default function IntegrationsPage() {
  const url = `https://dashboard.stripe.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_STRIPE_OAUTH_CLIENT_ID}&scope=read_write&redirect_uri=${process.env.NEXT_PUBLIC_BASE_URL}`;

  return (
    <div className="mt-8">
      <div className="flex flex-col space-y-10 pb-14">
        <h1 className="text-2xl font-semibold">Integrations</h1>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
          <div className="border rounded-md  flex flex-col p-6 bg-white">
            <div className="mb-3">
              <Icon icon="logos:stripe" width="48" height="48" />
              <p className="text-slate-500 leading-5">
                Connect your stripe account to sync your data in Finances.
              </p>
            </div>

            <Button
              asChild
              className="bg-[#635BFF] duration-100 hover:bg-[#564ef1]"
            >
              <Link href={url}>Connect Stripe</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}