react-native-toss-payments
Version:
리액트 네이티브용 토스페이먼츠 결제 연동 라이브러리
74 lines (66 loc) • 1.87 kB
JavaScript
import React from 'react';
import { SafeAreaView } from 'react-native';
import WebView from 'react-native-webview';
import { isAppUrl, isBlank, openPGApp } from '../../libs/libs';
const Payment = _ref => {
let {
clientKey,
payment,
onWebViewMessageReceived,
detectIsLoading
} = _ref;
const WEBVIEW_SOURCE_HTML = `
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://js.tosspayments.com/v1"></script>
</head>
<body>
<script>
var clientKey = '${clientKey}'
var tossPayments = TossPayments(clientKey) // 클라이언트 키로 초기화하기
</script>
</body>
</html>
`;
return /*#__PURE__*/React.createElement(SafeAreaView, {
style: {
flex: 1
}
}, /*#__PURE__*/React.createElement(WebView, {
style: {
flex: 1
},
source: {
html: WEBVIEW_SOURCE_HTML
},
injectedJavaScript: `
tossPayments.requestPayment('카드',${JSON.stringify(payment)}).catch(err => {
window.ReactNativeWebView.postMessage(JSON.stringify(err));
})
`,
onMessage: onWebViewMessageReceived,
originWhitelist: ['*'],
sharedCookiesEnabled: true,
onShouldStartLoadWithRequest: request => {
const {
url,
mainDocumentURL
} = request;
if (isBlank(url, mainDocumentURL)) {
detectIsLoading(true);
return true;
}
detectIsLoading(false);
if (isAppUrl(url)) {
/* 3rd-party 앱 오픈 */
openPGApp(url);
return false;
}
return true;
}
}));
};
export default Payment;
//# sourceMappingURL=Payment.js.map