import Script from "next/script";

<Script src="<https://cdn.iamport.kr/v1/iamport.js>"></Script>
// layout

Next.JS에서는 script대신 Script를 임포트해서 구현한다.

이유 >> 페이지 렌더링 전에 script를 불러오지 못함. next 자체의 Script를 사용

 const ChargeFunction = (payment : number) => {
    if (!window.IMP) return;
    const { IMP } = window;
    IMP.init("imp56377531");

    IMP.request_pay(
      {
        pg: "kakaopay.TC0ONETIME",
        pay_method: "card", // 생략가
        merchant_uid: `ORD${crypto.randomUUID()}`, // 상점에서 생성한 고유 주문번호
        name: "팜이랑 구독 결제",
        amount: payment,
        buyer_email: "[email protected]",
        buyer_name: "박호철",
        m_redirect_url: "<https://farmirang.com>", // 반드시 리다이렉트 주소 필요
      },
      async function (rsp: any) {
          // callback

          if (rsp.success === true) {
            alert("결제에 성공하였습니다.")
            window.locationF.reload();
          } else {
            //결제 실패
            alert("결제를 실패하였습니다. 다시 시도해주세요")
          }
      }
    );
  };

여기서 IMP가 중요한데,

IMP를 윈도우 단에서 정의해주어야 한다.

// global.d.tsx
interface Window {
    IMP: any;
}