DEV Community: MOHSIN ALI SOOMRO

How to create stripe webhook in nextjs 13.4.4.

MOHSIN ALI SOOMRO — Sun, 03 Sep 2023 10:52:23 +0000

As you follow this article, I think you better know about nextjs.

Let's know what a webhook is.

A webhook is a method of automating and integrating data or events between different applications or systems over the internet. It allows one application to send real-time information to another application or service when a specific event or trigger occurs.

Remember points when you work with stripe webhook
Wehbook accept rawbody
It must be post request
Event you should handle.

Let's code.

Create a file route.ts inside a api folder,
api/stripe/webhook/route.ts

import Stripe from "stripe";
import { NextRequest } from "next/server";
import { OrderTable, db } from "@/lib/drizzleOrm";
import { headers } from "next/headers";
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: "2022-11-15",
  typescript: true,
});

export async function POST(request: NextRequest) {
  const body = await request.text();
  const endpointSecret = process.env.STRIPE_SECRET_WEBHOOK_KEY!;
  const sig = headers().get("stripe-signature") as string;
  let event: Stripe.Event;
  try {
    event = stripe.webhooks.constructEvent(body, sig, endpointSecret);
  } catch (err) {
    return new Response(`Webhook Error: ${err}`, {
      status: 400,
    });
  }

  switch (event.type) {
    case "checkout.session.async_payment_failed":
      const checkoutSessionAsyncPaymentFailed = event.data.object;
      break;
    case "checkout.session.async_payment_succeeded":
      const checkoutSessionAsyncPaymentSucceeded = event.data.object;

      break;
    case "checkout.session.completed":
      const checkoutSessionCompleted: any = event.data.object;
      const response1 = await db
        .insert(OrderTable)
        .values({
          userId: checkoutSessionCompleted?.metadata.userId,
          itemCount: 1,
          total: checkoutSessionCompleted?.amount_total as any,
          isComplete: true,
        })
        .returning();
      break;
    default:
      console.log(`Unhandled event type ${event.type}`);
  }
  return new Response("RESPONSE EXECUTE", {
    status: 200,
  });
}

Let's break the code,

await request.text() => this will convert your rawbody to string

It imports necessary modules and initializes the Stripe API with the provided secret key.
It defines an asynchronous function POST(request: NextRequest) that will handle incoming HTTP POST requests.
Inside the function:
- It extracts the request body and the Stripe webhook signature.
- It attempts to construct a Stripe event from the request data using the Stripe library.
- If there's an error during event construction, it returns a 400 Bad Request response with an error message.
It then checks the type of the Stripe event and performs different actions based on the event type:
- For "checkout.session.async_payment_failed," it does nothing specific.
- For "checkout.session.async_payment_succeeded," it does nothing specific.
- For "checkout.session.completed," it inserts an order record into a database table using the Drizzle ORM library.
It logs an error message for any unhandled event types.
Finally, it returns a 200 OK response with the message "RESPONSE EXECUTE" to acknowledge the webhook execution.

When a webhook calls it saves record in database if checkout session complete. For other events you should follow according

Now how to test webhook,
You can test webhook on localhost
https://stripe.com/docs/webhooks
Go to stripe => developer => webhook
https://dashboard.stripe.com/test/webhooks/create
Here you will get test key for localhost

Note: Webhook localhost key and production key are different, localhost key you will get on webhook page, for production get you have to register key webhook, and click on reveal you will get a webhook production key

Thanks for reading

Splitting a PDF file into multiple files using AWS Lambda and Node.js

MOHSIN ALI SOOMRO — Thu, 09 Feb 2023 13:10:43 +0000

import fs from 'fs'
import AWS from 'aws-sdk';
import { PDFDocument } from 'pdf-lib'
const s3 = new AWS.S3();

