react-native-bootpay-api 4.0.6 → 4.0.7

package/README.md

@@ -82,7 +82,7 @@ react-native-bootpay-api는 내부적으로 아래의 모듈에 의존합니다.
 
 ## 사용예제 
 
-```dart 
+```typescript 
 import React, { useRef }  from 'react';
 
 import {
@@ -91,28 +91,35 @@ import {
   Text,
   TouchableOpacity
 } from 'react-native';
-import { BootpayWebView } from 'react-native-bootpay-api'; 
+import { BootpayWebView } from 'react-native-bootpay-api';
+// import { WebView } from 'react-native-webview-bootpay';
 
 
 export default function App() {
   const bootpay = useRef<BootpayWebView>(null);
   
+ 
 
-  const onPress = () => {   
+  const goBootpayTest = () => {   
     const payload = {
-      pg: 'payletter',  //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
-      name: '마스카라', //결제창에 보여질 상품명
+      pg: '나이스페이',  //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
+      method: '네이버페이',  // ['카드', '휴대폰', '계좌이체', '가상계좌', '카카오페이', '네이버페이', '페이코', '카드자동'] 중 택 1 
+      order_name: '마스카라', //결제창에 보여질 상품명
       order_id: '1234_1234', //개발사에 관리하는 주문번호 
-      method: 'card', 
-      price: 1000 //결제금액 
+      // subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (정기결제용)
+      // authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용) 
+      // method: 'card', 
+      // methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가 
+      price: 1000, //결제금액 
+      // taxFree: 0, //면세금액 
     } 
 
     //결제되는 상품정보들로 통계에 사용되며, price의 합은 결제금액과 동일해야함 
     const items = [
       {
-        item_name: '키보드', //통계에 반영될 상품명 
+        name: '키보드', //통계에 반영될 상품명 
         qty: 1, //수량 
-        unique: 'ITEM_CODE_KEYBOARD', //개발사에서 관리하는 상품고유번호 
+        id: 'ITEM_CODE_KEYBOARD', //개발사에서 관리하는 상품고유번호 
         price: 1000, //상품단가 
         cat1: '패션', //카테고리 상 , 자유롭게 기술
         cat2: '여성상의', //카테고리 중, 자유롭게 기술 
@@ -135,80 +142,158 @@ export default function App() {
 
     //기타 설정
     const extra = {
-      app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명 
-      expire_month: "0", //정기결제가 적용되는 개월 수 (정기결제 사용시), 미지정일시 PG사 기본값에 따름
-      vbank_result: true, //가상계좌 결과창을 볼지(true), 말지(false)
-      start_at: "",  //정기 결제 시작일 - 지정하지 않을 경우 - 그 날 당일로부터 결제가 가능한 Billing key 지급, "2020-10-14"
-      end_at: "", // 정기결제 만료일 - 기간 없음 - 무제한, "2020-10-14"
-      quota: "0,2,3",  //결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용
-      offer_period: "", //결제창 제공기간에 해당하는 string 값, 지원하는 PG만 적용됨
-      popup: 1, //1이면 popup, 아니면 iframe 연동
-      quick_popup: 1, //1: popup 호출시 버튼을 띄우지 않는다. 아닐 경우 버튼을 호출한다
-      locale: "ko", 
-      disp_cash_result: "Y",  // 현금영수증 보일지 말지.. 가상계좌 KCP 옵션
-      escrow: "0",  // 에스크로 쓸지 안쓸지
-      theme: "purple", 
-      custom_background: "", 
-      custom_font_color: "", 
-      show_close_button: true 
+      card_quota: "0,2,3",  //결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용 
+      app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명  
+      show_close_button: false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
+    } 
+
+    if(bootpay != null && bootpay.current != null) bootpay.current.requestPayment(payload, items, user, extra);
+  }
+
+
+  const goBootpaySubscriptionTest = () => {   
+    const payload = {
+      pg: '나이스페이',  //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
+      method: '카드자동', // ['카드', '휴대폰', '계좌이체', '가상계좌', '카카오페이', '네이버페이', '페이코', '카드자동'] 중 택 1 
+      order_name: '마스카라', //결제창에 보여질 상품명
+      // order_id: '1234_1234', //개발사에 관리하는 주문번호 
+      subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (카드자동결제용)
+      // authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용) 
+      // method: 'card', 
+      // methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가 
+      price: 1000, //결제금액 
+      // taxFree: 0, //면세금액 
+    } 
+
+    //결제되는 상품정보들로 통계에 사용되며, price의 합은 결제금액과 동일해야함 
+    const items = [
+      {
+        name: '키보드', //통계에 반영될 상품명 
+        qty: 1, //수량 
+        id: 'ITEM_CODE_KEYBOARD', //개발사에서 관리하는 상품고유번호 
+        price: 1000, //상품단가 
+        cat1: '패션', //카테고리 상 , 자유롭게 기술
+        cat2: '여성상의', //카테고리 중, 자유롭게 기술 
+        cat3: '블라우스', //카테고리 하, 자유롭게 기술
+      }
+    ]
+
+    //구매자 정보로 결제창이 미리 적용될 수 있으며, 통계에도 사용되는 정보 
+    const user = {
+      id: 'user_id_1234', //개발사에서 관리하는 회원고유번호 
+      username: '홍길동', //구매자명
+      email: 'user1234@gmail.com', //구매자 이메일
+      gender: 0, //성별, 1:남자 , 0:여자
+      birth: '1986-10-14', //생년월일 yyyy-MM-dd
+      phone: '01012345678', //전화번호, 페이앱 필수 
+      area: '서울', // [서울,인천,대구,광주,부산,울산,경기,강원,충청북도,충북,충청남도,충남,전라북도,전북,전라남도,전남,경상북도,경북,경상남도,경남,제주,세종,대전] 중 택 1
+      addr: '서울시 동작구 상도로' //주소
+    }
+
+
+    //기타 설정
+    const extra = {
+      card_quota: "0,2,3",  //결제금액이 5만원 이상시 할부개월 허용범위를 설정할 수 있음, [0(일시불), 2개월, 3개월] 허용, 미설정시 12개월까지 허용 
+      app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명  
+      show_close_button: false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
     } 
- 
 
-    if(bootpay != null && bootpay.current != null) bootpay.current.request(payload, items, user, extra);
+    if(bootpay != null && bootpay.current != null) bootpay.current.requestSubscription(payload, items, user, extra);
   }
 
+  const goBootpayAuthTest = () => {
+    const payload = {
+      pg: '다날',  //['kcp', 'danal', 'inicis', 'nicepay', 'lgup', 'toss', 'payapp', 'easypay', 'jtnet', 'tpay', 'mobilians', 'payletter', 'onestore', 'welcome'] 중 택 1
+      method: '본인인증',
+      order_name: '마스카라', //본인인증 명
+      // order_id: '1234_1234', //개발사에 관리하는 주문번호 
+      // subscription_id: '12345_21345', //개발사에 관리하는 주문번호 (정기결제용)
+      authentication_id: '12345_21345', //개발사에 관리하는 주문번호 (본인인증용) 
+      // method: 'card', 
+      // methods: ['card', 'vbank', 'bank', 'phone'], // 통합결제창 진행시 사용하고자 하는 결제수단 지정 가능, method와 함께 적용 불가 
+      // price: 1000, //결제금액 
+      // taxFree: 0, //면세금액 
+    } 
+ 
+
+
+    //기타 설정
+    const extra = {
+      app_scheme: "bootpayrnapi", //ios의 경우 카드사 앱 호출 후 되돌아오기 위한 앱 스키마명  
+      show_close_button: false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
+    } 
+
+    if(bootpay != null && bootpay.current != null) bootpay.current.requestAuthentication(payload, [], {}, extra);
 
-  const onCancel = (data) => {
-    console.log('cancel', data);
+  }
 
-    var json = JSON.stringify(data) 
-    console.log('cancel json', json);
+  const onCancel = (data: string) => {
+    console.log('cancel', data); 
   }
 
-  const onError = (data) => {
+  const onError = (data: string) => {
     console.log('error', data);
   }
 
-  const onReady = (data) => {
+  const onIssued = (data: string) => {
     console.log('ready', data);
   }
 
-  const onConfirm = (data) => {
+  const onConfirm = (data: string) => {
     console.log('confirm', data);
     if(bootpay != null && bootpay.current != null) bootpay.current.transactionConfirm(data);
   }
 
-  const onDone = (data) => {
+  const onDone = (data: string) => {
     console.log('done', data);
   }
 
   const onClose = () => {
-    console.log('closed');
+    console.log('-- closed');
   }
 
+  // React.useEffect(() => {
+  //   BootpayApi.multiply(3, 7).then(setResult);
+  // }, []);
+
   return (
     <View style={styles.container}>
       <TouchableOpacity
           style={styles.button}
-          onPress={onPress}
+          onPress={goBootpayTest}
+        >
+        <Text>일반결제 결제테스트</Text>
+      </TouchableOpacity> 
+      <BootpayWebView  
+        ref={bootpay}
+        ios_application_id={'5b8f6a4d396fa665fdc2b5e9'}
+        android_application_id={'5b8f6a4d396fa665fdc2b5e8'} 
+        // ios_application_id={'5b9f51264457636ab9a07cdd'}
+        // android_application_id={'5b9f51264457636ab9a07cdc'} 
+        onCancel={onCancel}
+        onError={onError}
+        onIssued={onIssued}
+        onConfirm={onConfirm}
+        onDone={onDone}
+        onClose={onClose} 
+      />
+      <TouchableOpacity
+          style={styles.button}
+          onPress={goBootpaySubscriptionTest}
+        >
+        <Text>정기결제 테스트</Text>
+      </TouchableOpacity> 
+      <TouchableOpacity
+          style={styles.button}
+          onPress={goBootpayAuthTest}
         >
-          <Text>Press Here</Text>
-        </TouchableOpacity> 
-        <BootpayWebView  
-          ref={bootpay}
-          ios_application_id={'5b8f6a4d396fa665fdc2b5e9'}
-          android_application_id={'5b8f6a4d396fa665fdc2b5e8'} 
-          onCancel={onCancel}
-          
-          onError={onError}
-          onReady={onReady}
-          onConfirm={onConfirm}
-          onDone={onDone}
-          onClose={onClose} 
-        />
+        <Text>본인인증 테스트</Text>
+      </TouchableOpacity> 
  
     </View>
   );
+
+  
 }
 
 const styles = StyleSheet.create({
@@ -220,9 +305,11 @@ const styles = StyleSheet.create({
   button: {
     alignItems: "center",
     backgroundColor: "#DDDDDD",
-    padding: 10
+    padding: 10,
+    margin: 10,
   },
 });
+ 
 ```
  
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bootpay-api",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "description": "React Native를 위한 bootpay 라이브러리 입니다.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/BootpayWebView.js

@@ -10,7 +10,7 @@ export class BootpayWebView extends Component {
 
     webView = useRef<WebView>(null); 
 
-    _VERSION = "4.0.6";
+    _VERSION = "4.0.7";
     _DEBUG = false;
     _payload = {};
 
@@ -129,6 +129,7 @@ export class BootpayWebView extends Component {
             display_success_result: extra.display_success_result ?? false,  // 결제 완료되면 부트페이가 제공하는 완료창으로 보여주기 ( open_type이 iframe, popup 일때만 가능 )
             display_error_result: extra.display_error_result ?? true, // 결제가 실패하면 부트페이가 제공하는 실패창으로 보여주기 ( open_type이 iframe, popup 일때만 가능 )
             show_close_button: extra.show_close_button ?? false, // x 닫기 버튼 삽입 (닫기버튼이 없는 PG사를 위한 옵션)
+            use_welcomepayment: extra.use_welcomepayment ?? false, // 웰컴에서 스마트로 재판모듈 사용시 true 
         }; 
 
 
@@ -212,6 +213,7 @@ export class BootpayWebView extends Component {
 
  
         const data = JSON.parse(res.data);
+        // console.log(`redirect: ${JSON.stringify(data)}`);
  
         switch (data.event) {
             case 'cancel':
@@ -221,7 +223,7 @@ export class BootpayWebView extends Component {
                 if(this.props.onError != undefined) this.props.onError(data); 
                 break;
             case 'issued':
-                if(this.props.onReady != undefined) this.props.onIssued(data);
+                if(this.props.onIssued != undefined) this.props.onIssued(data);
                 break;
             case 'confirm':
                 if(this.props.onConfirm != undefined) this.props.onConfirm(data);
@@ -235,7 +237,7 @@ export class BootpayWebView extends Component {
                 break; 
         }
  
-        console.log(`redirect: ${JSON.stringify(data)}`);
+        
 
         if(this._payload != undefined && this._payload.extra != undefined && this._payload.extra.open_type == 'redirect') {
             
@@ -246,6 +248,9 @@ export class BootpayWebView extends Component {
             } else if(data.event == 'error' && this._payload.extra.display_error_result != true ) { 
                 if(this.props.onClose != undefined) this.props.onClose(data);
                 this.dismiss();
+            } else if(data.event == 'issued' && this._payload.extra.display_success_result != true ) { 
+                if(this.props.onClose != undefined) this.props.onClose(data);
+                this.dismiss();
             } else if(data.event == 'cancel') {
                 if(this.props.onClose != undefined) this.props.onClose(data);
                 this.dismiss();