NUXT Vue 타입스크립트를 이용한 카카오페이 연동 2탄(실무기록)

이전 글 링크

https://asdf1326.tistory.com/4

NUXT Vue 타입스크립트를 이용한 카카오페이 연동 1탄

 

이전에 이제 승인요청 부분을 진행하여 이어가도록 하겟당.

kakaopay/index.vue 로돌아와서 로직을 처리해주자!

<template>
  <div>

  </div>
</template>
<script lang="ts">
import {Component, Vue} from "nuxt-property-decorator";
import ServerUrlDefines from '~/common/defines/serverUrlDefines';
import PurchaseRequestType, {PurchaseResultType} from "~/common/type/purchaseInfoType";
import {PaymentAgentType} from "~/common/type/paymentAgentType";
import {siteStore} from "~/store";
import {KakaoPayCompleteRequestDtoUtils} from "~/common/api/service/payment/kakaopay/dto/kakaoPayCompleteDto";
import {kakaoPayApi} from "~/common/api/service/payment/kakaopay/KakaoPayApi";
import {kakaoPayReadyUtils} from "~/common/api/service/payment/kakaopay/dto/kakaoPayReadyDto";
import NotificationStoreUtils from "~/store/utils/NotificationStoreUtils";

export class KakaoPayIndexUtils {
  static KeyOrderNo = 'orderNumber';
  static keyTid = 'tid';
  static KeyPurchaseResult = 'naverPayPurchaseResult';

  static setOrderNo(orderNo: string): void {
    sessionStorage.setItem(this.KeyOrderNo, orderNo);
  }

  static removeOrderNo(): void {
    sessionStorage.removeItem(this.KeyOrderNo);
  }

  static getOrderNo(): string | null {
    return sessionStorage.getItem(this.KeyOrderNo);
  }

  static payType(payType: string): void{
    sessionStorage.setItem('payType',payType);
  }

  static getPayType(): string | null{
    return sessionStorage.getItem('payType');
  }

  static setTid(tid: string): void{
    sessionStorage.setItem(this.keyTid,tid);
  }

  static getTid(): string | null{
    return sessionStorage.getItem(this.keyTid);
  }

  static removeTid(): void {
    sessionStorage.removeItem(this.keyTid);
  }

  static setPurchaseResult(request: PurchaseRequestType): void {
    sessionStorage.setItem(this.KeyPurchaseResult, JSON.stringify(request));
  }

  static removePurchaseResult(): void {
    sessionStorage.removeItem(this.KeyPurchaseResult);
  }

  static getPurchaseResult(): PurchaseRequestType | null {
    const jsonString = sessionStorage.getItem(this.KeyPurchaseResult);

    return jsonString ? JSON.parse(jsonString) : null;
  }

}

@Component({ name: 'kakaopay' })
export default class extends Vue {
  orderNo: string | null = null;
  tid: string | null = null;
  purchaseRequest: PurchaseRequestType | null = null;
  pgtoken: string | null = '';
  payType: string | null = null;

  mounted(): void {
    const query: string = window.location.search;
    const param = new URLSearchParams(query);
    const pgtoken = param.get('pg_token');

    this.pgtoken = pgtoken;

    this.orderNo = KakaoPayIndexUtils.getOrderNo();
    KakaoPayIndexUtils.removeOrderNo();

    this.tid = KakaoPayIndexUtils.getTid();
    KakaoPayIndexUtils.removeTid();

    this.purchaseRequest = KakaoPayIndexUtils.getPurchaseResult();
    KakaoPayIndexUtils.removePurchaseResult();

    this.payType = KakaoPayIndexUtils.getPayType();


    this.completePayment();
  }

  async completePayment(): Promise<void> {
    const completeRequest = KakaoPayCompleteRequestDtoUtils.createDto(this.tid, this.orderNo!, this.pgtoken!, this.payType!);

    try {
      sessionStorage.removeItem('payBack');
      const response = await kakaoPayApi.KakaoPayComplete(completeRequest);

      const purchaseResult = new PurchaseResultType(this.orderNo!, PaymentAgentType.KakaoPay, this.purchaseRequest!);

      siteStore.updatePurchaseResult(purchaseResult);


      siteStore.setPurchaseRequest(this.purchaseRequest!);

      await this.$router.push('/buy/complete');
    } catch (e) {
      const error = e as Error;
      console.log(error.message);
      const errMsg = error.message.substring(error.message.indexOf('-')+1, error.message.indexOf('-')+4);
      sessionStorage.removeItem('payBack');
      if(errMsg && error.message.includes('code')){
        alert(kakaoPayReadyUtils.errMessage(errMsg));
        const backPage =  sessionStorage.getItem('buyBackPage');
        location.href = `${ServerUrlDefines.wwwServer}${backPage}`;
      }else{
        alert(error.message);
        const backPage =  sessionStorage.getItem('buyBackPage');
        location.href = `${ServerUrlDefines.wwwServer}${backPage}`;
      }

    }
  }

}

</script>

 

카카오페이 index.vue 에는 카카오페이로 백엔드가 요청할때 필요한 값들을 셋팅하여 던져준다~

직접 결제 요청을 진행하면 스므스 하게 잘진행이된다. 이것으로 코인에 개발일기 끄읏~