Webpack import 문제

[CHANMYUNG]

안녕하세요. create-react-app 2.1.1 버전으로 생성한 React 프로젝트에 bootpay를 적용해보려고 하는데, npm install bootpay-js로 bootpay 모듈을 다운받고

import BootPay from 'bootpay-js'

처럼 별다른 작업 없이 바로 사용하려하니 오류가 발생하네요. 사용하는 방법이 따로 있는건지 궁금합니다.

아래는 코드입니다.

import React, { Component } from 'react';
import BootPay from 'bootpay-js'
import './App.css';

class App extends Component {

  pay() {
    //실제 복사하여 사용시에는 모든 주석을 지운 후 사용하세요
    console.log(React);
    console.log(BootPay)
    BootPay.request({
      price: '1000', //실제 결제되는 가격
      application_id: "5bfc1def396fa67aecd7c85e",
      name: '블링블링 마스카라', //결제창에서 보여질 이름
      pg: 'inicis',
      method: 'phone', //결제수단, 입력하지 않으면 결제수단 선택부터 화면이 시작합니다.
      show_agree_window: 0, // 부트페이 정보 동의 창 보이기 여부
      items: [
        {
          item_name: '나는 아이템', //상품명
          qty: 1, //수량
          unique: '123', //해당 상품을 구분짓는 primary key
          price: 1000, //상품 단가
          cat1: 'TOP', // 대표 상품의 카테고리 상, 50글자 이내
          cat2: '티셔츠', // 대표 상품의 카테고리 중, 50글자 이내
          cat3: '라운드 티', // 대표상품의 카테고리 하, 50글자 이내
        }
      ],
      user_info: {
        username: 'username',
        email: 'email@email.com',
        addr: 'address',
        phone: '010-5114-6224'
      },
      order_id: '123412341234', //고유 주문번호로, 생성하신 값을 보내주셔야 합니다.
      params: { callback1: '그대로 콜백받을 변수 1', callback2: '그대로 콜백받을 변수 2', customvar1234: '변수명도 마음대로' },
      account_expire_at: '2018-05-25', // 가상계좌 입금기간 제한 ( yyyy-mm-dd 포멧으로 입력해주세요. 가상계좌만 적용됩니다. )
      extra: {
        expire_month: '12', // 정기걸제 시 사용됨, 정기결제가 적용되는 개월 수, 미설정시 12개월
        vbank_result: 1, // 가상계좌 사용시 사용, 가상계좌 결과창을 볼지(1), 말지(0), 미설정시 봄(1)
        quota: '0,2,3' // 결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용

      }
    }).error(function (data) {
      //결제 진행시 에러가 발생하면 수행됩니다.
      console.log('error');
      console.log(data);
    }).cancel(function (data) {
      //결제가 취소되면 수행됩니다.
      console.log('canceled');
      console.log(data);
    }).ready(function (data) {
      // 가상계좌 입금 계좌번호가 발급되면 호출되는 함수입니다.
      console.log('ready');
      console.log(data);
    }).confirm(function (data) {
      //결제가 실행되기 전에 수행되며, 주로 재고를 확인하는 로직이 들어갑니다.
      //주의 - 카드 수기결제일 경우 이 부분이 실행되지 않습니다.
      console.log('confirmed');
      console.log(data);
    }).close(function (data) {
      // 결제창이 닫힐때 수행됩니다. (성공,실패,취소에 상관없이 모두 수행됨)
      console.log('closed');
      console.log(data);
    }).done(function (data) {
      //결제가 정상적으로 완료되면 수행됩니다
      //비즈니스 로직을 수행하기 전에 결제 유효성 검증을 하시길 추천합니다.
      console.log('done');
      console.log(data);
    });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.pay}>
          go and pay
        </button>
      </div>
    );
  }
}

export default App;

[gosomi151101]

이슈를 남겨주셔서 정말 감사합니다. 부트페이 SDK 2.0 이상 버전은 coffeescript base로 개발이 되었습니다. 그렇다보니 webpack에서 coffeescript compiler가 정의되어 있지 않으면 이용이 되지 않는 문제가 계속 발생했습니다. 저희가 기본 설정을 넣긴 했는데, 대부분의 webpack 환경에서는 저희 환경 설정을 덮어씌워버리기 때문에 coffeescript loader를 불편하게 설정해야하는 문제가 있었습니다.

해당 문제를 2.0.16 버전에서 개선하였고 현재는 coffeescript째로 올라가는 것이 아닌 js로 compile된 상태로 publish하는 방향으로 변경하였습니다.

github페이지에 issue를 올려주셔도 되지만 더 빠른 피드백을 원하시면 https://www.bootpay.co.kr 로 가셔서 오른쪽 하단 채널덱을 통해서 문의 부탁드립니다. 기술 이슈는 평일 9시-6시까지 바로바로 확인하여 피드백 드립니다.

2.0.16 버전 사용시에도 문제가 발생되면 언제든 이곳 issue나 혹은 저희 홈페이지 채널덱을 통해서 문의부탁드립니다.

저희 부트페이에 관심을 주셔서 감사합니다.

[gosomi151101]

최종적으로 webpack을 사용하지 않고 npm vuejs 혹은 reactjs로개발하는 분들을 위해서 2.0.18 버전으로 최종 업데이트 되었습니다. 특정 loader를 사용하지 않고 바로 사용이 가능합니다.