토스 페이먼츠 API를 이용하여 프로젝트 수익 모델 구현해보기

 member: {
          memberEmail: '',
          memberNickName: '',
          memberPhone: '',
          }

model Payment {
  id             String       @id @default(uuid()) //결제 ID
  user        User      @relation(fields: [userId]) //유저 정보
  paymentKey     String?                // 결제의 키 값 (토스제공)
  amount         Int                    // 결제 금액 (토스제공)
  type           PaymentType?           // 결제 타입 정보 (토스제공)
  orderId        String       @unique   // 주문한 결제를 식별하는 역할 (토스제공)
  orderName      String?                // 주문명(토스제공)
  mId            String?                // 상점아이디(MID). 토스페이먼츠에서 발급(토스제공)
  method         String?                // 결제수단(토스제공)
  status         PaymentStatus          // 결제 처리 상태(토스제공)
  requestedAt    String?                // 결제가 일어난 날짜와 시간 정보(토스제공)
  approvedAt     String?                // 결제 승인이 일어난 날짜와 시간(토스제공)
  cardNumber     String?                // 카드번호. 번호의 일부는 마스킹(토스제공)
  cardType       String?                // 카드 종류: 신용, 체크, 기프트, 미확인(토스제공)
  receiptUrl     String?                // 발행된 영수증 url 정보 (토스제공)
  checkoutUrl    String?                // 결제창 url 정보 (토스제공)
  failureCode    String?                // 오류 타입을 보여주는 에러 코드 (토스제공)
  failureMessage String?                // 에러 메시지 (토스제공)
  createdAt      DateTime     @default(now())
  updatedAt      DateTime     @default(now())
}
 
enum PaymentType {
  NORMAL
  BILLING
  BRANDPAY
}
 
enum PaymentStatus {
  READY
  IN_PROGRESS
  WAITING_FOR_DEPOSIT
  DONE
  CANCELED
  PARTIAL_CANCELED
  ABORTED
  EXPIRED
}

const PaymentCheckIndex = () => {
  const router = useRouter();
  const { member } = useMemberStore();
  ...
 
  const handleClick = () => {
    if (!isChecked) return;
    router.push(
      `/payment/check/confirm?customerKey=${member.uid}&totalAmount=1&orderTitle=첫달무료체험이벤트`
    );
  };
  ...
 
  return (
    <div>
      ...
      <div
        onClick={handleClick}
        className={` my-10 py-[18px] w-full rounded-[12px] flex items-center justify-center text-title1
      ${isChecked ? 'cursor-pointer bg-gradient2 text-white' : 'bg-gray100 text-gray300'}
      `}>
        0원 결제하기
      </div>
    </div>
  );
};

const PaymentConfirmPage = () => {
  const { member } = useMemberStore();
  const searchParams = useSearchParams();
  const price = searchParams.get('totalAmount') || '0';
  const orderTitle = searchParams.get('orderTitle') as string;
  const customerKey = searchParams.get('customerKey') as string;
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance['renderPaymentMethods']
  > | null>(null);
 
  useAsync(async () => {
    const paymentWidget = await loadPaymentWidget(clientKey, customerKey);
 
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      '#payment-widget',
      {
        value: parseInt(price),
      },
      { variantKey: 'DEFAULT' }
    );
 
    paymentWidget.renderAgreement('#agreement');
 
    paymentWidgetRef.current = paymentWidget;
    paymentMethodsWidgetRef.current = paymentMethodsWidget;
  }, []);
 
  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;
    if (paymentMethodsWidget == null) {
      return;
    }
    paymentMethodsWidget.updateAmount(parseInt(price));
  }, [price]);
 
  const handleClick = async () => {
    const paymentWidget = paymentWidgetRef.current;
    try {
      const uniqueOrderId = uuidv4();
 
      await paymentWidget
        ?.requestPayment({
          orderId: uniqueOrderId,
          orderName: orderTitle,
          customerName: member.memberNickName,
          customerEmail: member.memberEmail,
          successUrl: 'http://localhost:3000/payment/check/confirm/success',
          failUrl: 'http://localhost:3000/payment/check/confirm/fail',
        })
        .catch(function (error) {
          if (error.code === 'USER_CANCEL') {
            alert('결제가 종료되었습니다.');
          } else if (error.code === 'INVALID_CARD_COMPANY') {
            alert('유효하지 않은 카드 코드입니다.');
          } else {
            alert(error?.message || '문제가 생겼습니다. 다시 시도해주세요');
          }
        });
    } catch (error) {
      console.log(error);
    }
  };
 
  return (
    <Suspense>
      <div className="max-w-2xl mx-auto px-4 my-20">
        <div className="flex flex-col gap-2 mt-4">
          <h1 className="text-lg md:text-2xl font-semibold">확인 및 결제</h1>
          <p className="text-gray-600 mb-4">
            결제 수단을 선택하고 결제를 진행해주세요. 환불금은 예약 취소 후 2~3일 내에 결제한 카드로
            입금됩니다. 동의하시는 경우에만 아래 버튼을 눌러 예약을 결제하세요.
          </p>
          {(paymentWidgetRef === null || paymentMethodsWidgetRef === null) && <LoaderSkeleton />}
          <div id="payment-widget" className="w-full" />
          <div id="agreement" className="w-full" />
          <div
            onClick={handleClick}
            className={` my-10 py-[18px] w-full rounded-[12px] cursor-pointer bg-gradient2 text-white flex items-center justify-center text-heading4`}
          >
            결제하기
          </div>
        </div>
      </div>
    </Suspense>
  );
};