export const handler = async (event) => {
    console.log({ PDFDocument, event })
    const bucket = event.Records[0].s3.bucket.name;
    const key = event.Records[0].s3.object.key;

    console.log("KEy", { bucket, key, record: JSON.stringify(event) })

    const params = {
        Bucket: bucket,
        Key: key
    }
    const pdf = await s3.getObject(params).promise();

    console.log("PDF BODY", { pdf })

    const pdfDoc = await PDFDocument.load(pdf.Body);
    console.log("event", { bucket, key, pdf })
    const promises = [];
    for (let i = 0; i < pdfDoc.getPages().length; i++) {
        // Create a new "sub" document
        const subDocument = await PDFDocument.create();

        // copy the page at current index
        const [copiedPage] = await subDocument.copyPages(pdfDoc, [i])
        subDocument.addPage(copiedPage);
        const pdfBytes = await subDocument.save()


        const splitFile = key.split('.pdf')[0] + '_' + i + '.pdf';
        console.log("SPLIT NAME",{key:key.split('.pdf')[0] + '_' + i + '.pdf',splitFile})
        promises.push(s3.putObject({
            Bucket:"splitedfile",
            Key: splitFile,
            Body: pdfBytes
        }).promise());
    }

  const response =  await Promise.all(promises);
        console.log("response",{response})
    return {
        message: 'PDF file split and saved to S3 successfully.'
    };
};`

This is an AWS Lambda function written in Node.js which is used to split a PDF file into multiple PDF files, one for each page of the original file.

The code first imports three libraries:

fs (File System): A built-in library in Node.js used to work with the file system of the system on which the code is running. In this code, it is not being used.
AWS (Amazon Web Services) from 'aws-sdk': A library for working with Amazon Web Services. In this code, it is used to interact with Amazon S3 (Simple Storage Service), a cloud-based object storage service.
PDFDocument from 'pdf-lib': A library for working with PDF (Portable Document Format) files. In this code, it is used to load and manipulate PDF files. Then, an instance of the S3 client is created using new AWS.S3(). This instance will be used to interact with the S3 service.

The main logic of the function is inside the handler function. This function will be called when the AWS Lambda is triggered.

The function starts by logging the event object, which is passed as an argument. This event object contains information about the event that triggered the function. In this case, it should contain information about the S3 object that was just created or updated.

Then, the name of the S3 bucket and the key of the object are extracted from the event object. The key represents the path of the object in the S3 bucket.

The function then uses the s3.getObject method to get the contents of the PDF file from the S3 bucket. The method is passed an object with two properties, Bucket and Key, which represent the name of the S3 bucket and the key of the object, respectively.

Once the contents of the PDF file are retrieved, the function uses the PDFDocument.load method to load the PDF document.

The function then creates an array of promises, where each promise represents a task to split one page of the PDF document into a separate file and save it to S3.

For each page in the PDF document, the function creates a new PDF document using the PDFDocument.create method. Then, it uses the copyPages method to copy the page from the original document to the new document. Finally, it uses the save method to save the new document as a new PDF file. The contents of the new file are then uploaded to S3 using the s3.putObject method.

Once all the promises are fulfilled, the function returns a message indicating that the PDF file has been split and saved to S3 successfully.

New Stack Nextjs, Prisma, Typescript and trpc

MOHSIN ALI SOOMRO — Tue, 10 Jan 2023 19:05:10 +0000

Building web applications can be a challenging task, but with the right tools, it can be made much easier. One such toolset is the combination of Next.js, Prisma, TypeScript, TRPC, and MySQL. Together, these technologies offer a powerful and flexible solution for building high-performance web applications.

Next.js is a popular framework for building server-rendered React applications. It provides a set of features that make it easy to build scalable and performant web apps, such as automatic code splitting, hot module replacement, and support for server-side rendering. This makes it ideal for building web apps that need to handle a lot of traffic or have a lot of dynamic content.

Prisma is an Object-Relational Mapping (ORM) tool that makes it easy to work with databases in your TypeScript code. With Prisma, you can define your database schema using a simple data definition language (DDL) and then use that schema to interact with your database using a set of generated TypeScript functions. This removes the need to write raw SQL queries and allows you to interact with your database in an object-oriented way.

TypeScript is a superset of JavaScript that adds optional static typing, making it easier to write maintainable and error-free code. It also includes features like interfaces, classes, and decorators, which can help you to write more elegant and expressive code. With the help of TypeScript, it becomes more easy to refactor the code and maintain it.

TRPC (Transport Layer Security Remote Procedure Call) is a way to make remote procedure calls to backend services over a secure connection. It is a way to send a message from the client to the server and get a response. This makes the communication over network much more secure and reliable.

Finally, MySQL is a popular open-source relational database management system. It is widely used for web and enterprise applications and it offers many features such as triggers, stored procedures, views, and more. With MySQL, you can easily store, retrieve, and manage large amounts of data.

By using these technologies together, you can build web applications that are fast, reliable, and easy to maintain. The combination of Next.js, Prisma, TypeScript, TRPC and MySQL offers a powerful and flexible solution for building high-performance web applications.

In conclusion, using these technologies together can help you create a robust web application that is easy to maintain, performs well, and is more secure and reliable. Whether you're a beginner or an experienced developer, these tools can help you create great web apps quickly and easily.

Bad control character in string literal in JSON at position 190 amplify UI

MOHSIN ALI SOOMRO — Sat, 26 Nov 2022 15:29:35 +0000

This error like a monster in amplify UI library, it takes 2 days to solve it, just replace from "🔒Icon" to "Icon" and boom solved

Reference github issue
https://github.com/aws-amplify/amplify-adminui/issues/658

Make Interactive button using css

MOHSIN ALI SOOMRO — Sun, 03 Jul 2022 07:48:14 +0000

Make interactive button

HTML

  <div className="App">
      <button>button</button>
    </div>

CSS

* {
  padding: 0px;
  margin: 0px;
}
.App {
  font-family: sans-serif;
  text-align: center;
  background-color: #e0e0e0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;
  background-color: #e0e0e0;
  border: none;
  border-radius: 50px;
  width: 200px;
  height: 200px;
}
button:active {
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}

button:focus {
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: inset 20px 20px 60px #bebebe, inset -20px -20px 60px #ffffff;
}

Thanks.

Prefer more precise alternative to the string Types in Typescript

MOHSIN ALI SOOMRO — Sun, 03 Jul 2022 07:29:05 +0000

The domain of string type is big

Suppose you're building music collection and you want to define a type for an album

Attemp:

interface Album{
 artist:string;
 title:string;
 releaseDate:string; //YYYY-MM-DD
 recordingType:string; // "live" or "studio"
}

The prevelance of string types and the type information in comments are strong indications that this interface isn't quite right. Here is what can go wrong.

const kindOfBlue:Album ={
 artist:"Miles Devid",
 title:"Kind of blue",
 releaseDate:"auguest 17th 1959",
 recordingType:"Studio",
}

Problem 1:
Date is not formated
Problem 2:
recordingType Studio is small spell but it is capital.

How to narrow down string and solve these problem?

type RecordingType="studio" | "live"

interface Album{
 artist:string;
 title:string;
 releaseDate:Date; 
 recordingType:RecordingType; 
}

const kindOfBlue:Album ={
 artist:"Miles Devid",
 title:"Kind of blue",
 releaseDate:new Date("1959-08-18"),
 recordingType:"studio",
}

With these changes Typescript is able to do a more thorough check for errors

Make more precise type to error pron the code.

Thanks.

Upload mutiple image component and get base64 format

MOHSIN ALI SOOMRO — Thu, 17 Mar 2022 08:12:50 +0000

Dependencies
react
tailwind
react-icons

import React from "react";
import { AiFillCloseSquare } from "react-icons/ai";

function MultipleImageUploadComponent({ images, setImages }) {
  const handleImageChange = ({ target }) => {
    for (let img of target.files) {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(img);
      fileReader.onload = function () {
        setImages((prev) => [...prev, fileReader.result]);
      };
    }
  };

  const removeImage = (img) => {
    const rmImg = images?.filter((d) => d !== img);
    setImages(rmImg);
  };

  return (
    <div>
      <main className="container mx-auto max-w-screen-lg h-full border border-1 mt-4">
        <article
          aria-label="File Upload Modal"
          className="relative h-full flex flex-col bg-white  rounded-md"
          onDrop={(e) => console.log("onDrop", e)}
          onDragOver={(e) => console.log("onDragOver", e)}
          onDragLeave={(e) => console.log("onDragLeave", e)}
          onDragEnter={(e) => console.log("onDragEnter", e)}
        >
          <div
            id="overlay"
            className="w-full h-full absolute top-0 left-0 pointer-events-none z-50 flex flex-col items-center justify-center rounded-md"
          >
            <i>
              <svg
                className="fill-current w-12 h-12 mb-3 text-blue-700"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
              >
                <path d="M19.479 10.092c-.212-3.951-3.473-7.092-7.479-7.092-4.005 0-7.267 3.141-7.479 7.092-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h13c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408zm-7.479-1.092l4 4h-3v4h-2v-4h-3l4-4z" />
              </svg>
            </i>
          </div>

          <section className="overflow-auto p-8 w-full h-full flex flex-col">
            <header className="border-dashed border-2 border-gray-400 py-12 flex flex-col justify-center items-center">
              <p className="mb-3 font-semibold text-gray-900 flex flex-wrap justify-center"></p>
              <input
                type="file"
                accept="image/*"
                id="file"
                multiple
                className="hidden"
                onChange={handleImageChange}
              />
              <label
                htmlFor="file"
                className="mt-2 rounded-sm px-3 py-1 bg-gray-200 hover:bg-gray-300 focus:shadow-outline focus:outline-none"
              >
                Upload images
              </label>
            </header>

            <h1 className="pt-8 pb-3 font-semibold sm:text-lg text-gray-900">
              To Upload
            </h1>

            {images && images?.length ? (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2  border border-1">
                {images?.map((img) => (
                  <div className="w-full  text-center relative flex flex-row justify-center items-center">
                    <img className="mx-auto w-full h-32" src={img} alt={img} />
                    <span
                      onClick={() => removeImage(img)}
                      className="absolute top-0 right-0 text-purple-500 cursor-pointer"
                    >
                      <AiFillCloseSquare size={20} />
                    </span>
                  </div>
                ))}
              </div>
            ) : (
              <div className="w-full flex justify-center items-center border border-1">
                <img
                  className="text-center w-32 mt-4"
                  src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png"
                  alt="no data"
                />
              </div>
            )}
          </section>
        </article>
      </main>
    </div>
  );
}

export default MultipleImageUploadComponent;

Output

Send email with nodemailer

MOHSIN ALI SOOMRO — Mon, 07 Feb 2022 08:00:18 +0000

Enable these
lesssecure
DisplayUnlockCaptcha

import nodemailer from "nodemailer";
async function sendEmail(to, subject, text) {
  try {
    const transport = nodemailer.createTransport({
      port: 587,
      host: "smtp.gmail.com",
      auth: {
        user: "<Your Email>",
        pass: "<Your Password>",
      },
    });
    const option = {
      from: "<Email>",
      to: to,
      subject: subject,
      text: text,
    };
    const result = await transport.sendMail(option);
    console.log("function", { result });
    return result;
  } catch (error) {
    return error;
  }
}

Track Scroll event in reactjs

MOHSIN ALI SOOMRO — Tue, 25 Jan 2022 12:37:53 +0000

Code...

 import { useState } from "react";
import "./styles.css";

export default function App() {
  const [scroll, setScroll] = useState(0);
  const onScroll = () => {
    const scrollY = window?.scrollY;
    const scrollTop = document.getElementById("test").scrollTop;

    setScroll(scrollTop);
  };
  return (
    <div className="App">
      <h1>Scroll Position {scroll}</h1>
      <div
        id="test"
        onScroll={onScroll}
        style={{
          backgroundColor: "white",
          zIndex: "100",
          height: "200px",
          overflowY: "scroll"
        }}
      >
        content...
      </div>
    </div>
  );
}

Codesandbox

Create Google Application for google Oauth2

MOHSIN ALI SOOMRO — Thu, 23 Dec 2021 09:12:33 +0000

Step for create google app and get client id and secret key

Step 1

Visit this link and login with your email
https://console.cloud.google.com/apis/dashboard

Step 2

Create your project in given link
User Type External

Step 3

Click the option (OAuth consent screen)
Fill these fields
App name : (AppName)
User support email: YourEmail
Authorized domains: Enter this (example.com)
Developer email : (DEV EMAIL)
Publish the app
Leave Rest of the fields

Step 4

Click Crendentials
Click Create Crendentials (Create OAuth client ID)
Application type: Web Applications
Name : AppName
Authorized JavaScript origins : Enter This (https://example.com)
Authorized redirect URIs : https://example.com/

Final

It will give you client id and secret

infinity scroll down reactjs

MOHSIN ALI SOOMRO — Fri, 10 Dec 2021 12:22:11 +0000

Code

import { useCallback, useEffect, useState } from "react";
import "./styles.css";
import InfiniteScroll from "react-infinite-scroll-component";
export default function App() {
  const [state, setState] = useState([]);
  const [data, setData] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [perPage] = useState(20);
  const [currentPage, setCurrentPage] = useState(1);
  const lastIndex = currentPage * perPage;
  const firstIndex = lastIndex - perPage;

  const fetchPost = async () => {
    const json = await fetch("https://jsonplaceholder.typicode.com/posts");
    const result = await json.json();
    setState(result);
  };

  const fetchMore = useCallback(() => {
    setTimeout(() => {
      setCurrentPage(currentPage + 1);
      let d = [...state].slice(firstIndex, lastIndex);
      setData((prev) => [...prev, ...d]);
    }, 1000);
  },[state])

  useEffect(() => {
    fetchPost();
    if (state.length) fetchMore();
  }, []);

  useEffect(() => {
    if (data.length < state.length) {
      setHasMore(true);
    } else {
      setHasMore(false);
    }
  }, [state]);
  console.log({ state, data, lastIndex, firstIndex, currentPage });
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <InfiniteScroll
        dataLength={data.length}
        next={fetchMore}
        hasMore={hasMore}
        loader={<h4>Loading...</h4>}
        scrollableTarget="scrollableDiv"
      >
        {data.length &&
          data.map((post) => {
            return (
              <div
                style={{
                  backgroundColor: "green ",
                  padding: "10px",
                  margin: "10px"
                }}
              >
                {post.title}
              </div>
            );
          })}
      </InfiniteScroll>
    </div>
  );
}

My first job interview question?

MOHSIN ALI SOOMRO — Wed, 08 Dec 2021 13:19:57 +0000

How to get loop throw and structure data.
loop throw questions array and get comments with respect of the questionId and replies with respect of commentId

Example

let data = {
    questions: [
        {
            questionId: 1,
            questionText: "Question 1",
        },
        {
            questionId: 2,
            questionText: "Question 2",
        },
        {
            questionId: 3,
            questionText: "Question 3",
        },
        {
            questionId: 4,
            questionText: "Question 4",
        },
    ],
    comments: [
        {
            commentId: 1,
            questionId: 1,
            commentText: "Comment 1",
        },
        {
            commentId: 2,
            questionId: 1,
            commentText: "Comment 2",
        },
        {
            commentId: 3,
            questionId: 1,
            commentText: "Comment 3",
        },
        {
            commentId: 4,
            questionId: 3,
            commentText: "Comment 4",
        },
        {
            commentId: 5,
            questionId: 2,
            commentText: "Comment 5",
        },
    ],
    replies: [
        {
            commentId: 1,
            replyId: 1,
            replyText: "Reply 1",
        },
        {
            commentId: 2,
            replyId: 2,
            replyText: "Reply 2",
        },
        {
            commentId: 3,
            replyId: 3,
            replyText: "Reply 3",
        },
        {
            commentId: 3,
            replyId: 4,
            replyText: "Reply 4",
        },
        {
            commentId: 5,
            replyId: 5,
            replyText: "Reply 5",
        },
    ],
};

Try yourself to prepare interview if stuck blow is the solution
Desire output:

[
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 1, questionId: 1, commentText: 'Comment 1' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 2, questionId: 1, commentText: 'Comment 2' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 1, questionText: 'Question 1' },
    comments: { commentId: 3, questionId: 1, commentText: 'Comment 3' },
    replies: [ [Object], [Object] ]
  },
  {
    questions: { questionId: 2, questionText: 'Question 2' },
    comments: { commentId: 5, questionId: 2, commentText: 'Comment 5' },
    replies: [ [Object] ]
  },
  {
    questions: { questionId: 3, questionText: 'Question 3' },
    comments: { commentId: 4, questionId: 3, commentText: 'Comment 4' },
    replies: []
  }
]

Solution 👏 👏 👏

function generateOutput(data) {
    const { questions, comments, replies } = data;
    // CODE HERE
    let output = [];
  questions.map((i)=>{
      comments.map((c)=>{
        const reply = replies.filter((r)=>r.commentId===c.commentId)
        if(c.questionId===i.questionId){
          output.push({questions:i,comments:c,replies:reply})
        }
      })
  })
    return output;
}

let output = generateOutput(data);

console.log(output);

Thanks for reading, if it is helpful comment blow with Thanks 😃