feat: 기능 세팅

Eumhongin · Sep 16, 2022 · 57238fd · 57238fd
1 parent 363dfe3
commit 57238fd
Show file tree

Hide file tree

Showing 9 changed files with 10,412 additions and 15 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,20 +1,10 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-toss-payments';
+import TossPayment from 'react-native-toss-payments';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
-
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
-
-  return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
-  );
+  return <View style={styles.container}></View>;
 }
 
 const styles = StyleSheet.create({

diff --git a/package.json b/package.json
@@ -147,5 +147,8 @@
         }
       ]
     ]
+  },
+  "dependencies": {
+    "react-native-webview": "^11.23.1"
   }
 }
diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx
@@ -0,0 +1,97 @@
+import { SafeAreaView } from 'react-native';
+import React from 'react';
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+
+import { isAppUrl, isBlank, openPGApp } from '../../libs/libs';
+import type { TossPaymentRequestDataTypes } from './types/payment.types';
+
+type Props = {
+  clientKey: string;
+  payment: TossPaymentRequestDataTypes;
+  onWebViewMessageReceived: (e: WebViewMessageEvent) => void;
+  detectIsLoading: (isLoading: boolean) => void;
+};
+
+const Payment = ({
+  clientKey,
+  payment,
+  onWebViewMessageReceived,
+  detectIsLoading,
+}: Props) => {
+  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 (
+    <SafeAreaView
+      style={{
+        flex: 1,
+      }}
+    >
+      <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;
+          console.log(url, mainDocumentURL);
+          if (isBlank(url, mainDocumentURL)) {
+            detectIsLoading(true);
+            return true;
+          }
+
+          detectIsLoading(false);
+
+          if (isAppUrl(url)) {
+            console.log('앱 URL 입니다.');
+            /* 3rd-party 앱 오픈 */
+            // console.log('3rd-party 앱 오픈');
+            openPGApp(url).catch((e) => {
+              // const { code, message } = e;
+              console.log(e);
+              // callback({
+              //   imp_success: false,
+              //   error_code: code,
+              //   error_msg: message,
+              // });
+            });
+
+            return false;
+          }
+          console.log('앱 URL 아닙니다.');
+          return true;
+        }}
+      />
+    </SafeAreaView>
+  );
+};
+
+export default Payment;
diff --git a/src/components/Payment/containers/PaymentContainer.tsx b/src/components/Payment/containers/PaymentContainer.tsx
@@ -0,0 +1,74 @@
+import React, { useCallback } from 'react';
+import Payment from '../Payment';
+
+import type {
+  TossPaymentApproveTypes,
+  TossPaymentFailMessageTypes,
+  TossPaymentRequestDataTypes,
+  TossPaymentResultMessageTypes,
+} from '../types/payment.types';
+
+import type { WebViewMessageEvent } from 'react-native-webview';
+
+type Props = {
+  clientKey: string;
+  payment: TossPaymentRequestDataTypes;
+  onLoading: (isLoading: boolean) => void;
+  onApproveError: () => void;
+  onApproveFailed: (e: TossPaymentFailMessageTypes) => void;
+  onApproveSucceed: (e: TossPaymentApproveTypes) => void;
+};
+
+const PaymentContainer = ({
+  clientKey,
+  payment,
+  onLoading,
+  onApproveError,
+  onApproveFailed,
+  onApproveSucceed,
+}: Props) => {
+  const onWebViewMessageReceived = useCallback(
+    async (e: WebViewMessageEvent) => {
+      const tossPaymentMessageFromWeb = JSON.parse(
+        e.nativeEvent.data
+      ) as TossPaymentResultMessageTypes;
+
+      console.log(tossPaymentMessageFromWeb);
+
+      // 웹뷰로 부터 성공 및 실패 둘중 아무것도 받지못했을떄.
+      if (!tossPaymentMessageFromWeb.type) {
+        onApproveError();
+        return;
+      }
+
+      // 결제 실패했을경우
+      if (tossPaymentMessageFromWeb.type === 'fail') {
+        onApproveFailed(tossPaymentMessageFromWeb.data);
+        return;
+      }
+
+      // 결제 승인되었을경우
+      onApproveSucceed(tossPaymentMessageFromWeb.data);
+    },
+    [onApproveSucceed, onApproveError, onApproveFailed]
+  );
+
+  const detectIsLoading = useCallback(
+    (isLoading: boolean) => {
+      console.log(isLoading);
+      onLoading(isLoading);
+    },
+    [onLoading]
+  );
+
+  return (
+    <Payment
+      clientKey={clientKey}
+      payment={payment}
+      onWebViewMessageReceived={onWebViewMessageReceived}
+      detectIsLoading={detectIsLoading}
+    />
+  );
+};
+
+export default PaymentContainer;
-Original file line number
+Diff line change
@@ Expand Up / @@ -147,5 +147,8 @@ @@
             }
           ]
         ]
+      },
+      "dependencies": {
+        "react-native-webview": "^11.23.1"
       }
     }