728x90
반응형

일반 결제는 한 번의 결제로 끝나지만 정기 결제같은 경우는 한 번의 결제로 빌링키를 받아와 다음 결제일을 예약하는 방법으로 해야한다.

  1. 예약 결제를 여러번 걸어둔다.
  2. 아임포트 웹훅을 이용해 다음 결제를 예약한다.

사실상 두가지 방법 모두 가능하다. 다만 첫 번째 방법은 반복문으로 구현하기 때문에 어렵지 않지만 추가해준 수 만큼 나중에 정기 결제를 취소할 경우 여러번 취소를 해주어야 한다.

 

그래서 나는 아임포트 웹훅을 사용한 정기결제를 이용해보기로 했다.

 

먼저 당연한 말이지만 아임포트에 회원가입을 하고 관리자 콘솔로 들어가 가맹점 식별코드, api key, api secret key 등 정보를 메모해두고 pg사를 원하는 곳으로 설정해준다.

 

1. _app.tsx 에 Head를 추가해주고 iamport 관련 script를 추가해준다.

_app.tsx

import "../styles/globals.css";
import Theme from "../styles/Theme"
import type { AppProps } from "next/app";
import { NextPage } from "next";
import React from "react";
import Head from "next/head";

const MyApp: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => {
  return (
    <React.StrictMode>
      <Head>
        <script
          type="text/javascript"
          src="https://code.jquery.com/jquery-1.12.4.min.js">
        </script>
        <script
          type="text/javascript"
          src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js">
        </script>
      </Head >
      <Component {...pageProps} />
    </React.StrictMode>
  );
};
export default MyApp;

 

2. 결제를 하고자 하는 컴포넌트에 다음과같이 window.IMP가 가능하게끔 해준다.

import { useEffect, useReducer, useState } from "react";
declare const window: typeof globalThis & {
    IMP: any;
};

 

3. 구독하기 버튼을 구현해준다. ( 디자인은 무시하셔도 됩니다. )

                <WrapperDiv ju={`center`} margin={`10vh 0 0 0`}>
                    <Button
                        width={`80%`}
                        kindOf={`login`}
                        onClick={subscribeItemClickHandler}
                    >
                        구독하기
                    </Button>
                </WrapperDiv>

 

4. 버튼 클릭 이벤트 함수를 만들어준다.

    const subscribeItemClickHandler = (e: any) => {
        var IMP = window.IMP;
        IMP.init(process.env.NEXT_PUBLIC_IMP_CODE); // iamport 가맹점 식별코드
        IMP.request_pay({
            pg: 'kcp_billing',
            pay_method: 'card', // 'card'만 지원됩니다.
            merchant_uid: "order_monthly_0001", // 상점에서 관리하는 주문 번호
            name: '최초인증결제',
            amount: 500, // 결제창에 표시될 금액. 실제 승인이 이뤄지지는 않습니다. (PC에서는 가격이 표시되지 않음)
            customer_uid: 'your-customer-unique-id', // 필수 입력.
            buyer_email: 'iamport@siot.do',
            buyer_name: '아임포트',
            buyer_tel: '02-1234-1234',
            m_redirect_url: '{모바일에서 결제 완료 후 리디렉션 될 URL}' // 예: https://www.my-service.com/payments/complete/mobile
        }, function (rsp: any) {
            if (rsp.success) {
                alert('빌링키 발급 성공');
            } else {
                alert('빌링키 발급 실패');
            }
        });
    }

 

이제 버튼을 클릭하면 다음과 같은 화면을 볼 수 있다. ( 웹에서 모바일화면으로 볼 경우 )

728x90
반응형

'Front-End > Next.js' 카테고리의 다른 글

Next.js | 아임포트 정기 결제(3) ( with TypeScript ) | 아임포트 웹훅 사용하기  (0) 2022.05.17
Next.js | 아임포트 정기 결제(2) ( with TypeScript ) | 백엔드에서 토큰 인증받고 결제 요청하기  (0) 2022.05.16
Next.js | 사용자 접속 IP 확인하기  (0) 2022.03.11
Next.js | 세션(express-session)과 토큰(jwt)을 사용한 중복 로그인 방지 ( 기존 사용자 로그아웃 여부 확인)  (0) 2022.03.07
Next.js | eslint plugin 설정하기  (0) 2022.02.24

+ Recent posts

티스토리툴바