react-native-bootpay-api 1.5.0 → 4.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-bootpay-api",
-  "version": "1.5.0",
+  "version": "4.0.0-beta.1",
   "description": "React Native를 위한 bootpay 라이브러리 입니다.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,14 +26,18 @@
     "!**/__mocks__"
   ],
   "scripts": {
-    "test": "jest",
-    "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
-    "release": "release-it",
-    "example": "yarn --cwd example",
-    "pods": "cd example && pod-install --quiet",
-    "bootstrap": "yarn example && yarn && yarn pods"
+    "android": "react-native run-android",
+    "ios": "react-native run-ios --project-path example/ios",
+    "macos": "react-native run-macos --scheme WebviewExample --project-path example/macos",
+    "start": "cd example && react-native start",
+    "windows": "install-windows-test-app --project-directory example/windows && react-native run-windows --root example --arch x64",
+    "ci": "CI=true && yarn lint",
+    "ci:publish": "yarn semantic-release",
+    "lint": "yarn tsc --noEmit && yarn eslint ./src --ext .ts,.tsx",
+    "build": "yarn tsc",
+    "prepare": "yarn build",
+    "appium": "appium",
+    "test:windows": "yarn jest --setupFiles=./jest-setups/jest.setup.js"
   },
   "keywords": [
     "react-native",
@@ -51,96 +55,46 @@
     "registry": "https://registry.npmjs.org/"
   },  
   "devDependencies": {
-    "@commitlint/config-conventional": "^11.0.0",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@release-it/conventional-changelog": "^2.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/runtime": "^7.0.0",
+    "@react-native-community/cli": "^6.0.0",
+    "@react-native-community/cli-platform-android": "^6.0.0",
+    "@react-native-community/cli-platform-ios": "^6.0.0",
+    "@semantic-release/git": "7.0.16",
+    "@types/invariant": "^2.2.30",
     "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
-    "commitlint": "^11.0.0",
-    "eslint": "^7.2.0",  
-    "jest": "^26.0.1",
-    "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.18.0",
-    "release-it": "^14.2.2",
-    "typescript": "^4.1.3",
-    "react-native-webview-bootpay": "^11.6.5",
-    "react-native-device-info": "^8.4.0",
+    "@types/react": "^17.0.0",
+    "@types/react-native": "^0.64.0",
+    "@types/selenium-webdriver": "4.0.9",
+    "@typescript-eslint/eslint-plugin": "2.1.0",
+    "@typescript-eslint/parser": "2.1.0",
+    "appium": "1.17.0",
+    "eslint": "6.3.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-prettier": "6.2.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-react": "7.14.3",
+    "eslint-plugin-react-native": "3.7.0",
+    "jest": "^26.6.3",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "react": "17.0.2",
+    "react-native": "^0.66.0-0",
+    "react-native-macos": "^0.66.0-0",
+    "react-native-test-app": "^1.3.2",
+    "react-native-windows": "^0.66.0-0",
+    "selenium-appium": "1.0.2",
+    "selenium-webdriver": "4.0.0-alpha.7",
+    "semantic-release": "15.13.24",
+    "typescript": "^4.0.0", 
+    "react-native-webview-bootpay": "^11.18.13",
+    "react-native-device-info": "^8.7.0",
     "react-native-sensitive-info": "^5.5.8",
     "react-native-base64": "^0.2.1", 
-    "react-native-aes-crypto": "^1.3.10"
+    "react-native-aes-crypto": "^2.1.0"
   }, 
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
-  },
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  }, 
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
-    }
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native-community",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ], 
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      "commonjs",
-      "module",
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
   }
 }

package/src/BootpayWebView.js