export default async function PaymentSuccess({ searchParams }: ParamsProps) {
  const paymentKey = searchParams.paymentKey;
  const orderId = searchParams.orderId;
  const amount = searchParams.amount;
 
  const data: Payment = await getPayment({
    paymentKey,
    orderId,
    amount,
  });
 
  if (data?.redirect) {
    redirect(data?.redirect?.destination || '/');
  }
 
  return (
    <div>
      <div>//결제 완료 창 렌더링</div>
    </div>
  );
}
 
async function getPayment({ paymentKey, orderId, amount }: PaymentRequestProps) {
  try {
    const { data: payment } = await axios.post<PaymentResponseProps>(
      'https://api.tosspayments.com/v1/payments/confirm',
      {
        paymentKey,
        orderId,
        amount,
      },
      {
        headers: {
          Authorization: `Basic ${Buffer.from(`${process.env.TOSS_CLIENT_SECRET}:`).toString(
            'base64'
          )}`,
        },
      }
    );
 
    if (payment) {
      // 결제 최종 승인 시 내려온 Toss payment 객체 데이터 중
      // 미리 요청한 스키마에 맞게 유저 데이터와 조합하여 백엔드에 post 요청 로직
    }
 
    return {
      payment: payment,
    };
  } catch (err: any) {
    console.log(err);
 
    return {
      redirect: {
        destination: `/payments/fail?code=${err.code}&message=${err.message}&orderId=${orderId}`,
      },
    };
  }
}

const CategoryReportItem = ({ id, title, category, date }: ReportListsItem) => {
  const router = useRouter();
  return (
    <div
      onClick={() => router.push(`/report/${id}`)}
      className="py-5 border-b border-gray100 flex gap-5 items-center cursor-pointer"
    >
      ...
      <div>...</div>
    </div>
  );
};

const handleClick = useCallback(async () => {
  const isLoggedIn = !!localStorage.getItem('access_token');
  if (!isLoggedIn) {
    router.push('/sign');
  } else {
    if (member.subscribe) {
      router.push(`/report/${id}`);
    } else {
      router.push('/payment');
    }
  }
}, [id, member.subscribe, router]);

const useAuthCheck = () => {
  const router = useRouter();
  const { member } = useMemberStore();
 
  const checkAuth = useCallback(
    (premiumRedirectPath: string) => {
      const isLoggedIn = !!localStorage.getItem('access_token');
 
      if (!isLoggedIn) {
        router.push('/sign'); // 로그인 페이지로 이동
      } else if (!member.subscribe) {
        router.push('/payment'); // 구독 결제 페이지로 이동
      } else {
        router.push(premiumRedirectPath); // 프리미엄 기능 접근 허용
      }
    },
    [member, router]
  );
 
  return { checkAuth };
};
 
export default useAuthCheck;
 
/*
 * 사용처
 */
const handleClick = () => {
  checkAuth(`/report/${id}`);
};