Next.js | 아임포트 정기 결제(5) ( with TypeScript ) | 모바일 웹앱 환경에서 결제하기(KCP)

kcp 를 쓰고 m_redirect_url을 지정해주면 모바일 웹앱 환경에서는 빌링키를 받을 때 콜백 함수가 실행이 되질 않는다..

하지만 이 방법을 쓰면 어떤 환경이든 다 가능하게끔 만들었다!

검색을 해보니 내가 redirect url 로 지정한 주소에 ?imp_uid="" 이런식으로 파라미터로 넘겨준다고 한다. 바로 방법이 떠올랐다.

1. Next.js 에서 쓸 수있는 SSR 로 해당 파라미터를 읽는다.
2. useEffect로 파라미터가 넘겨졌을때의 로직을 구성해준다.( 파라미터가 없을 경우엔 실행이 안되게끔)
3. 파라미터로 넘겨졌을때의 라우터는 이전에 써왔던 것들과 동일하다.

1. 페이지들의 라우팅을 관리해주는 파일의 getServerSideProps 에서 파라미터를 읽는 부분을 추가해주자.

export const getServerSideProps: GetServerSideProps = async (context) => {
  const imp_uid = context.query.imp_uid ? context.query.imp_uid : "";
  const merchant_uid = context.query.merchant_uid ? context.query.merchant_uid : "";
  
  ...

이런식으로 imp_ud와 merchant_uid를 받고 구독을 신청하는 페이지까지 전달해준다. ( 컴포넌트끼리의 props 전달은 블로그에 있는 다른 글을 참조 바랍니다. )

 

abc.com/view/category?imp_uid="1234" 이런식으로 넘어오면 props에 "1234"라는 데이터가 들어올 것이고 아니면 "" 빈 스트링으로 올 것이다. 이걸 활용해보자.

 

2. useEffect 로 파라미터를 감지해서 빈 스트링이 아닐 때 이전에 콜백함수에 담겨있던 로직을 실행해준다.

interface LoginData {
    loginData: any
}

const Subscribe: NextPage<LoginData> = (props: any) => {

    useEffect(() => {
        if (props.imp_uid !== "" && props.merchant_uid !== "") {
            var merchant_uid_date = moment().format('YYYY-MM-DD_HH:mm:ss');
            axios.post('/api/subscribe/payments', {
                muser_id: loginData.userId, // 로그인 아이디
                radioItem: radioItem, // 구독 개월 수 라디오 버튼
                merchant_uid: "subscribe_" + merchant_uid_date,
                customer_uid: loginData.userCompanyCode + "_" + loginData.userId,
                name: "기본정기결제",
                amount: 500
            }).then(({ data }) => {
                console.log("data : ", data)
                if (data.success) {
                    // 성공할 경우
                    alert('구독신청이 완료되었습니다. 다시 로그인해주세요.')
                    router.push('/');
                }
                else {
                    // 실패할 경우
                    alert('내용을 다시확인해주세요.')
                }
            })
        }
    }, [props])
    
    ...

 

이제 모바일로 접속했을 때 빌링키를 받고 redirect 되고, 파라미터를 받아 useEffect 로 결제 신청을 하는 것까지 완료되었다.

아임포트 웹훅으로 정기결제 예약까지 완성되었다.

아임포트의 관리자 콘솔에서 정기결제예약 스케줄을 확인할 수 있다. 

 

---

참고로 m_redirect_url에 먼저 내가 원하는 파라미터를 넣어도 좋다. 페이지가 리렌더링 되기 때문에 기존의 상태값들은 초깃값으로 넘어가기 때문에 원하는 값도 같이 전달하고 싶으면 아래와 같은 방법으로 해주면 좋다.

m_redirect_url: 'abc.com/view/subscribe?subscribe_item=' + subscribeItem