타입 정의 공유드립니다.

[seongjoojin]

안녕하세요. 사내에서 해당 라이브러리를 사용 중인데 타입이 정의 안되어있다고 나와서 혹시나 도움 도움되실까봐 내부적으로 정의한 타입 공유드립니다.

사내에서는 @types/iamport-react-native 안에 index.d.ts파일에 타입 정의하였습니다.

declare module 'iamport-react-native' {
  import * as React from 'react';
  export type IMP_CARRIERS = 'SKT' | 'KTF' | 'LGT' | 'MVNO';
  export type IMP_PG =
    | 'html5_inicis'
    | 'inicis'
    | 'uplus'
    | 'kcp'
    | 'kcp_billing'
    | 'nice'
    | 'jtnet'
    | 'kakao'
    | 'kakaopay'
    | 'danal'
    | 'danal_tpay'
    | 'kicc'
    | 'settle'
    | 'mobilians'
    | 'payco'
    | 'eximbay'
    | 'paypal'
    | 'naverco'
    | 'naverpay'
    | 'smilepay'
    | 'chai'
    | 'payple'
    | 'alipay';

  export type IMP_PAY_METHOD =
    | 'card'
    | 'trans'
    | 'vbank'
    | 'phone'
    | 'samsung'
    | 'kpay'
    | 'cultureland'
    | 'smartculture'
    | 'happymoney'
    | 'booknlife'
    | 'kakaopay'
    | 'lpay'
    | 'payco'
    | 'ssgpay'
    | 'tosspay';

  export type IMP_CURRENCY = 'KRW' | 'USD' | 'EUR' | 'JPY';

  // 속성 참고 https://docs.iamport.kr/tech/imp?lang=ko#callback
  export interface IIMPCallbackRsp {
    success: boolean;
    error_code: string;
    error_msg: string;
    imp_uid: string;
    merchant_uid: string;
    pay_method: string;
    paid_amount: string;
    status: string;
    name: string;
    pg_provider: string;
    pg_tid: string;
    buyer_name: string;
    buyer_email: string;
    buyer_tel: string;
    buyer_addr: string;
    buyer_postcode: string;
    custom_data: object;
    paid_at: number;
    receipt_url: string;
    apply_num?: string;
    vbank_num?: string;
    vbank_name?: string;
    vbank_holder?: string;
    vbank_date?: number;
  }
  export class Certification extends React.PureComponent<{
    userCode: string;
    tierCode?: string;
    data: {
      merchant_uid?: string;
      company?: string;
      carrier?: IMP_CARRIERS;
      name?: string;
      phone?: string;
      min_age?: string;
      app_scheme?: string;
    };
    callback: (rsp: IIMPCallbackRsp) => void;
    loading?: object;
  }> {}
  // 속성 참고 https://docs.iamport.kr/tech/imp?lang=ko#param
  export class Payment extends React.PureComponent<{
    userCode: string;
    tierCode?: string;
    data: {
      pg?: IMP_PG;
      pay_method?: IMP_PAY_METHOD;
      currency?: IMP_CURRENCY;
      notice_url?: string | string[];
      display?: {card_quota?: number};
      merchant_uid: string;
      amount: string[] | number[];
      buyer_tel: string;
      app_scheme: string;
      escrow?: boolean;
      name?: string;
      tax_free?: number;
      buyer_name?: string;
      buyer_email?: string;
      buyer_addr?: string;
      buyer_postcode?: string;
      custom_data?: object;
      vbank_due?: string;
      popup?: boolean;
      digital?: boolean;
      m_redirect_url?: string;
      biz_num?: string;
    };
    callback: (rsp: IIMPCallbackRsp) => void;
    loading?: object;
    handleInicisTrans?: (event: any) => void;
    open3rdPartyApp?: (iamportUrl: any) => void;
  }> {}
}

prop type로 정의한 부분을 거의 참조하였고 없는 타입은 홈페이지를 참고하였습니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

말씀하신대로 저희 모듈이 타입스크립트로 만들어져있지 않아 type 정의가 되어 있지 않은데, 정확한 개발 일정은 정해지지 않았지만, 향후 타입스크립트 모듈로 전환하려고 계획하고 있습니다.

작성하신 내용은 다른 유저분들께서 개발에 참고 하실 수 있을 것 같습니다. 더 나은 모듈 개발을 위해 기여해주셔서 감사합니다.

[seongjoojin]

답변 감사합니다 👍

