Next JS와 Stripe로 스폰서 페이지를 만들어보자

오늘은 Next JS 과 Stripe 으로 스폰서 페이지를 만들어 보겠습니다.

최선을 다하길 바랍니다 🙌

소개

Next JS - Next.js는 서버 측 렌더링 및 정적 웹사이트 생성과 같은 React 기반 웹 애플리케이션 기능을 가능하게 하는 Node.js 위에 구축된 오픈 소스 웹 개발 프레임워크입니다.

Stripe - Stripe는 신용 카드, 디지털 지갑 및 기타 여러 결제 방법을 허용하는 결제 서비스 제공업체입니다.

두 도구 모두 정말 놀라운 것이며 여러분이 좋아할 것이라고 믿습니다.

다음 JS 애플리케이션 설정

React와 마찬가지로 Tailwind CSS를 포함하여 앱 스타일을 지정하는 다음 앱을 만들어 보겠습니다with-tailwindcss.

npx create-next-app -e with-tailwindcss my-sponsors-site

스트라이프 설정

지불을 수락하기 위해 Stripe을 사용할 것입니다. Stripe로 가서 가입/가입합시다.

왼쪽 모서리로 이동하여 애플리케이션용 계정을 만듭니다.

*API 키 가져오기 *

오른쪽 상단의 개발자 탭으로 이동하여 탐색 -

그런 다음 API 키 섹션으로 이동하면 SECRET API 키를 볼 수 있습니다.

안전하게 보관하세요 🔐

짜잔 🎉 이제 1/4 파트를 완성했습니다 🙌

프론트엔드 시대다.

따라서 우리는 간단하고 매끄러운 UI를 사용할 것입니다. 취향에 따라 확실히 변경할 수 있습니다 🍟. 여기에서 디자인을 한 눈에 볼 수 있습니다.

프로젝트 디렉토리로 이동하여 선호하는 텍스트 편집기/IDE를 엽니다

.

pages/index.tsx로 이동하여 return() 아래의 모든 코드를 제거하고 그 안에 <> </> 괄호를 추가합니다. 코드는 다음과 같습니다.

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'

const Home: NextPage = () => {
  return (
    <>

    </>
  )
}

export default Home

섹션을 만들자

<section className="relative flex flex-wrap lg:h-screen lg:items-center font-sans"></section>

내부에 DIV를 추가해 보겠습니다.

<div className="w-full px-4 py-12 lg:w-1/2 sm:px-6 lg:px-8 sm:py-16 lg:py-24"></div>

텍스트를 추가해 보겠습니다.

<div className="max-w-lg mx-auto text-center">
      <h1 className="text-2xl font-bold sm:text-3xl">Sponsor me!</h1>

      <p className="mt-4 text-gray-500">
      Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
</div>

양식 카드 추가

<div className="max-w-md mx-auto mt-8 mb-0 space-y-4">
      <div>
        <label  className="sr-only">Enter amount (USD)</label>

        <div className="relative">
          <input
            type="number"
            className="w-full p-4 pr-12 text-sm border-gray-200 rounded-lg shadow-md"
            placeholder="Enter amount (USD)"
            onChange={e => setAmount(parseInt(e.target.value) * 100)}
          />

          <span className="absolute inset-y-0 inline-flex items-center right-4 text-gray-400">
            $
          </span>
        </div>
      </div>

      <div className="flex items-center justify-between">
        <p></p>
        <button
          className="inline-block px-5 py-3 ml-3 text-sm font-medium text-white bg-blue-500 rounded-lg"
          onClick={checkoutSession}
          disabled={!amount}
          role="link"
        >
          Sponsor
        </button>
      </div>
    </div>

이 React 상태를 애플리케이션에 추가하고

const [amount, setAmount] = useState<number | null>(0)

새로운 모습 🎉

이미지 추가

컨테이너 DIV 외부와 </section>의 닫는 태그 바로 위에 또 다른 DIV를 생성해 보겠습니다.

 <div className="relative w-full h-64 sm:h-96 lg:w-1/2 lg:h-full bg-cover">
    <img
      className="absolute inset-0 object-cover w-full h-full"
      src="bg.webp"
      alt="BG"
    />
  </div>

이미지 출처 - Dribbble

홈페이지 최종 모습🙌


짜잔 🎉 이제 2/4 파트가 끝났습니다 🙌

Stripe 체크아웃 설정

이 패키지를 설치하십시오

npm i axios @stripe/stripe-js stripe

// OR

yarn add axios @stripe/stripe-js stripe

사용자가 버튼을 클릭하자마자 Stripe를 사용하여 체크아웃을 수행할 예정입니다🤩 기대되시죠?

우선 가장 중요한 것을 설정해야 합니다.

환경 변수 설정

.env.local 파일을 생성하고 SECRET API 키를 저장할 수 있습니다. 변경 사항을 커밋할 때 저장소로 푸시되지 않으므로 .env 파일에 저장하는 이점이 있습니다.

STRIPE_SECRET_KEY="stripe secret key"
NEXT_PUBLIC_STRIPE_PUBLIC_KEY="stripe publishable key"

Make sure to restart the server after adding values in the .env.local file

API 엔드포인트 설정

Stripe로 결제를 처리하기 위한 API를 만들어 봅시다. 따라서 pages/api 안에 checkout.js 로 새 파일을 만듭니다.

그리고 다음 코드를 추가합니다.

const stripe = require("stripe")(`${process.env.STRIPE_SECRET_KEY}`);
import { NextApiRequest, NextApiResponse } from "next";


const paymentHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  const { amount } = req.body;
  const url = "http://localhost:3000";

  const items = [
    {
      price_data: {
        currency: "usd",
        product_data: {
          name: `Sponsoring SnowBit`,
        },
        unit_amount: amount,
      },
      quantity: 1,
    },
  ];

  const session = await stripe.checkout.sessions.create({
    line_items: items,
    mode: "payment",
    success_url: `${url}/success`,
    cancel_url: url,
  });

  res.status(200).json({ id: session.id });
};

export default paymentHandler;

프런트 엔드에 API 구현

함수를 만들어보자

  const checkoutSession = async () => {
    const stripe = await stripePromise;
    const checkoutSession = await axios.post("/api/checkout", {
      amount: amount,
    });

    const result = await stripe?.redirectToCheckout({
      sessionId: checkoutSession.data.id,
    });

    if (result?.error) {
      alert(result?.error.message);
    }
  };

이 두 가지를 Next 애플리케이션으로 가져오기

import { loadStripe } from "@stripe/stripe-js";
import axios from "axios";

stripePromise를 추가할 시간입니다.

const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY!);

이제 결제가 작동합니다 🎉

성공 페이지 만들기

파일success.tsx을 만들고 다음 코드를 추가합니다.

const ThankYou = () => {
    return (
      <div className="flex justify-center items-center h-screen">
        <h1 className="text-4xl mx-auto animate-bounce font-bold">
          Thank you for supporting!  
        </h1>
      </div>
    );
  };

  export default ThankYou;

짜잔 🎉 이제 막 3/4 파트를 마쳤습니다 🙌

테스트

Stripe Testing Cards을 사용하여 결제 테스트

짜잔 🎉 4/4파트 완료 🙌

결론

짜잔! 이제 스폰서 페이지를 만들었습니다.

중요한 링크

GitHub Repository

Twitter를 통해 언제든지 저에게 연락해 주세요 -

🌏 연결하자

GitHub

Stay tuned for the next article. Stay safe and Happy Coding!

내 콘텐츠가 즐거웠고 도움이 되었으면 이것을 확인하십시오.


표지 이미지 출처 - Dribbble