react-native-bootpay-api 4.1.4 → 4.1.5

package/lib/BootpayModal.js

@@ -0,0 +1,710 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { Component } from 'react';
+import { SafeAreaView, Modal, TouchableOpacity, Image, StyleSheet, Platform } from 'react-native';
+// import {  StyleSheet, Platform } from 'react-native';
+// import {  Platform, StyleSheet, Dimensions } from 'react-native';
+import WebView from 'react-native-webview-bootpay';
+import { debounce } from 'lodash';
+import UserInfo from './UserInfo';
+var BootpayTemp = /** @class */ (function (_super) {
+    __extends(BootpayTemp, _super);
+    function BootpayTemp(props) {
+        var _this = _super.call(this, props) || this;
+        // webView = useRef(); 
+        // webView = useRef<WebView>(null);
+        _this._VERSION = "4.1.3";
+        _this._DEBUG = false;
+        _this.state = {
+            visibility: false,
+            script: '',
+            firstLoad: false,
+            showCloseButton: false
+        };
+        // constructor(props) {
+        // }
+        // webView2 = useRef(null);
+        // ref = {
+        //     webview2: WebView(null)
+        // }
+        // state = {
+        //     visibility: false, 
+        //     script: '',
+        //     firstLoad: false,
+        //     showCloseButton: false
+        // }  
+        // // _payload = {}
+        // _VERSION = "4.1.3"
+        // _DEBUG = false;
+        _this.dismiss = function () {
+            // let extra = new Extra() 
+            _this.setState({
+                visibility: false
+            });
+            // this.removePaymentWindow();
+        };
+        _this.closeDismiss = function () {
+            if (_this.props.onClose != undefined)
+                _this.props.onClose();
+            _this.dismiss();
+        };
+        _this.onMessage = function (event) {
+            var _a, _b;
+            console.log("onMessage: ".concat(event, ", ").concat(JSON.stringify(event)));
+            if (event == undefined)
+                return;
+            var res = JSON.parse(JSON.stringify(event));
+            if (res.data == 'close') {
+                _this.closeDismiss();
+                // if(this.props.onClose == undefined) return;
+                // var json = {
+                //     action: 'BootpayClose',
+                //     message: '결제창이 닫혔습니다'
+                // } 
+                // this.props.onClose();
+                // this.dismiss();
+                return;
+            }
+            var data = JSON.parse(res.data);
+            // console.log(`redirect: ${JSON.stringify(data)}`);
+            var redirect = false;
+            var show_success = false;
+            var show_error = false;
+            if (((_a = _this.props.payload) === null || _a === void 0 ? void 0 : _a.extra) != undefined) {
+                if (((_b = _this.props.payload.extra) === null || _b === void 0 ? void 0 : _b.open_type) == 'redirect') {
+                    redirect = true;
+                }
+                if (_this.props.payload.extra.display_error_result == true) {
+                    show_error = true;
+                }
+                if (_this.props.payload.extra.display_success_result == true) {
+                    show_success = true;
+                }
+            }
+            if (redirect === true) {
+                switch (data.event) {
+                    case 'cancel':
+                        if (_this.props.onCancel != undefined)
+                            _this.props.onCancel(data);
+                        _this.closeDismiss();
+                        break;
+                    case 'error':
+                        if (_this.props.onError != undefined)
+                            _this.props.onError(data);
+                        if (show_error == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'issued':
+                        if (_this.props.onIssued != undefined)
+                            _this.props.onIssued(data);
+                        if (show_success == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'confirm':
+                        if (_this.props.onConfirm != undefined)
+                            _this.props.onConfirm(data);
+                        break;
+                    case 'done':
+                        if (_this.props.onDone != undefined)
+                            _this.props.onDone(data);
+                        if (show_success == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'close':
+                        _this.closeDismiss();
+                        break;
+                }
+            }
+            else {
+                switch (data.event) {
+                    case 'cancel':
+                        if (_this.props.onCancel != undefined)
+                            _this.props.onCancel(data);
+                        break;
+                    case 'error':
+                        if (_this.props.onError != undefined)
+                            _this.props.onError(data);
+                        break;
+                    case 'issued':
+                        if (_this.props.onIssued != undefined)
+                            _this.props.onIssued(data);
+                        break;
+                    case 'confirm':
+                        if (_this.props.onConfirm != undefined)
+                            _this.props.onConfirm(data);
+                        break;
+                    case 'done':
+                        if (_this.props.onDone != undefined)
+                            _this.props.onDone(data);
+                        break;
+                    case 'close':
+                        _this.closeDismiss();
+                        break;
+                }
+            }
+        };
+        _this.onShouldStartLoadWithRequest = function (_) {
+            return true;
+        };
+        _this.getSDKVersion = function () {
+            if (Platform.OS == 'ios') {
+                return "Bootpay.setVersion('" + _this._VERSION + "', 'ios_react_native')";
+                // return "Bootpay.setDevice('IOS');";
+            }
+            else if (Platform.OS == 'android') {
+                return "Bootpay.setVersion('" + _this._VERSION + "', 'android_react_native')";
+                // return "Bootpay.setDevice('ANDROID');"; 
+            }
+            else {
+                return "";
+            }
+        };
+        _this.getEnvironmentMode = function () {
+            if (_this._DEBUG) {
+                return "Bootpay.setEnvironmentMode('development');";
+            }
+            return "";
+        };
+        _this.getBootpayPlatform = function () {
+            if (Platform.OS == 'ios') {
+                return "Bootpay.setDevice('IOS');";
+            }
+            else if (Platform.OS == 'android') {
+                return "Bootpay.setDevice('ANDROID');";
+            }
+            else {
+                return "";
+            }
+        };
+        // setPayScript = () => {
+        // const fullScript = this.generateScript(this.state.script);
+        // this.injectJavaScript(fullScript);
+        // if(this.state.showCloseButton == true) {
+        //     if(this.webView == null || this.webView == undefined) return; 
+        //     this.webView.showCloseButton();
+        // }
+        // } 
+        // transactionConfirm = () => { 
+        //     const script = "Bootpay.confirm()"
+        //      + 
+        //     ".then( function (res) {" + 
+        //     this.confirm() + 
+        //     this.issued() + 
+        //     this.done() + 
+        //     "}, function (res) {" +
+        //     this.error() + 
+        //     this.cancel() + 
+        //     "})";
+        // this.callJavaScript(script);
+        // }
+        _this.removePaymentWindow = function () {
+            _this.dismiss();
+            // this.callJavaScript(`
+            // Bootpay.removePaymentWindow();
+            //   `);
+        };
+        // callJavaScript = (script: string) => {  
+        // if(this.webView == null || this.webView == undefined) return
+        // this.webView.current?.injectJavaScript(`
+        // setTimeout(function() { ${script} }, 30);
+        // `) 
+        // }  
+        _this.getAnalyticsData = function () { return __awaiter(_this, void 0, void 0, function () {
+            var uuid, bootLastTime, elaspedTime;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, UserInfo.getBootpayUUID()];
+                    case 1:
+                        uuid = _a.sent();
+                        return [4 /*yield*/, UserInfo.getBootpayLastTime()];
+                    case 2:
+                        bootLastTime = _a.sent();
+                        elaspedTime = Date.now() - bootLastTime;
+                        return [2 /*return*/, "window.Bootpay.$analytics.setAnalyticsData({uuid:'".concat(uuid, "', time:").concat(elaspedTime, "});")];
+                }
+            });
+        }); };
+        _this.confirm = function () {
+            return "if (res.event === 'confirm') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.done = function () {
+            return "else if (res.event === 'done') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.issued = function () {
+            return "else if (res.event === 'issued') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.error = function () {
+            return "if (res.event === 'error') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.cancel = function () {
+            return "else if (res.event === 'cancel') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.close = function () {
+            return "document.addEventListener('bootpayclose', function (e) {  window.BootpayRNWebView.postMessage('close'); });";
+        };
+        _this.webView = React.createRef();
+        return _this;
+    }
+    BootpayTemp.prototype.componentWillUnmount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.setState({
+                    visibility: false,
+                    firstLoad: false,
+                    showCloseButton: false
+                });
+                UserInfo.setBootpayLastTime(Date.now());
+                return [2 /*return*/];
+            });
+        });
+    };
+    BootpayTemp.prototype.componentDidMount = function () {
+        this.closeDismiss = debounce(this.closeDismiss, 30);
+    };
+    BootpayTemp.prototype.render = function () {
+        return (<WebView ref={this.webView} originWhitelist={['*']} source={{
+                uri: 'https://www.naver.com/'
+            }} javaScriptEnabled={true} javaScriptCanOpenWindowsAutomatically={true}/>);
+    };
+    return BootpayTemp;
+}(Component));
+export { BootpayTemp };
+var BootpayModal = /** @class */ (function (_super) {
+    __extends(BootpayModal, _super);
+    function BootpayModal(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            visibility: false,
+            script: '',
+            firstLoad: false,
+            showCloseButton: false
+        };
+        // _payload = {}
+        _this._VERSION = "4.1.3";
+        _this._DEBUG = false;
+        _this.dismiss = function () {
+            // let extra = new Extra() 
+            _this.setState({
+                visibility: false
+            });
+            // this.removePaymentWindow();
+        };
+        _this.closeDismiss = function () {
+            if (_this.props.onClose != undefined)
+                _this.props.onClose();
+            _this.dismiss();
+        };
+        _this.onMessage = function (event) {
+            var _a, _b;
+            console.log("onMessage: ".concat(event, ", ").concat(JSON.stringify(event)));
+            if (event == undefined)
+                return;
+            var res = JSON.parse(JSON.stringify(event));
+            if (res.data == 'close') {
+                _this.closeDismiss();
+                // if(this.props.onClose == undefined) return;
+                // var json = {
+                //     action: 'BootpayClose',
+                //     message: '결제창이 닫혔습니다'
+                // } 
+                // this.props.onClose();
+                // this.dismiss();
+                return;
+            }
+            var data = JSON.parse(res.data);
+            // console.log(`redirect: ${JSON.stringify(data)}`);
+            var redirect = false;
+            var show_success = false;
+            var show_error = false;
+            if (((_a = _this.props.payload) === null || _a === void 0 ? void 0 : _a.extra) != undefined) {
+                if (((_b = _this.props.payload.extra) === null || _b === void 0 ? void 0 : _b.open_type) == 'redirect') {
+                    redirect = true;
+                }
+                if (_this.props.payload.extra.display_error_result == true) {
+                    show_error = true;
+                }
+                if (_this.props.payload.extra.display_success_result == true) {
+                    show_success = true;
+                }
+            }
+            if (redirect === true) {
+                switch (data.event) {
+                    case 'cancel':
+                        if (_this.props.onCancel != undefined)
+                            _this.props.onCancel(data);
+                        _this.closeDismiss();
+                        break;
+                    case 'error':
+                        if (_this.props.onError != undefined)
+                            _this.props.onError(data);
+                        if (show_error == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'issued':
+                        if (_this.props.onIssued != undefined)
+                            _this.props.onIssued(data);
+                        if (show_success == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'confirm':
+                        if (_this.props.onConfirm != undefined)
+                            _this.props.onConfirm(data);
+                        break;
+                    case 'done':
+                        if (_this.props.onDone != undefined)
+                            _this.props.onDone(data);
+                        if (show_success == false) {
+                            _this.closeDismiss();
+                        }
+                        break;
+                    case 'close':
+                        _this.closeDismiss();
+                        break;
+                }
+            }
+            else {
+                switch (data.event) {
+                    case 'cancel':
+                        if (_this.props.onCancel != undefined)
+                            _this.props.onCancel(data);
+                        break;
+                    case 'error':
+                        if (_this.props.onError != undefined)
+                            _this.props.onError(data);
+                        break;
+                    case 'issued':
+                        if (_this.props.onIssued != undefined)
+                            _this.props.onIssued(data);
+                        break;
+                    case 'confirm':
+                        if (_this.props.onConfirm != undefined)
+                            _this.props.onConfirm(data);
+                        break;
+                    case 'done':
+                        if (_this.props.onDone != undefined)
+                            _this.props.onDone(data);
+                        break;
+                    case 'close':
+                        _this.closeDismiss();
+                        break;
+                }
+            }
+        };
+        _this.onShouldStartLoadWithRequest = function (_) {
+            return true;
+        };
+        _this.getSDKVersion = function () {
+            if (Platform.OS == 'ios') {
+                return "Bootpay.setVersion('" + _this._VERSION + "', 'ios_react_native')";
+                // return "Bootpay.setDevice('IOS');";
+            }
+            else if (Platform.OS == 'android') {
+                return "Bootpay.setVersion('" + _this._VERSION + "', 'android_react_native')";
+                // return "Bootpay.setDevice('ANDROID');"; 
+            }
+            else {
+                return "";
+            }
+        };
+        _this.getEnvironmentMode = function () {
+            if (_this._DEBUG) {
+                return "Bootpay.setEnvironmentMode('development');";
+            }
+            return "";
+        };
+        _this.getBootpayPlatform = function () {
+            if (Platform.OS == 'ios') {
+                return "Bootpay.setDevice('IOS');";
+            }
+            else if (Platform.OS == 'android') {
+                return "Bootpay.setDevice('ANDROID');";
+            }
+            else {
+                return "";
+            }
+        };
+        // setPayScript = () => {
+        // const fullScript = this.generateScript(this.state.script);
+        // this.injectJavaScript(fullScript);
+        // if(this.state.showCloseButton == true) {
+        //     if(this.webView == null || this.webView == undefined) return; 
+        //     this.webView.showCloseButton();
+        // }
+        // } 
+        _this.transactionConfirm = function () {
+            var script = "Bootpay.confirm()"
+                +
+                    ".then( function (res) {" +
+                _this.confirm() +
+                _this.issued() +
+                _this.done() +
+                "}, function (res) {" +
+                _this.error() +
+                _this.cancel() +
+                "})";
+            _this.callJavaScript(script);
+        };
+        _this.removePaymentWindow = function () {
+            _this.dismiss();
+            // this.callJavaScript(`
+            // Bootpay.removePaymentWindow();
+            //   `);
+        };
+        _this.callJavaScript = function (script) {
+            var _a;
+            if (_this.webView == null || _this.webView == undefined)
+                return;
+            (_a = _this.webView.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript("\n        setTimeout(function() { ".concat(script, " }, 30);\n        "));
+        };
+        _this.getAnalyticsData = function () { return __awaiter(_this, void 0, void 0, function () {
+            var uuid, bootLastTime, elaspedTime;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, UserInfo.getBootpayUUID()];
+                    case 1:
+                        uuid = _a.sent();
+                        return [4 /*yield*/, UserInfo.getBootpayLastTime()];
+                    case 2:
+                        bootLastTime = _a.sent();
+                        elaspedTime = Date.now() - bootLastTime;
+                        return [2 /*return*/, "window.Bootpay.$analytics.setAnalyticsData({uuid:'".concat(uuid, "', time:").concat(elaspedTime, "});")];
+                }
+            });
+        }); };
+        _this.confirm = function () {
+            return "if (res.event === 'confirm') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.done = function () {
+            return "else if (res.event === 'done') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.issued = function () {
+            return "else if (res.event === 'issued') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.error = function () {
+            return "if (res.event === 'error') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.cancel = function () {
+            return "else if (res.event === 'cancel') { window.BootpayRNWebView.postMessage( JSON.stringify(res) ); }";
+        };
+        _this.close = function () {
+            return "document.addEventListener('bootpayclose', function (e) {  window.BootpayRNWebView.postMessage('close'); });";
+        };
+        _this.requestPayment = function (payload, items, user, extra) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.bootpayRequest(payload, items, user, extra, "requestPayment");
+                return [2 /*return*/];
+            });
+        }); };
+        _this.requestSubscription = function (payload, items, user, extra) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.bootpayRequest(payload, items, user, extra, "requestSubscription");
+                return [2 /*return*/];
+            });
+        }); };
+        _this.requestAuthentication = function (payload, items, user, extra) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.bootpayRequest(payload, items, user, extra, "requestAuthentication");
+                return [2 /*return*/];
+            });
+        }); };
+        _this.bootpayRequest = function (payload, items, user, extra, requestMethod) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b;
+            var _c;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        payload.application_id = Platform.OS == 'ios' ? this.props.ios_application_id : this.props.android_application_id;
+                        payload.items = items;
+                        payload.user = user;
+                        payload.extra = extra;
+                        // this._payload = payload;
+                        // //visibility가 true가 되면 webview onLoaded가 실행됨
+                        _a = this.setState;
+                        _c = {
+                            visibility: true
+                        };
+                        _b = "\n                ".concat;
+                        return [4 /*yield*/, this.getMountJavascript()];
+                    case 1:
+                        // this._payload = payload;
+                        // //visibility가 true가 되면 webview onLoaded가 실행됨
+                        _a.apply(this, [(_c.script = _b.apply("\n                ", [_d.sent(), " \n                "]).concat(this.generateScript(payload, requestMethod), "\n                "),
+                                _c.firstLoad = false,
+                                _c.showCloseButton = extra.show_close_button || false,
+                                _c)]);
+                        UserInfo.updateInfo();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        _this.getMountJavascript = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = (_a = "\n        ".concat(this.getSDKVersion(), "\n        ").concat(this.getEnvironmentMode(), "\n        ").concat(this.getBootpayPlatform(), "\n        ").concat(this.close(), "\n        ")).concat;
+                        return [4 /*yield*/, this.getAnalyticsData()];
+                    case 1: return [2 /*return*/, _b.apply(_a, [_c.sent(), "\n        "])];
+                }
+            });
+        }); };
+        _this.generateScript = function (payload, requestMethod) {
+            var script = "Bootpay." + requestMethod +
+                "(".concat(JSON.stringify(payload), ")") +
+                ".then( function (res) {" +
+                _this.confirm() +
+                _this.issued() +
+                _this.done() +
+                "}, function (res) {" +
+                _this.error() +
+                _this.cancel() +
+                "}); void(0);";
+            return script;
+        };
+        _this.webView = React.createRef();
+        return _this;
+    }
+    BootpayModal.prototype.componentWillUnmount = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                this.setState({
+                    visibility: false,
+                    firstLoad: false,
+                    showCloseButton: false
+                });
+                UserInfo.setBootpayLastTime(Date.now());
+                return [2 /*return*/];
+            });
+        });
+    };
+    BootpayModal.prototype.componentDidMount = function () {
+        this.closeDismiss = debounce(this.closeDismiss, 30);
+    };
+    BootpayModal.prototype.render = function () {
+        var _this = this;
+        return (<Modal animationType={'slide'} transparent={false} onRequestClose={function () {
+                _this.closeDismiss();
+                // console.log(1234);
+                // this.dismiss();
+            }} visible={this.state.visibility}>
+                <SafeAreaView style={{ flex: 1 }}>
+                    {this.state.showCloseButton &&
+                <TouchableOpacity onPress={function () {
+                        var cancelData = {
+                            action: 'BootpayCancel',
+                            message: '사용자에 의해 취소되었습니다'
+                        };
+                        if (_this.props.onCancel != undefined)
+                            _this.props.onCancel(cancelData);
+                        if (_this.props.onClose != undefined)
+                            _this.props.onClose();
+                        _this.setState({ visibility: false });
+                    }}>
+                            <Image style={[styles.overlay]} source={require('../images/close.png')}/>
+                        </TouchableOpacity>}
+                    <WebView ref={this.webView} originWhitelist={['*']} source={{
+                uri: 'https://webview.bootpay.co.kr/4.1.5'
+            }} injectedJavaScript={this.state.script} javaScriptEnabled={true} javaScriptCanOpenWindowsAutomatically={true} 
+        // scalesPageToFit={true} 
+        onMessage={this.onMessage}/>
+                </SafeAreaView>
+
+            </Modal>);
+    };
+    return BootpayModal;
+}(Component));
+export { BootpayModal };
+var styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF'
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10
+    },
+    // Flex to fill, position absolute, 
+    // Fixed left/top, and the width set to the window width
+    overlay: {
+        width: 25,
+        height: 25,
+        right: 5,
+        alignSelf: 'flex-end'
+    }
+});
+// const deviceHeight = Dimensions.get('window').height;
+// const deviceWidth = Dimensions.get('window').width;
+// const styles = StyleSheet.create({
+//     container: {
+//       flex: 1,
+//       alignItems: 'center',
+//       justifyContent: 'center',
+//     },
+//     webview: {
+//         width: deviceWidth,
+//         height: deviceHeight
+//     },
+//     button: {
+//       alignItems: "center",
+//       backgroundColor: "#DDDDDD",
+//       padding: 10,
+//       margin: 10,
+//     },
+//   });