Web Developers : 10-Building a Stripe Customer with Next.js API Routes

Screenshot from the tutorial

Building a Stripe Customer with Next.js API Routes

In today's digital economy, integrating payment processing functionalities into your web applications is a must for any developer. Stripe is one of the most popular payment processing platforms, and Next.js provides a robust framework for building server-side applications. This tutorial will guide you through creating a Stripe customer using Next.js API routes.

Table of Contents

• Prerequisites
• Setting Up Your Next.js Project
• Installing Stripe
• Creating the API Route
• Creating the Frontend Form
• Testing the Integration
• Conclusion

Prerequisites

Before you begin, ensure you have the following:

• A basic understanding of JavaScript and React.
• Node.js and npm installed on your machine.
• A Stripe account. You can sign up for free at Stripe's website.

Setting Up Your Next.js Project

First, you need to set up a new Next.js project. Open your terminal and run the following commands:

npx create-next-app@latest stripe-nextjs
cd stripe-nextjs

This will create a new Next.js application named stripe-nextjs.

Installing Stripe

Next, you need to install the Stripe library. Run the following command in your terminal:

npm install stripe

This command installs the Stripe Node.js SDK, which allows you to interact with the Stripe API.

Creating the API Route

Next, you’ll create an API route to handle the customer creation. In your Next.js project, navigate to the pages/api directory and create a new file called create-customer.js.

// pages/api/create-customer.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const { email } = req.body;
      
      // Create a new customer
      const customer = await stripe.customers.create({
        email,
      });

      // Return the customer object
      res.status(200).json(customer);
    } catch (error) {
      res.status(500).json({ error: error.message });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

In this code:

• We import the Stripe library and initialize it with your secret key.
• We define an API route that only accepts POST requests.
• Upon receiving a POST request, we extract the user's email and create a new customer in Stripe.
• Finally, we return the customer object as a JSON response.

Setting Up Environment Variables

To keep your Stripe secret key secure, use environment variables. Create a .env.local file in the root of your project and add the following line:

STRIPE_SECRET_KEY=your_stripe_secret_key

Replace your_stripe_secret_key with your actual secret key from the Stripe dashboard.

Creating the Frontend Form

Now, let’s create a simple form on the frontend to collect the user's email. Open the pages/index.js file and update it as follows:

// pages/index.js
import { useState } from 'react';

export default function Home() {
  const [email, setEmail] = useState('');
  const [customer, setCustomer] = useState(null);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    const response = await fetch('/api/create-customer', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email }),
    });

    if (response.ok) {
      const data = await response.json();
      setCustomer(data);
      setError('');
    } else {
      const errorData = await response.json();
      setError(errorData.error);
    }
  };

  return (
    <div>
      <h1>Create a Stripe Customer</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Enter your email"
          required
        />
        <button type="submit">Create Customer</button>
      </form>
      {customer && <p>Customer created: {customer.id}</p>}
      {error && <p>Error: {error}</p>}
    </div>
  );
}

In this component:

• We use React's useState to manage the email input, customer data, and error messages.
• When the form is submitted, we make a POST request to our API route.
• If successful, we display the newly created customer ID; if there's an error, we show the error message.

Testing the Integration

To test your integration, run your Next.js application:

npm run dev

Open your browser and navigate to http://localhost:3000. Enter an email address and click "Create Customer." If everything is set up correctly, you should see a success message displaying the newly created customer ID.

Conclusion

Integrating Stripe with Next.js is straightforward, thanks to its powerful API routes. By following this tutorial, you have learned how to create a Stripe customer using a simple form. This basic setup can be expanded to include more complex functionalities, such as payment processing, subscriptions, and more.

Feel free to enhance this implementation further by adding error handling, input validation, and user feedback for a better user experience. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios