💵 모바일 웹 결제 기능 ( by iamport )

iamport - 모바일 웹 결제를 참고했습니다.

구현 동기

개발 모드일 때는 모바일로 테스트하기 힘들어서 데스크탑 웹브라우저만을 이용해서 테스트하고 넘어갔습니다.
하지만 AWS-EC2에 배포하고 모바일로 들어가서 결제 기능을 사용해보니 이상하게도 결제 로직은 정상적으로 작동하는데 결제 정보가 DB에 기록되지 않는 문제가 발생했습니다.
이 문제를 해결하기 위해서 iamport 공식 문서를 찾아보면서 모바일 웹 결제 기능을 개발하게 되었습니다.

문제 원인

카카오페이 결제를 기준으로 모바일 웹과 데스크탑 웹은 결제 방식이 조금 다릅니다.
데스크탑 웹의 경우에는 QR코드나 휴대폰 번호/생년월일을 이용해서 카카오톡으로 결제하게 해줍니다.
이렇게 결제하게 되면 웹브라우저는 가만히 있고 다른 곳에서 결제를 처리하고 결과만 받게 됩니다.
그 결제 결과를 IMP.request_pay(data, callback)에서 callback의 첫 번째 인자로 받아서 결제 기록을 DB에 남기도록 구현했습니다. ( 예시에서 rsp가 결제 결과 데이터 )

• 예시

const onPayment = useCallback(
  (pg: "kakaopay" | "tosspay") => () => {
    if (!process.env.NEXT_PUBLIC_IAMPORT_CODE)
      return toast.error("iamport의 가맹점 식별코드가 없습니다.");
    if (!paymentData) {
      toast.error(
        "결제할 상품의 정보가 존재하지 않습니다. 메인 화면으로 이동됩니다."
      );
      return router.push("/");
    }

    // iamport를 사용하기 위해 가맹점 식별코드 등록
    window.IMP.init(process.env.NEXT_PUBLIC_IAMPORT_CODE);
    
    const callback = async (rsp) => {
      if (
        !rsp.buyer_name ||
        !rsp.buyer_addr ||
        !rsp.paid_amount ||
        !rsp.buyer_email ||
        !rsp.buyer_tel ||
        !rsp.pg_provider
      )
        return toast.warning("결제에 필요한 데이터가 부족합니다.");

      if (rsp.success) {
        try {
          // >>> 결제 완료 DB 저장
          await apiService.orderService.apiCreateOrder({
            singleData: rsp.custom_data.singleData,
            orderData: {
              name: rsp.buyer_name,
              address: rsp.buyer_addr,
              residence: rsp.custom_data.residence,
              message: rsp.custom_data.message,
              amount: rsp.paid_amount,
              email: rsp.buyer_email,
              phone: rsp.buyer_tel,
              provider: rsp.pg_provider,
            },
          });

          toast.success(
            "결제가 완료되었습니다. 2초뒤에 결제내역 페이지로 이동합니다.",
            { autoClose: 2000 }
          );

          setTimeout(() => router.push("/information/order"), 2000);
        } catch (error) {
          console.error("error >> ", error);

          if (error instanceof AxiosError) {
            toast.error(error.response?.data.message);
          } else {
            toast.error("알 수 없는 문제로 인해 결제에 실패했습니다.");
          }
        }
      } else {
        toast.error("결제에 실패했습니다. " + rsp.error_msg, {
          autoClose: 2000,
        });
      }
    };

    window.IMP.request_pay({ ...paymentData, pg, pay_method: "card" }, callback);
  },
  [router, paymentData]
);

하지만 모바일 웹으로 접근해서 결제하는 경우에는 휴대폰에 카카오톡이 설치되어 있으므로 어떤 카카오톡 유저가 결제를 원하는지를 판단할 필요 없이 카카오톡으로 바로 들어가서 로그인한 유저에게 결제 요청을 보내게 됩니다.
그렇게 되면 브라우저에서 카카오톡으로 화면 전환이 발생하게 되며 결제를 성공적으로 마치면 결제할 때 입력했던 m_redirect_url을 이용해서 해당 url 리다이렉션 됩니다.

따라서 위 데스크탑 웹에서 결제를 진행했을 때와 다르게 callback이 실행되지 않아 DB에 결제 정보가 등록되지 않는 문제가 발생했던 것입니다.
( 다른 결제 방식을 선택해서 다른 웹사이트나 어플리케이션으로 리다이렉션 되어서 결제를 진행합니다. )

해결 방법

위의 경우를 대비해서 iamport에서 특정 결제에 대한 결과를 얻는 방법을 제공해줍니다.