react-native-render-html의 경우에는 4.2.x 버전 이후로 아래와 같이 타입 정의를 하여서 유저들에게 제공해주기도 하여서 만약 시간이 없으시다면 아래의 방법도 나쁘진 않은거 같습니다.

https://github.com/archriss/react-native-render-html/blob/master/types/react-native-render-html/index.d.ts

좋은 라이브러리 만들어주셔서 감사합니다. :)

[seongjoojin]

안녕하세요. 해당 라이브러리에 대한 타입 정의를 제가 DefinitelyTyped에 기여하여서 정의하여서 여기 이슈에 남겨드립니다.

https://www.npmjs.com/package/@types/iamport-react-native

타입 정의는 아래의 링크에서 보실 수 있습니다. https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/iamport-react-native/index.d.ts

혹시나 틀린 부분이 있으시면 피드백주시면 반영해두겠습니다. 감사합니다.

[IngyuTae]

@seongjoojin 기여 감사합니다! 다만 일부 PG사들은 모바일 결제 시 m_redirect_url 콜백 형태로 전달되는 듯 합니다.

(예: 카카오페이)

{
  "error_msg": "[결제포기] 사용자가 결제를 취소하셨습니다",
  "imp_success": "false",
  "imp_uid": "imp_111111111111",
  "merchant_uid": "mid_1111111111111"
}

인증결제-2.2.c-예외 부분과 관련있는 것 같은데요, @SoleeChoi 확인 부탁드려도 될까요? PG사마다 처리 방법이 다르더라도 콜백 파라미터는 일관성 있게 호출되면 좋을듯 합니다.

[SoleeChoi]

안녕하세요 아임포트 기술지원팀입니다.

말씀하신대로 PG사와 결제 환경에 따라 결제 프로세스 완료 후 콜백 함수가 호출되는 경우와 m_redirect_url로 301 리디렉션 되는 경우가 다릅니다. 이러한 혼선을 방지하기 위해 iamport-react-native 모듈은 모든 경우에 대해 콜백 함수가 호출되도록 자체 로직을 작성해놓았습니다.

다만, 콜백 함수로 전달되는 결제 결과 response 오브젝트가 PG사나 결제수단에 따라 다를 수가 있습니다. 본래는 imp_success(현재는 deprecated됨. 전달은 되지만 이 값에 따라 로직을 처리하는 것은 피해야함), imp_uid, merchant_uid, error_msg, error_code 등만 제공했었지만 고객의 편의에 따라 특정 상황에서 값을 추가해달라는 요청이 있어 조금씩 살을 붙여왔으니 자세한 내용은 IMP.request_pay - rsp 객체를 참고해주세요.

감사합니다.

[IngyuTae]

@SoleeChoi 답변 감사합니다. imp_success가 deprecated 되었다고 하셨는데요, KG이니시스(html5) 및 카카오페이 테스트 결과 callback 함수가 호출되긴 하지만 rsp 객체가 아닌 m_redirect_url 형태의 파라미터만 넘어오는것 같습니다. ("iamport-react-native": "^1.5.2") 다날의 경우 정상적으로 rsp 객체가 넘어옵니다.

예제

const PaymentScreen = () => {
  const callback: PaymentProps['callback'] = (response) => {
    console.log('PaymentResult', response);
  };

  const data: PaymentData = {
    pay_method: 'card',
    name: 'iamport',
    merchant_uid: `mid_${new Date().getTime()}`,
    amount: 1004,
    buyer_tel: '01012345678',
    buyer_email: '',
    app_scheme: 'example',
  };

  return (
    <SafeAreaView style={styles.container}>
      <IMP.Payment userCode="imp11111111" loading={<View />} data={data} callback={callback} />
    </SafeAreaView>
  );
};

결과(성공)

PaymentResult {"imp_success": "true", "imp_uid": "imp_726568717083", "merchant_uid": "mid_1600741568435"}

결과(취소)

PaymentResult {"error_msg": "[결제포기] 사용자가 결제를 취소하셨습니다", "imp_success": "false", "imp_uid": "imp_224473200128", "merchant_uid": "mid_1600741472777"}

[seongjoojin]

@IngyuTae

안녕하세요 피드백 주셔서 감사합니다.

위의 제시해주신 callback값을 참고로 imp_success를 추가하고 callback의 나머지 값들도 값이 안 내려와도 대응 될 수 있도록 타입을 수정하여서 풀리퀘스트를 요청한 상황입니다.

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/47882

감사합니다.