@@ -1,19 +1,37 @@
 
 
-import React, { Component, useRef } from 'react';
-import { SafeAreaView, Modal, Platform, TouchableOpacity, Image, StyleSheet } from 'react-native';
+import React, { Component, useRef, useEffect } from 'react';
+import { SafeAreaView, Modal, Platform, TouchableOpacity, Image, StyleSheet,  BackHandler} from 'react-native';
 import WebView  from 'react-native-webview-bootpay';
 import UserInfo from './UserInfo'
 
 export class BootpayWebView extends Component {
+ 
+
     webView = useRef<WebView>(null); 
 
+    
     state = {
         visibility: false, 
         script: '',
         firstLoad: false
     } 
-s
+ 
+    // canGoBack() {
+    //     console.log('canGoBack');
+    //     if(this.webView.current) {
+    //         return this.webView.current.canGoBack();
+    //     }
+    //     return false;
+    // }
+
+    // goBack() {
+    //     console.log('GoBack');
+    //     if(this.webView.goBack) {
+    //         this.webView.current.goBack();
+    //     }
+    // }
+
     async componentWillUnmount() {
         this.setState(
             {
@@ -25,12 +43,13 @@ s
         UserInfo.setBootpayLastTime(Date.now());
     }
  
-    render() {
-
-
+    render() { 
         return <Modal
             animationType={'slide'}
-            transparent={false}
+            transparent={false} 
+            onRequestClose={()=> { 
+                this.dismiss();
+            }}
             visible={this.state.visibility}>
             <SafeAreaView style={{ flex: 1 }}>
                 {
@@ -58,15 +77,20 @@ s
                 }
                 <WebView
                     ref={(wv) => this.webView = wv}
+                    // ref={btWebView}
                     useWebKit={true}
                     originWhitelist={['*']}
                     source={{
-                        uri: 'https://inapp.bootpay.co.kr/3.3.3/production.html'
+                        uri: 'https://webview.bootpay.co.kr/4.0.0/'
+                    }}
+                    onRequestClose={()=> {
+                        console.log('onRequestClose');
+                        this.dismiss();
                     }}
                     injectedJavaScript={this.state.script}
                     javaScriptEnabled={true}
                     javaScriptCanOpenWindowsAutomatically={true}
-                    scalesPageToFit={true} 
+                    // scalesPageToFit={true} 
                     onMessage={this.onMessage}
                     onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest}
                 />
@@ -75,39 +99,42 @@ s
         </Modal>
     }
 
-    request = async (payload, items, user, extra) => {        
+    requestPayment = async (payload, items, user, extra) => {        
+        this.bootpayRequest(payload, items, user, extra, "requestPayment");
+    }
+
+    requestSubscription = async (payload, items, user, extra) => {        
+        this.bootpayRequest(payload, items, user, extra, "requestSubscription");
+    }
 
+    requestAuthentication = async (payload, items, user, extra) => {        
+        this.bootpayRequest(payload, items, user, extra, "requestAuthentication");
+    }
+
+    bootpayRequest = async (payload, items, user, extra, requestMethod) => {              
         payload.application_id =  Platform.OS == 'ios' ? this.props.ios_application_id : this.props.android_application_id;
         payload.items = items;
         payload.user_info = user;
         payload.extra = extra; 
- 
-
-        var quickPopup = '';
-
-        if(extra != undefined && extra.quick_popup != undefined) {
-            if(extra.quick_popup == 1) {
-                quickPopup = 'BootPay.startQuickPopup();';
-            }
-        } 
-        
+  
 
         //visibility가 true가 되면 webview onLoaded가 실행됨
         this.setState(
             {
                 visibility: true,
                 script: `
-                ${await this.getMountJavascript()}
-                ${quickPopup}
-                ${this.generateScript(payload)}
+                ${await this.getMountJavascript()} 
+                ${this.generateScript(payload, requestMethod)}
                 `,
                 firstLoad: false,
                 showCloseButton: extra.show_close_button || false  
             }
         ) 
 
-        UserInfo.updateInfo();
+        UserInfo.updateInfo();  
     }
+ 
+
 
     dismiss = () => {
         this.setState(
@@ -127,15 +154,19 @@ s
     }
 
 
-    generateScript= (payload) => { 
-        const onError = '.error(function(data){ window.BootpayRNWebView.postMessage( JSON.stringify(data) ); })';
-        const onCancel = '.cancel(function(data){ window.BootpayRNWebView.postMessage( JSON.stringify(data) ); })';
-        const onReady = '.ready(function(data){ window.BootpayRNWebView.postMessage( JSON.stringify(data) ); })';
-        const onConfirm = '.confirm(function(data){ window.BootpayRNWebView.postMessage( JSON.stringify(data) ); })';
-        const onClose = '.close(function(data){ window.BootpayRNWebView.postMessage("close"); })';
-        const onDone = '.done(function(data){ window.BootpayRNWebView.postMessage( JSON.stringify(data) ); })';
+    generateScript= (payload, requestMethod) => {    
+        const script = "Bootpay." + requestMethod + 
+        `(${JSON.stringify(payload)})` +
+        ".then( function (res) {" + 
+        confirm() + 
+        issued() + 
+        done() + 
+        "}, function (res) {" +
+        error() + 
+        cancel() + 
+        "})";
 
-        return `BootPay.request(${JSON.stringify(payload)})` + onError + onCancel + onReady + onConfirm + onClose + onDone + '; void(0);';
+        this.callJavaScript(script);
     }
 
     onMessage = ({ nativeEvent }) => { 
@@ -147,42 +178,47 @@ s
                 action: 'BootpayClose',
                 message: '결제창이 닫혔습니다'
             }
+            this.setState(
+                {
+                    visibility: false
+                }
+            )
             this.props.onClose(json);
             this.dismiss();
             return;
         }
 
         const data = JSON.parse(nativeEvent.data);
-        switch (data.action) {
-            case 'BootpayCancel':
+        switch (data.event) {
+            case 'cancel':
                 if(this.props.onCancel != undefined) this.props.onCancel(data);
-                this.setState(
-                    {
-                        visibility: false
-                    }
-                )
+                // this.setState(
+                //     {
+                //         visibility: false
+                //     }
+                // )
                 break;
-            case 'BootpayError':
+            case 'error':
                 if(this.props.onError != undefined) this.props.onError(data);
-                this.setState(
-                    {
-                        visibility: false
-                    }
-                )
+                // this.setState(
+                //     {
+                //         visibility: false
+                //     }
+                // )
                 break;
-            case 'BootpayBankReady':
+            case 'issued':
                 if(this.props.onReady != undefined) this.props.onReady(data);
                 break;
-            case 'BootpayConfirm':
+            case 'confirm':
                 if(this.props.onConfirm != undefined) this.props.onConfirm(data);
                 break;
-            case 'BootpayDone':
+            case 'done':
                 if(this.props.onDone != undefined) this.props.onDone(data);
-                this.setState(
-                    {
-                        visibility: false
-                    }
-                )
+                // this.setState(
+                //     {
+                //         visibility: false
+                //     }
+                // )
                 break;
         }
     }
@@ -193,9 +229,9 @@ s
 
     getBootpayPlatform = () => { 
         if(Platform.OS == 'ios') {
-            return "BootPay.setDevice('IOS');";
+            return "Bootpay.setDevice('IOS');";
         } else if(Platform.OS == 'android'){
-            return "BootPay.setDevice('ANDROID');"; 
+            return "Bootpay.setDevice('ANDROID');"; 
         }
     }
 
@@ -208,18 +244,23 @@ s
         // }
     // } 
 
-    transactionConfirm = (data) => {
-        // console.log('transactionConfirm: ' + data);
-
-        var json = JSON.stringify(data)
-        this.callJavaScript(`
-        BootPay.transactionConfirm(${json});
-          `);
+    transactionConfirm = () => { 
+        const script = "Bootpay.confirm()" + 
+        ".then( function (res) {" + 
+        confirm() + 
+        issued() + 
+        done() + 
+        "}, function (res) {" +
+        error() + 
+        cancel() + 
+        "})";
+
+        this.callJavaScript(script);
     }
 
     removePaymentWindow = () => {
         this.callJavaScript(`
-        BootPay.removePaymentWindow();
+        Bootpay.removePaymentWindow();
           `);
     } 
 
@@ -236,14 +277,38 @@ s
 
     getAnalyticsData = async () => { 
         const uuid = await UserInfo.getBootpayUUID(); 
-        const bootpaySK = await UserInfo.getBootpaySK();
+        // const bootpaySK = await UserInfo.getBootpaySK();
         const bootLastTime = await UserInfo.getBootpayLastTime();      
 
 
         const elaspedTime = Date.now() - bootLastTime;  
-        return `window.BootPay.setAnalyticsData({uuid:'${uuid}',sk:'${bootpaySK}',sk_time:${bootLastTime},time:${elaspedTime}});`;
+        return `window.Bootpay.$analytics.setAnalyticsData({uuid:'${uuid}', time:${elaspedTime}});`;
         // this.callJavaScript(`window.BootPay.setAnalyticsData({uuid:'${uuid}',sk:'${bootpaySK}',sk_time:${bootLastTime},time:${elaspedTime}});`); 
     }
+
+    confirm = () => {
+        return "if (res.event === 'confirm') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+    }
+
+    done = () => {
+        return "else if (res.event === 'done') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+    }
+
+    issued = () => {
+        return "else if (res.event === 'issued') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+    }
+
+    error = () => {
+        return "if (res.event === 'error') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+    }
+
+    cancel = () => {
+        return "else if (res.event === 'cancel') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+    }
+
+    close = () => {
+        return "document.addEventListener('bootpayclose', function (e) {  window.BootpayRNWebView.postMessage('close'); });";
+    }
 } 
 
 

package/src/UserInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserInfo.d.ts","sourceRoot":"","sources":["UserInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,SAAS;IAC3C,MAAM,CAAC,cAAc,QAAS,MAAM,cAAc,GAAG,sBAYpD;IAED,MAAM,CAAC,cAAc,QAAS,MAAM,OAAO,GAAG,sBAW7C;IAED,MAAM,CAAC,cAAc,yBAGpB;IAED,MAAM,CAAC,YAAY,yBAElB;IAED,MAAM,CAAC,YAAY,QAAS,MAAM,sBAEjC;IAED,MAAM,CAAC,YAAY,SAAU,MAAM,QAAQ,MAAM,sBAEhD;IAED,MAAM,CAAC,kBAAkB,yBAExB;IAED,MAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,MAAM;IAIrC,MAAM,CAAC,gBAAgB;IAIvB,MAAM,CAAC,gBAAgB,QAAS,MAAM,sBAErC;IAED,MAAM,CAAC,UAAU,sBAWhB;CACJ"}

package/src/UserInfo.js

@@ -0,0 +1,67 @@
+import { Component } from 'react';
+import DeviceInfo from 'react-native-device-info';
+import SInfo from 'react-native-sensitive-info';
+export default class UserInfo extends Component {
+    static getBootpayInfo = (key, defaultVal) => {
+        return new Promise((resolve, reject) => {
+            SInfo.getItem(key, {
+                sharedPreferencesName: 'bootpaySharedPrefs',
+                keychainService: 'bootpayKeychain'
+            }).then((res) => {
+                res == undefined ? resolve(defaultVal) : resolve(res);
+                resolve(res);
+            }).catch((error) => {
+                reject(error);
+            });
+        });
+    };
+    static setBootpayInfo = (key, val) => {
+        return new Promise((resolve, reject) => {
+            SInfo.setItem(String(key), String(val), {
+                sharedPreferencesName: 'bootpaySharedPrefs',
+                keychainService: 'bootpayKeychain'
+            }).then((res) => {
+                resolve(res);
+            }).catch((error) => {
+                reject(error);
+            });
+        });
+    };
+    static getBootpayUUID = () => {
+        let uuid = DeviceInfo.getUniqueId();
+        return UserInfo.setBootpayInfo('uuid', uuid);
+    };
+    static getBootpaySK = () => {
+        return UserInfo.getBootpayInfo('bootpay_sk', '');
+    };
+    static setBootpaySK = (val) => {
+        return UserInfo.setBootpayInfo('bootpay_sk', val);
+    };
+    static newBootpaySK = (uuid, time) => {
+        return UserInfo.setBootpaySK(`${uuid}_${time}`);
+    };
+    static getBootpayLastTime = async () => {
+        return await UserInfo.getBootpayInfo('bootpay_last_time', 0);
+    };
+    static setBootpayLastTime(val) {
+        return UserInfo.setBootpayInfo('bootpay_last_time', val);
+    }
+    static getBootpayUserId() {
+        return UserInfo.getBootpayInfo('bootpay_user_id', '');
+    }
+    static setBootpayUserId = (val) => {
+        return UserInfo.setBootpayInfo('bootpay_user_id', val);
+    };
+    static updateInfo = async () => {
+        const uuid = await UserInfo.getBootpayUUID();
+        const bootpaySK = await UserInfo.getBootpaySK();
+        const lastTime = await UserInfo.getBootpayLastTime();
+        let current = Date.now();
+        if (bootpaySK == '')
+            await UserInfo.newBootpaySK(uuid, current);
+        const isExpired = current - lastTime > 30 * 60 * 1000;
+        if (isExpired)
+            await UserInfo.newBootpaySK(uuid, current);
+        await UserInfo.setBootpayLastTime(current);
+    };
+}

package/CHANGELOG.md

@@ -1,23 +0,0 @@
-### 1.5.0
-- webview update, android manifest 외부앱 패키지명 update 
-
-### 1.4.4
-- 사용하지 않은 패키지 제거 
-
-### 1.4.3
-- bootpay anlaytics api 추가 
-
-### 1.0.4
-- typescript declare 적용 
-
-### 1.0.3
-- close button 클릭시 onCancel, onClose 이벤트 호출 
-
-### 1.0.2
-- callJavascript 버그 수정 
-
-### 1.0.1
-- close.png 못찾는 버그 수정 
-
-### 1.0.0
-- first release