DEV Community: Levi Schouten

Building a Payment Flow in Next.js 13 Using Stripe, Mailsender, and Webhooks

Levi Schouten — Wed, 02 Aug 2023 10:33:53 +0000

Introduction:
In my latest project, WanderKit.net, users can effortlessly generate personalised itineraries for their upcoming trips using AI. To enhance the user experience and provide a seamless journey, I decided to implement a payment flow feature. This would allow users to purchase the generated itineraries and have them securely stored in our database, enabling easy access and integration with their calendars. In this blog, I'll walk you through the process of setting up the payment flow using Stripe, integrating with Mailsender for confirmation emails, and handling webhooks for successful payments.

Requirements:
Before starting, ensure you have the following API keys from Stripe, obtained after signing up for their services. Use the test keys during development:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=""
STRIPE_SECRET_KEY=""
STRIPE_WEBHOOK_SECRET=""

Creating the Checkout Endpoint:
The first step was to create a checkout endpoint on the server-side. This endpoint creates a checkout session and returns it to the client.

// src/app/api/checkout/route.ts

import Stripe from "stripe";
import { NextResponse } from "next/server";

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || "", {
  apiVersion: "2022-11-15",
});

export async function POST(req: Request) {
  try {
    const body = await req.json();

    if (!body.itineraryId) {
      throw new Error("Missing itinerary_id");
    }

    const params: Stripe.Checkout.SessionCreateParams = {
      submit_type: "pay",
      payment_method_types: ["card"],
      mode: "payment",
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: {
              name: "Itinerary",
            },
            unit_amount: 100,
          },
          quantity: 1,
        },
      ],
      metadata: {
        itinerary_id: body.itineraryId,
      },
      success_url: `${process.env.URL}/success?itineraryId=${body.itineraryId}`,
      cancel_url: `${process.env.URL}/`,
    };

    const checkoutSession: Stripe.Checkout.Session =
      await stripe.checkout.sessions.create(params);

    return NextResponse.json({ result: checkoutSession, ok: true });
  } catch (error) {
    console.error(error);
    return NextResponse.json(
      { message: "something went wrong", ok: false },
      { status: 500 }
    );
  }
}

Client-Side Payment Handling:
On the client-side, I implemented a handle payment function connected to a button. This function calls the previously created endpoint with the necessary data (in this case, the itinerary). Upon response, it redirects the user to the checkout page, handling any potential errors.

export default function Home() {
  // ...

  const handlePayment = async () => {
    try {
      if (!itinerary) {
        throw new Error("Something went wrong");
      }

      const response = await fetch("api/checkout/", {
        method: "post",
        body: JSON.stringify({ itineraryId: itinerary.id }),
      });

      const json = await response.json();

      if (!json.ok) {
        throw new Error("Something went wrong");
      }

      const stripe = await getStripe();

      if (!stripe) {
        throw new Error("Something went wrong");
      }

      await stripe.redirectToCheckout({ sessionId: json.result.id });
    } catch (error) {
      toast("Failed to start transaction", "Please try again.");
    }
  };

  return (
    // ...
    <Button onClick={handlePayment}>Purchase</Button>  
    // ...
  )

}

Setting Up Webhooks:
Webhooks are essential for receiving real-time updates from Stripe once the payment is successful. It ensures we process the payment confirmation securely. Stripe verifies its signature by parsing the raw string rather than the request body. In the webhook, I checked if the event type was checkout.session.completed, and if so, I updated the database accordingly and sent the user a verification email using Mailsender.

// src/app/api/webhooks/checkout/route.ts

import Cors from "micro-cors";
import { headers } from "next/headers";
import { NextResponse } from "next/server";

const stripe = require("stripe")(process.env.STRIPE_PRIVATE);

const cors = Cors({
  allowMethods: ["POST", "HEAD"],
});

const secret = process.env.STRIPE_WEBHOOK_SECRET || "";

export async function POST(req: Request) {
  try {
    const body = await req.text();

    const signature = headers().get("stripe-signature");

    const event = stripe.webhooks.constructEvent(body, signature, secret);

    if (event.type === "checkout.session.completed") {
      if (!event.data.object.customer_details.email) {
        throw new Error(`missing user email, ${event.id}`);
      }

      if (!event.data.object.metadata.itinerary_id) {
        throw new Error(`missing itinerary_id on metadata, ${event.id}`);
      }

      updateDatabase(event.data.object.metadata.itinerary_id);
      sendEmail(event.data.object.customer_details.email);

    }

    return NextResponse.json({ result: event, ok: true });
  } catch (error) {
    console.error(error);
    return NextResponse.json(
      {
        message: "something went wrong",
        ok: false,
      },
      { status: 500 }
    );
  }
}

Testing Locally:
To test the payment flow locally, I installed the Stripe CLI https://stripe.com/docs/stripe-cli and added a script to the package.json file. Running "stripe:listen" ensures that webhooks are directed to our local project while developing. I could then click through the app, proceed with a test payment (in test mode using a provided credit card number), and verify that the webhook was triggered.

