[React] 카카오 페이(결제 준비)

카카오 로그인과 마찬가지로 create-react-app로 프로젝트를 생성하고 불필요한 파일을 지운 상태로 시작하겠다.

Proxy 설정

주의!
프록시 설정을 하지 않을 경우 CORS 이슈가 발생할 수 있다.

클라이언트에서 바로 REST API 요청을 보내면 도메인이달라서 CORS가 발생할 수 있다. 어떤 브라우저에서는 발생하지 않는다고도 한다는데 확인하지는 못했다.
카카오 페이 REST API를 제공하는 서버 도메인으로 타겟 도메인을 설정해줘서 CORS 정책을 우회한자.
package.json에 아래의 코드를 추가하자.

package.json

{
  "proxy": "https://kapi.kakao.com",
    ...
}

클라이언트에서는 localhost:3000으로 요청을 보내지만 로컬 서버가 kakao의 서버로 대신 API를 전달해 준다.

결제 준비 API

요청은 axios로 보내도록 하자. fetch도 시도를 해봤지만 200 OK인데도 then에서 받은 응답에서 원하는 data를 찾지 못해서 axios로 하기로 했다.

App.js

import React from "react";
import axios from "axios";

class App extends React.Component {
  state = {
    // 응답에서 가져올 값들
    next_redirect_pc_url: "",
    tid: "",
    // 요청에 넘겨줄 매개변수들
    params: {
      cid: "TC0ONETIME",
      partner_order_id: "partner_order_id",
      partner_user_id: "partner_user_id",
      item_name: "초코파이",
      quantity: 1,
      total_amount: 2200,
      vat_amount: 200,
      tax_free_amount: 0,
      approval_url: "http://localhost:3000/",
      fail_url: "http://localhost:3000/",
      cancel_url: "http://localhost:3000/",
    },
  };

  componentDidMount() {
    const { params } = this.state;
    axios({
      // 프록시에 카카오 도메인을 설정했으므로 결제 준비 url만 주자
      url: "/v1/payment/ready",
      // 결제 준비 API는 POST 메소드라고 한다.
      method: "POST",
      headers: {
        // 카카오 developers에 등록한 admin키를 헤더에 줘야 한다.
        Authorization: "KakaoAK de0e3076b485b703b1f1a40123456789",
        "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
      },
      // 설정한 매개변수들
      params,
    }).then((response) => {
      // 응답에서 필요한 data만 뽑는다.
      const {
        data: { next_redirect_pc_url, tid }
      } = response;

      console.log(next_redirect_pc_url);
      console.log(tid);
      // 응답 data로 state 갱신
      this.setState({ next_redirect_pc_url, tid });
    });
  }

  render() {
    const { next_redirect_pc_url } = this.state;

    return (<div>
      <h2>Pay page</h2>
      <a href={ next_redirect_pc_url }>
        { next_redirect_pc_url }
      </a>
      </div>);
  }
}
export default App;

출력되는 링크로 가면 모의 결제를 진행한다.

결제 준비 과정

결제가 완전히 완료되려면 결제 승인 API가 필요하다.

redirect된 페이지의 qr코드를 카카오톡이나 카카오페이로 스캔하자.
스캔한 스마트 폰은 결제 수단을 선택하는 페이지로 이동한다.
테스트하던 pc의 브라우저는 결제 대기 화면으로 이동된다.

아래가 결제 대기 화면이다.

다음은 스마트 폰의 결제 수단 선택 화면이다. 모의 결제이므로 지출은 생기지 않는다.

결제 수단을 선택하고 인증을 마치면 결제 대기 화면에서 결제 준비 API에 우리가 넘겨준 approval_url로 redirect 된다. 이때 url에 쿼리 스트링으로 pg_token이라는 토큰을 함께 준다.

이 토큰을 다시 결제 승인 API에 실어서 카카오페이에 결제 승인 요청을 보내야 결제가 완료된다.