[React] 25.04 기준 신규버전 카카오페이 연동하기

 

새로 하는 프로젝트에 카카오페이가 들어가게 됐다. 기존에 했던거 복붙 하려했는데, 문서 읽어보니 카카오 디벨로퍼스에서 카카오페이 디벨로퍼스로 빠지면서 결제 API연동 방식 신규버전이 생긴것 같았다. 

 

 

---

 

계정생성

카카오페이 | 개발자센터

카카오페이 개발자센터 계정이 없어서 일단 계정부터 만들어줬다. 

 

 

 

 

사전등록

애플리케이션 등록

아이콘 이미지와 앱 이름을 넣어서 등록한다.

 

 

 

Secret key(dev)발급

새로 만들어진 애플리케이션을 선택한 후 하단에 Secret key(dev) 발급 버튼을 누른다.

 

 

플랫폼등록

애플리케이션 - 플랫폼에 들어가서 Web부분에 테스트할 주소를 입력한다.

나는 localhost:3300으로 입력했다.

 

 

* 꼭 http부터 입력해 주어야한다.

http://36.46.31.221 (O)
http://localhost:8080/ (O)
http://127.0.0.1 (O)
https://example (X)
ftp://hello.world (X)
https://example.com/path1 (X) (path, query string, hash 허용하지 않음)
https://https://example.com (X)
https://example.com/path1?key1=value1#hash (X) (path, query string, hash 허용하지 않음)
https://example.com/ (X)
https://*.com (X)

 

 

이렇게 하면 디벨로퍼스 센터에서 설정할 사전작업들은 끝

 

---

연동하기 (테스트 기준)

결제준비

카카오페이 결제를 시작하기 위해 결제정보를 카카오페이 서버에 전달하고 결제 고유번호(TID)와 URL을 응답받는 단계입니다. 

 

• Secret key를 헤더에 담아 파라미터 값들과 함께 POST로 요청합니다.
• 요청이 성공하면 응답 바디에 JSON 객체로 다음 단계 진행을 위한 값들을 받습니다.
• 서버(Server)는 tid를 저장하고, 클라이언트는 사용자 환경에 맞는 URL로 리다이렉트(redirect)합니다.

 

 

import axios from 'axios'
import { config } from '../../components'
import { log } from '../../tools'

const TestKakaoPage = () => {
  const { REQUEST_URL, SECTRET_KEY, RETURN_URL } = config.constant.KAKAO
  
  const handleClick = async () => {
    try {
      const headers = {
        Authorization: 'SECRET_KEY ' + SECRET_KEY,
      }

      const payload = {
        cid: 'TC0ONETIME', // 가맹점코드
        partner_order_id: 'order1234', // 가맹점 주문번호
        partner_user_id: 'YI_SEVERANCE', // 가맹점회원id
        item_name: '초코파이', 
        quantity: 1,
        total_amount: 2200,
        tax_free_amount: 0, 
        approval_url: RETURN_URL, 
        fail_url: RETURN_URL, 
        cancel_url: RETURN_URL,
      }

      log.info('결제 등록 요청에 담긴 payload:', payload)
      
      const response = await axios.post(REQUEST_URL, payload, { headers })
      const mobileURL = config.constant.IS_PRODUCTION
        ? response.data.next_redirect_mobile_url // 사용자 모바일 환경
        : response.data.next_redirect_pc_url // pc 테스트용

      const tid = response.data.tid
      console.log(tid)
      setLocalStorage('tid', JSON.stringify(tid))

      location.href = mobileURL

    } catch (error) {
      log.error('API 호출 오류:: ', error)
    }
  }

  return (
    <div>
      <h2>테스트 Kakao</h2>
      <button onClick={handleClick}>요청</button>
    </div>
  )
}

export { TestKakaoPage }

 

import axios from 'axios'
import { useEffect, useState } from 'react'
import { config } from '../../components'
import { getLocalStorage, hasLocalStorage, queryParamToObject } from '../../tools'

const TestKakaoIngPage = () => {
  //http://localhost:3300/payment/kakao/ing?pg_token=토큰값
  const param = location.search
  const decodeKey = queryParamToObject(param)
  const { pg_token: pgToken } = decodeKey
  const { APPROVE_URL, PARKING_ADMIN_KEY } = config.constant.KAKAO
  const [status, setStatus] = useState('')
  
  useEffect(() => {
    if (!pgToken || !hasLocalStorage('tid')) {

      return
    }

    const fetchData = async () => {
      const headers = {
        Authorization: 'SECRET_KEY ' + PARKING_ADMIN_KEY,
      }

      const payload = {
        cid: 'TC0ONETIME', // 가맹점코드
        tid: getLocalStorage('tid'),
        partner_order_id: 'order1234', // 가맹점 주문번호 
        partner_user_id: 'YI_SEVERANCE', // 가맹점회원id
        pg_token: pgToken,
      }

      const response = await axios.post(APPROVE_URL, payload, { headers })

      setStatus(response.status)
    }

    fetchData()
  }, [decodeKey])

  return (
    <div>
      카카오페이 승인페이지
      {status === 200 && <p>성공</p>}
    </div>
  )
}

export { TestKakaoIngPage }

 

/**
*
* https://devtalk.kakao.com/t/msg-authentication-doesn-t-complete-code-701/114140
*카카오페이 테스트 결제 구현 중 발생한 에러 문의 (“msg”:“authentication doesn’t complete!”,“code”:-701)
*안녕하세요. 카카오페이 입니다.
*말씀하신 오류의 경우, 사용자인증완료전 승인요청(approve)가 인입되어 발생되는 현상이 맞습니다.
*다만 테스트 CID의 경우, 결제수단 선택후, 비밀번호인증/페이스인증 등이 skip 되어 진행되기때문에,
*내부인증완료 처리진행 approve요청이 들어올경우 드물게 발생하는 현상일 수있습니다.
*운영시에는 발생되지 않는점 참고부탁드립니다.
*감사합니다.
*/

 

 

 

 

참고

- https://developers.kakaopay.com/docs/getting-started/api-common-guide/prepare

- https://developers.kakaopay.com/docs/payment/online/single-payment