"stripe:listen": "stripe listen --forward-to localhost:3000/api/webhooks/checkout"

Manually trigger a webhook with the following command, adding whatever parameters you need for testing.

stripe trigger checkout.session.completed --add checkout_session:metadata.itinerary_id=123

Setting Up Webhooks for Production:
After successful testing, I configured a new webhook in the Stripe developer dashboard for the production environment, ensuring the smooth operation of the payment flow in the live system. https://dashboard.stripe.com/webhooks

Conclusion:
By integrating Stripe, Mailsender, and webhooks into my Next.js 13 app, WanderKit.net now offers users a convenient payment flow to purchase their AI-generated itineraries. The entire process is secure and efficient, providing travelers with an unforgettable journey planning experience!

Checkout the live product at wanderkit.net, read my other blogs on levischouten.net

Plan Your Dream Trip with Wanderkit.net: A Behind-the-Scenes Look

Levi Schouten — Tue, 01 Aug 2023 21:42:39 +0000

Hey there! I'm excited to share my latest project, wanderkit.net, where you can create personalised travel itineraries using AI. Whether you're a seasoned explorer or a newbie to travel planning, Wanderkit is here to make your trip unforgettable.

The Magic Behind Wanderkit: The Technologies I Used

Now, let me show you the tools that made Wanderkit possible:

Next.js: Powering a Smooth Experience
Wanderkit runs on Next.js, a cool framework that ensures everything works smoothly and lets us build things quickly. With Vercel hosting, we could easily put it all together and launch the site without any trouble. I experimented with using Next.js 13 with the app directory and will be writing a separate blog on my findings.

MongoDB: Our Trusty Database Partner
Storing data is essential, and that's where MongoDB comes in. It's easy to set up and lets us make changes without having to deal with any database migrations. So I can focus on developing.

OpenAI: The Magic of Personalised Recommendations
OpenAI is used for generating the actual itineraries. It was the most developed, well documented and stable option.

Stripe: Safe and Easy Payments
Making payments should be worry-free, and Stripe is the go-to for secure transactions. It's a well-known payment system that keeps your financial info safe and makes paying for your trip a breeze. I will be writing a separate blog on integrating Stripe with Next.js.

Mailersend: Staying Connected
Communication is key, and Mailersend helps us stay in touch with you. Sending emails and updates is simple, thanks to this handy tool. It came with a generous free tier and an easy setup.

Tailwind CSS: Making Things Look Awesome
For a stylish look, we used Tailwind CSS. It helps us create a beautiful design with ease. I have absolutely fallen in love with the utility approach of Tailwind CSS. I like having my CSS close to my HTML, allowing me to see how everything is styled in one go. It's fast, no CSS-in-JS overhead. Easy setup. And it comes with an amazing build in design system, especially the colours.

Start Your Adventure with wanderkit.net

Now that you know the magic behind Wanderkit, come and check it out at Wanderkit. Your dream itinerary is just a few clicks away! As we keep improving the site, we'd love to hear your feedback and ideas for new features.

