[React] 카카오 페이(결제 승인)

결제 수단 선택을 끝으로 결제 요청 단계를 마치면 결제 준베 단계에서 정한 approval_url로 redirect된다. 결제 승인은 결제 준비 페이지와 구분되는 새로운 페이지를 작성해서 진행하겠다.

BrowserRouter

새로운 페이지로 redirect 시키기 위해 react-router-dom모듈의 BrowserRouter라는 컴포넌트를 사용할 거다. 다음의 명령으로 react-router-dom를 설치하자.

npm i react-router-dom

설치가 완료되면 다음의 코드처럼 Router에 url과 컴포넌트를 설정한다.

App.js

import React from "react";
import PayReady from "./PayReady";
import PayResult from "./PayResult";
import { BrowserRouter, Route } from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      // BrowserRouter가 url에 따라 설정된 컴포넌트를 반환시킨다.
      <BrowserRouter>
        <Route path="/" exact={true} component={PayReady} />
      // 결제 승인이 진행될 PayResult를 설정한다.
        <Route path="/payresult" component={PayResult} />
      </BrowserRouter>
    );
  }
}
export default App;

PayReady.js파일을 src 디렉토리에 추가하자.
이전에 결제 준비에 썼던 코드를 그대로 옮겨와서 응답으로 받는 tid를 localstrorage에 저장하는 코드가 추가됐다. 결제 승인 API에 매개변수로 함께 줘야하는 값이라 tid를 저장해 놓자. redirect될 url들도 PayResult가 불리도록 수정한다.

PayReady.js

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

class PayReady 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,
      // router에 지정한 PayResult의 경로로 수정
      approval_url: "http://localhost:3000/payresult",
      fail_url: "http://localhost:3000/payresult",
      cancel_url: "http://localhost:3000/payresult",
    },
  };

  componentDidMount() {
    const { params } = this.state;
    axios({
      url: "/v1/payment/ready",
      method: "POST",
      headers: {
        Authorization: "KakaoAK de0e3076b485b703b1f1a4a2419440e6",
        "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
      },
      params,
    }).then((response) => {
      const {
        data: { next_redirect_pc_url, tid },
      } = response;

      console.log(next_redirect_pc_url);
      console.log(tid);
      // localstorage에 tid 저장
	  window.localStorage.setItem("tid", tid);
      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 PayReady;

결제 승인 API

사용자가 선택한 결제에 대해 승인을 해줘야 결제가 완료된다. 다음과 같이 PayResult.js를 src 디렉토리에 추가하자.

PayResult.js

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

class PayResult extends React.Component {
  constructor(props) {
    super(props);
    const { params } = this.state;
    const {
      location: { search },
    } = props;

    // url에 붙어서 온 pg_token을 결제 API에 줄 params에 할당
    params.pg_token = search.split("=")[1];
  }

  state = {
    params: {
      cid: "TC0ONETIME",
      // localstorage에서 tid값을 읽어온다.
      tid: window.localStorage.getItem("tid"),
      partner_order_id: "partner_order_id",
      partner_user_id: "partner_user_id",
      pg_token: "",
    },
  };

  componentDidMount() {
    const { params } = this.state;

    axios({
      url: "/v1/payment/approve",
      method: "POST",
      headers: {
        Authorization: "KakaoAK de0e3076b485b703b1f1a4a2419440e6",
        "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
      },
      params,
    }).then((response) => {
      // 결제 승인에 대한 응답 출력
      console.log(response);
    });
  }

  render() {
    return (
      <div>
        <h2>Result page</h2>
      </div>
    );
  }
}
export default PayResult;