iamport-react-native
Version:
리액트 네이티브용 아임포트 결제/본인인증 연동 라이브러리
225 lines (222 loc) • 9.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ValidationForPayment = _interopRequireDefault(require("../../utils/ValidationForPayment"));
var _ErrorOnParams = _interopRequireDefault(require("../ErrorOnParams"));
var _reactNative = require("react-native");
var _constants = require("../../constants");
var _IamportUrl = _interopRequireDefault(require("../../utils/IamportUrl"));
var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
var _styles = _interopRequireDefault(require("../../styles"));
var _Loading = _interopRequireDefault(require("../Loading"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function Payment({
userCode,
tierCode,
data,
loading,
callback
}) {
const [webviewSource, setWebviewSource] = (0, _react.useState)({
html: _constants.IMPConst.WEBVIEW_SOURCE_HTML
});
const [isWebViewLoaded, setIsWebViewLoaded] = (0, _react.useState)(false);
const [showLoading, setShowLoading] = (0, _react.useState)(true);
const webview = /*#__PURE__*/(0, _react.createRef)();
const smilepayRef = (0, _react.useRef)(false);
let redirectUrl = _constants.IMPConst.M_REDIRECT_URL;
if (data.m_redirect_url !== undefined && data.m_redirect_url.trim() !== '') {
redirectUrl = data.m_redirect_url;
} else {
data.m_redirect_url = redirectUrl;
}
(0, _react.useEffect)(() => {
const {
pg
} = data;
if (pg.startsWith('smilepay') && _reactNative.Platform.OS === 'ios' && !smilepayRef.current) {
/**
* [feature/smilepay] IOS - 스마일페이 대비 코드 작성
* 스마일페이 결제창을 iframe 방식으로 띄우기 때문에 WKWebView에서 서드 파티 쿠키가 허용되지 않아
* WKWebView의 baseUrl을 강제로 스마일페이 URL로 적용
*/
setWebviewSource({
...webviewSource,
baseUrl: _constants.IMPConst.SMILEPAY_BASE_URL
});
smilepayRef.current = true;
}
}, [data, webviewSource]);
(0, _react.useEffect)(() => {
const handleOpenURL = event => {
const {
pg,
pay_method
} = data;
if (pay_method === 'trans') {
const iamportUrl = new _IamportUrl.default(event.url);
/* 나이스 - 실시간 계좌이체 대비 */
if (pg.startsWith('nice')) {
var _data$app_scheme, _webview$current;
const queryParameters = iamportUrl.getQuery();
const scheme = iamportUrl.scheme;
let niceTransRedirectionUrl;
if (scheme === ((_data$app_scheme = data.app_scheme) === null || _data$app_scheme === void 0 ? void 0 : _data$app_scheme.toLowerCase())) {
if (queryParameters.callbackparam1 != null) {
niceTransRedirectionUrl = queryParameters.callbackparam1;
}
}
(_webview$current = webview.current) === null || _webview$current === void 0 || _webview$current.injectJavaScript(`
window.location.href = "${niceTransRedirectionUrl}?${iamportUrl.getStringifiedQuery()}";
`);
}
}
};
const subscription = _reactNative.Linking.addEventListener('url', handleOpenURL);
return function cleanup() {
subscription.remove();
};
}, [data, redirectUrl, webview]);
const removeLoadingNeeded = () => {
if (showLoading && _reactNative.Platform.OS === 'android') {
// 로딩상태. 안드로이드 플랫폼
if (isWebViewLoaded) {
// 웹뷰 로드 끝. 리디렉션 방식
return true;
}
return isIframeWayPayment();
}
// IOS
return false;
};
const isIframeWayPayment = () => {
const {
pg,
pay_method,
customer_uid
} = data;
if (pg.startsWith('html5_inicis') && customer_uid) {
// 이니시스 빌링결제
return true;
}
if (pg.startsWith('mobilians') && pay_method === 'phone') {
// 모빌리언스 휴대폰 소액결제
return true;
}
return pg.startsWith('danal') || pg.startsWith('danal_tpay') || pg.startsWith('smilepay') || pg.startsWith('payco') || pg.startsWith('bluewalnut') || pg.startsWith('settle_acc');
};
const validation = new _ValidationForPayment.default(userCode, loading, callback, data);
if (validation.getIsValid()) {
const {
loadingContainer,
webViewContainer
} = _styles.default;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
containerStyle: webViewContainer,
ref: webview,
source: webviewSource,
mixedContentMode: 'always',
onLoadEnd: () => {
if (!isWebViewLoaded) {
var _webview$current4;
if (data.pg.startsWith('eximbay')) {
data.popup = false;
}
if (tierCode) {
var _webview$current2;
(_webview$current2 = webview.current) === null || _webview$current2 === void 0 || _webview$current2.injectJavaScript(`
setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
`);
} else {
var _webview$current3;
(_webview$current3 = webview.current) === null || _webview$current3 === void 0 || _webview$current3.injectJavaScript(`
setTimeout(function() { IMP.init("${userCode}"); });
`);
}
(_webview$current4 = webview.current) === null || _webview$current4 === void 0 || _webview$current4.injectJavaScript(`
setTimeout(function() {
IMP.request_pay(${JSON.stringify(data)}, function(response) {
window.ReactNativeWebView.postMessage(JSON.stringify(response));
});
});
`);
setIsWebViewLoaded(true);
}
// only for Android
if (removeLoadingNeeded()) {
setShowLoading(false);
}
}
/* PG사가 callback을 지원하는 경우, 결제결과를 받아 callback을 실행한다 */,
onMessage: e => {
/**
* [v1.6.0] 다날의 경우 response에 주문명(name)이 포함되어 있는데
* 주문명에 %가 들어갈 경우, decodeURIComponent시 URI malformed 에러가 발생하는 것 대비해
* 우선 encodeURIComponent를 한 후, decodeURIComponent가 끝나면
* 최종적으로 decodeURIComponent를 한 번 더 한다
*/
const encoded = encodeURIComponent(e.nativeEvent.data);
const decoded = decodeURIComponent(encoded);
const response = JSON.parse(decoded);
if (typeof callback === 'function') {
callback(response);
}
},
originWhitelist: ['*'] // https://github.com/facebook/react-native/issues/19986
,
sharedCookiesEnabled: true,
onShouldStartLoadWithRequest: request => {
const {
url
} = request;
// console.log(`url: ${url}`);
const iamportUrl = new _IamportUrl.default(url);
if (iamportUrl.isPaymentOver(redirectUrl, data)) {
if (typeof callback === 'function') {
if (data.pg.startsWith('html5_inicis') && data.pay_method === 'trans' && _reactNative.Platform.OS === 'ios') {
callback(iamportUrl.getInicisTransQuery(redirectUrl));
} else {
callback(iamportUrl.getQuery());
}
}
return false;
}
if (iamportUrl.isAppUrl()) {
/* 3rd-party 앱 오픈 */
iamportUrl.launchApp().catch(e => {
const {
code,
message
} = e;
callback({
imp_success: false,
error_code: code,
error_msg: message
});
});
return false;
}
if (isWebViewLoaded && showLoading && iamportUrl.isIframeLoaded()) {
/**
* only for IOS
* iframe이 load되면(url이 about:blank 또는 https://service.iamport.kr이 아니면)
* webview의 loading 상태를 해제한다
*/
setShowLoading(false);
}
return true;
}
}), showLoading && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: loadingContainer
}, loading || /*#__PURE__*/_react.default.createElement(_Loading.default, null)));
}
return /*#__PURE__*/_react.default.createElement(_ErrorOnParams.default, {
message: validation.getMessage()
});
}
var _default = exports.default = Payment;
//# sourceMappingURL=index.js.map