If you're curious about the nitty-gritty, take a peek at our project's code on GitHub (https://github.com/levischouten/wanderkit-net). We're excited to have you join us on this amazing journey of travel and technology.

Get ready to plan the trip of a lifetime with wanderkit.net. Happy travels, adventurers! 🌍✈️

My personal website: www.levischouten.net

Three Underrated VS Code Extensions That Can Save You Lots of Time

Levi Schouten — Fri, 19 May 2023 09:03:10 +0000

Visual Studio Code (VS Code) is a popular code editor known for its flexibility and extensive marketplace of extensions. While many developers are aware of the essential extensions, there are some hidden gems that can greatly enhance productivity and save valuable time. In this blog post, we will explore three underrated VS Code extensions that you might not be using yet but should definitely consider adding to your toolkit.

Multiple cursor case preserve

Link: Multiple cursor case preserve

Working with multiple cursors in VS Code is a powerful feature, but it often poses challenges when maintaining proper casing. When modifying occurrences of a word in multiple places, the camel case tends to break, causing inconsistencies. The Multiple cursor case preserve extension comes to the rescue by preserving the original casing. With this extension, you can ensure consistent and accurate casing changes across your code, as shown in the example below:

Template String Converter

Link: Template String Converter

Converting regular strings to template strings can be a tedious task. The Template String Converter extension simplifies this process by automatically converting regular strings to template strings when you type ${. This time-saving feature eliminates the need for manual conversion. Take a look at the demo below to see it in action:

Bracket Padder

Link: Bracket Padder

The Bracket Padder extension might not be well-known, but it offers a valuable time-saving capability. As the name suggests, it automatically adds whitespace padding for bracket pairs. This small enhancement greatly improves code readability and makes it easier to identify the boundaries of blocks and statements. The following animation demonstrates the Bracket Padder extension in action:

Conclusion:
These three underrated VS Code extensions can significantly enhance your coding workflow and save you precious time. The Multiple Case Preserve extension ensures consistent casing changes when working with multiple cursors. The Template String Converter automates the conversion of regular strings to template strings, reducing manual effort. Lastly, the Bracket Padder adds whitespace padding for bracket pairs, enhancing code readability. Give these extensions a try and see how they can boost your productivity. If you have any other recommendations for VS Code extensions, please tweet them at me @levischoute. Happy coding!

My personal website levischouten.net
My Twitter @levischoute

Streamlining Blog Creation: My Experience Writing a Bash Script as a Web Developer

Levi Schouten — Sun, 30 Apr 2023 13:01:40 +0000

As a web developer, I must admit that I have never delved much into bash scripting. It just never seemed necessary for my work. However, recently, I launched my personal website, and all of the content is written in markdown files. Since I'm the one responsible for maintaining the content, I decided to make the process of creating new blogs easier by writing a script.

I could have written the script in TypeScript or JavaScript like the rest of the project. Still, I felt this was an excellent opportunity to learn bash scripting, as the script only had to execute a set of CLI commands with minimal logic in between. In this post, I want to share my experience of writing my first bash script as a web developer.

To start, I added the she-bang at the top of the script to ensure it was executed using the bash shell, followed by comments explaining what the script would do. Next, I set the '-e' option to instruct bash to exit the script immediately if any command has a non-zero exit status, and the '-u' option to ensure that every variable is defined before it is used. (Learn more about that here)

#!/bin/bash

# Create a new blog post
# Usage: ./scripts/create-blog.sh "My New Blog Post"

# Exit if any subcommand fails
set -e

# Exit if any variable is uninitialized
set -u

Then came the actual script. I defined a few variables that the blog required, such as the title (which we get from the CLI), the date (which we generated based on the current date), and the filename (which we got by turning the title into kebab case).

# Get the title from the command line
title=$1

# Get the current date
date="$(date +%Y-%m-%d)"

# Create the file name
filename=$(echo $title | tr " " "-" | tr "[:upper:]" "[:lower:]")

With these variables defined, I was ready to create the blog. First, I made sure the file did not already exist. Then, I created the actual blog, making use of all the variables we defined earlier. Finally, I created a folder where we would store all the assets related to the blog.

if test -f "content/blogs/$filename.md"; then
  echo "File already exists"
  exit 1
fi

echo "---
title: "\"$title\""
excerpt: \"Short description of the post\"
coverImage: \"/assets/blogs/$filename/cover.jpg\"
date: \"$date\"
---

Write your content here...

" >> "content/blogs/$filename.md"

echo "Created content/blogs/$filename.md"

if [ ! -d "public/assets/blogs/$filename" ]; then
  mkdir -p "public/assets/blogs/$filename";
  echo "Created public/assets/blogs/$filename for blog assets"
fi

And voila! The script was complete. I learned a lot about bash scripting by building this simple script, and it has definitely opened up the doors for me to start automating many more tasks using bash. If you're interested in seeing that process, be sure to keep an eye out for this blog, or follow me on Twitter, where I'll be posting about my future findings.

Thank you for taking the time to read about my experience. I hope this post has been helpful to any developers out there who, like me, may be hesitant to dip their toes into bash scripting. Feel free to reach out if you have any questions or if you see room for improvement, I am always eager to learn!

Source code: Github

Personal website: levischouten.net

Socials: Twitter

A Deep Dive into the Tech Stack of My Personal Website

Levi Schouten — Tue, 25 Apr 2023 16:40:35 +0000

I'm excited to announce the launch of my personal website, and for my first blog post, I want to walk you through the technology stack that I used to build it.

The main purpose of my website is to publish content, primarily blogs at the moment. To ensure good SEO and performance, I needed a framework that could handle static site generation. After some research, I chose Next.js, a React-based framework, due to its excellent features, good documentation, and easy integration with Vercel, my hosting platform of choice.

For styling, I used Tailwind, which comes with a great design system out of the box, along with a utility first approach which I really like. Plus, it's great for performance since it compiles to vanilla CSS.

To add animations to my website, I used Framer Motion. Although my current animations are straightforward, I plan to implement more ambitious ones in the future and want to get comfortable using Framer Motion.

All of my content is written in Markdown, which is more than enough since this project is not handed off to a non-technical person. To simplify the process of creating new blogs, I wrote a bash script.

Finally, I deployed the entire project to Vercel with just a few clicks, thanks to the integration with Next.js. I've been enjoying Vercel because it's easy to set up and provides pipelines, analytics, insights, and logs with minimal configuration.

Overall, I'm thrilled with the technology stack I chose for my personal website. It provides me with the flexibility and features I need to publish content efficiently and effectively. I look forward to using these technologies and tools more in the future to improve my website even further.

I plan on sharing more blogs about my experiences working with these and other technologies so be sure to follow my profile or checkout my socials.

The source code can be found on Github.

Take a look at the live result here: https://www.levischouten.net/