기본적인 흐름은 아래와 같습니다.
1. m_redirect_url에서 결제 결과를 저장할 url를 지정
2. iamport에서 m_redirect_url로 리다이렉션 할 때 imp_uid와 merchant_uid 값을 query string으로 첨부
3. 해당 url에서 REST API KEY와 REST API SECRET KEY를 이용해서 access_token을 얻음
4. access_token과 imp_uid을 이용해서 특정 결제에 대한 정보를 얻음
5. 얻은 정보를 이용해서 DB에 결제 정보를 기록함
6. 결제 정보 페이지로 리다이렉션 함

공식 페이지에 위와 같은 방식으로 설명이 매우 잘되어 있어서 굳이 코드 예시를 작성하지는 않겠습니다.

다만 토큰과 결제정보를 주고받는 타입과 api 요청 함수들을 첨부하겠습니다.

또한 사용하면서 주의해야 할 점으로 custom_data를 사용하는 경우에는 string 타입이므로 JSON.parse()를 이용해서 파싱하고 사용해야 합니다.

• 토큰과 결제 정보를 얻는 함수

import axios from "axios";

// type
import type {
  // IamportGetTokenBody,
  IamportGetTokenResponse,
  IamportGetPaymentDataBody,
  IamportGetPaymentDataResponse,
} from "@src/types";

const iamportInstance = axios.create({
  baseURL: "https://api.iamport.kr",
  timeout: 10000,
});

/**
 * 2022/09/14 - iamport 엑세스 토큰 발급 받기 - by 1-blue
 * @returns 엑세스 토큰
 */
const apiGetToken = () =>
  iamportInstance.post<IamportGetTokenResponse>(
    `/users/getToken`,
    {
      imp_key: process.env.IAMPORT_REST_API_KEY,
      imp_secret: process.env.IAMPORT_REST_API_SECRET,
    },
    {
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

/**
 * 2022/09/14 - iamport 엑세스 토큰을 이용해 결제 정보 조회 - by 1-blue
 * @returns 결제 정보
 */
const apiGetPaymentData = ({
  imp_uid,
  access_token,
}: IamportGetPaymentDataBody) =>
  iamportInstance.get<IamportGetPaymentDataResponse>(`/payments/${imp_uid}`, {
    headers: { Authorization: access_token },
  });

/**
 * 2022/09/14 - iamport 관련 api 요청 객체 - by 1-blue
 */
const iamportService = {
  apiGetToken,
  apiGetPaymentData,
};

export default iamportService;

• type ( 위에서 import한 타입 )

type RequestPaymentData = {
  amount: number;
  apply_num: string;
  bank_code: string | null;
  bank_name: string | null;
  buyer_addr: string;
  buyer_email: string;
  buyer_name: string;
  buyer_postcode: string;
  buyer_tel: string;
  cancel_amount: number;
  cancel_history: [];
  cancel_reason: string | null;
  cancel_receipt_urls: [];
  cancelled_at: number;
  card_code: string | null;
  card_name: string | null;
  card_number: string | null;
  card_quota: number;
  card_type: string | null;
  cash_receipt_issued: false;
  channel: string;
  currency: string;
  custom_data: string;
  customer_uid: string | null;
  customer_uid_usage: string | null;
  emb_pg_provider: string | null;
  escrow: false;
  fail_reason: string | null;
  failed_at: number;
  imp_uid: string;
  merchant_uid: string;
  name: string;
  paid_at: number;
  pay_method: string;
  pg_id: string;
  pg_provider: string;
  pg_tid: string;
  receipt_url: string;
  started_at: number;
  status: string;
  user_agent: string;
  vbank_code: string | null;
  vbank_date: number;
  vbank_holder: string | null;
  vbank_issued_at: number;
  vbank_name: string | null;
  vbank_num: string | null;
};

/**
 * 2022/09/14 - iamport 엑세스 토큰 요청 송신 타입 - by 1-blue
 */
export type IamportGetTokenBody = {};
/**
 * 2022/09/14 - iamport 엑세스 토큰 요청 수신 타입 - by 1-blue
 */
export type IamportGetTokenResponse = { response: { access_token: string } };
/**
 * 2022/09/14 - iamport 결제 정보 요청 송신 타입 - by 1-blue
 */
export type IamportGetPaymentDataBody = {
  imp_uid: string;
  access_token: string;
};
/**
 * 2022/09/14 - iamport 결제 정보 요청 수신 타입 - by 1-blue
 */
export type IamportGetPaymentDataResponse = { response: RequestPaymentData };