chore: 토스 페이먼츠 세팅

android/app/src/main/AndroidManifest.xml

@@ -9,7 +9,8 @@
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
       android:theme="@style/AppTheme"
-      android:supportsRtl="true">
+      android:supportsRtl="true"
+      android:usesCleartextTraffic="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"

ios/Podfile.lock

@@ -1259,6 +1259,8 @@ PODS:
     - react-native-config/App (= 1.5.3)
   - react-native-config/App (1.5.3):
     - React-Core
+  - react-native-date-picker (5.0.7):
+    - React-Core
   - react-native-encrypted-storage (4.0.3):
     - React-Core
   - react-native-safe-area-context (4.11.0):
@@ -1610,6 +1612,48 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - SocketRocket (0.7.0)
+  - tosspayments-react-native-webview (1.0.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - widget-sdk-react-native (1.3.5):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - Yoga (0.0.0)
 
 DEPENDENCIES:
@@ -1652,6 +1696,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-config (from `../node_modules/react-native-config`)
+  - react-native-date-picker (from `../node_modules/react-native-date-picker`)
   - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
@@ -1684,6 +1729,8 @@ DEPENDENCIES:
   - "RNNaverLogin (from `../node_modules/@react-native-seoul/naver-login`)"
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
+  - tosspayments-react-native-webview (from `../node_modules/tosspayments-react-native-webview`)
+  - "widget-sdk-react-native (from `../node_modules/@tosspayments/widget-sdk-react-native`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1771,6 +1818,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-config:
     :path: "../node_modules/react-native-config"
+  react-native-date-picker:
+    :path: "../node_modules/react-native-date-picker"
   react-native-encrypted-storage:
     :path: "../node_modules/react-native-encrypted-storage"
   react-native-safe-area-context:
@@ -1835,6 +1884,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-screens"
   RNVectorIcons:
     :path: "../node_modules/react-native-vector-icons"
+  tosspayments-react-native-webview:
+    :path: "../node_modules/tosspayments-react-native-webview"
+  widget-sdk-react-native:
+    :path: "../node_modules/@tosspayments/widget-sdk-react-native"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1881,6 +1934,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 1c08607305558666fd16678b85ef135e455d5c96
   React-microtasksnativemodule: 87b8de96f937faefece8afd2cb3a518321b2ef99
   react-native-config: 8f7283449bbb048902f4e764affbbf24504454af
+  react-native-date-picker: 06a4d96ab525a163c7a90bccd68833d136b0bb13
   react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 57781b79e11d5af7573e6f77cbf1143b71802a6d
@@ -1914,6 +1968,8 @@ SPEC CHECKSUMS:
   RNScreens: 19719a9c326e925498ac3b2d35c4e50fe87afc06
   RNVectorIcons: 6382277afab3c54658e9d555ee0faa7a37827136
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
+  tosspayments-react-native-webview: 34b2e7891a242dc44bed02f31b02ef2839c9a81b
+  widget-sdk-react-native: 2d163a01edeaa598337a5559c06dda6fef894de4
   Yoga: a1d7895431387402a674fd0d1c04ec85e87909b8
 
 PODFILE CHECKSUM: 06c40fb6714089135ec9e5328c02abea7ae4e3cd

package.json

@@ -20,6 +20,7 @@
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
+    "@tosspayments/widget-sdk-react-native": "^1.3.5",
     "@types/react-native-vector-icons": "^6.4.18",
     "axios": "^1.7.4",
     "dayjs": "^1.11.13",
@@ -32,7 +33,8 @@
     "react-native-paper": "^5.12.5",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-screens": "^3.34.0",
-    "react-native-vector-icons": "^10.1.0"
+    "react-native-vector-icons": "^10.1.0",
+    "tosspayments-react-native-webview": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/context/TossPaymentProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {PaymentWidgetProvider} from '@tosspayments/widget-sdk-react-native';
+
+// TODO: Replace the clientKey and customerKey with your own keys
+const TossPaymentProvider = ({children}: {children: React.ReactNode}) => {
+  return (
+    <PaymentWidgetProvider
+      clientKey={`test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm`}
+      customerKey={`wGidPqu8iPkhWTQaqm_Ad`}>
+      {children}
+    </PaymentWidgetProvider>
+  );
+};
+
+export default TossPaymentProvider;

src/context/index.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import NavigationProvider from './NavigationProvider';
 import ReactNativePaperProvider from './ReactNativePaperProvider';
 import EmotionProvider from './EmotionProvider';
+import TossPaymentProvider from './TossPaymentProvider';
 
 const RootProvider = ({children}: {children: React.ReactNode}) => {
   return (
     <NavigationProvider>
       <EmotionProvider>
-        <ReactNativePaperProvider>{children}</ReactNativePaperProvider>
+        <ReactNativePaperProvider>
+          <TossPaymentProvider>{children}</TossPaymentProvider>
+        </ReactNativePaperProvider>
       </EmotionProvider>
     </NavigationProvider>
   );

src/screens/PaymentScreen/PaymentPage.tsx

@@ -1,9 +1,16 @@
-import React, {useMemo} from 'react';
-import {Text} from 'react-native-paper';
+import React, {useMemo, useState} from 'react';
+import {Alert} from 'react-native';
 
 import {useNavigation} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 
+import {
+  AgreementWidget,
+  AgreementWidgetControl,
+  PaymentMethodWidget,
+  usePaymentWidget,
+} from '@tosspayments/widget-sdk-react-native';
+
 import {CartType} from '@/types/OrderType';
 import {RootStackParamList} from '@/types/StackNavigationType';
 import {BottomButton} from '@components/common';
@@ -28,23 +35,81 @@ const PaymentPage = ({cart}: Props) => {
     [cart.products],
   );
 
+  const paymentWidgetControl = usePaymentWidget();
+  const [agreementWidgetControl, setAgreementWidgetControl] =
+    useState<AgreementWidgetControl | null>(null);
+
   return (
     <S.PaymentPage>
       <S.ScrollView>
         <DatePickerCard />
-        <Text>{'// TODO: 결제수단 서버에서 받아와야 함'}</Text>
+        <>
+          <PaymentMethodWidget
+            selector="payment-methods"
+            onLoadEnd={() => {
+              paymentWidgetControl
+                .renderPaymentMethods(
+                  'payment-methods',
+                  {value: 50000},
+                  {
+                    variantKey: 'DEFAULT',
+                  },
+                )
+                .then(control => {
+                  console.log({control});
+                });
+            }}
+          />
+          <AgreementWidget
+            selector="agreement"
+            onLoadEnd={() => {
+              paymentWidgetControl
+                .renderAgreement('agreement', {
+                  variantKey: 'DEFAULT',
+                })
+                .then(control => {
+                  setAgreementWidgetControl(control);
+                });
+            }}
+          />
+        </>
         <PaymentSummary
           originalPrice={originalPrice}
           discountPrice={discountPrice}
         />
       </S.ScrollView>
       <BottomButton
-        onPress={() =>
-          navigation.navigate('Detail', {
-            screen: 'OrderDone',
-            params: {orderId: 1},
-          })
-        }>
+        onPress={async () => {
+          if (paymentWidgetControl == null || agreementWidgetControl == null) {
+            Alert.alert('주문 정보가 초기화되지 않았습니다.');
+            return;
+          }
+
+          const agreeement = await agreementWidgetControl.getAgreementStatus();
+          if (agreeement.agreedRequiredTerms !== true) {
+            Alert.alert('약관에 동의하지 않았습니다.');
+            return;
+          }
+
+          paymentWidgetControl
+            .requestPayment?.({
+              orderId: '1lB4sMvBNySuMmzDy5PPv',
+              orderName: '토스 티셔츠 외 2건',
+            })
+            .then(result => {
+              if (result?.success) {
+                // 결제 성공 비즈니스 로직을 구현하세요.
+                // result.success에 있는 값을 서버로 전달해서 결제 승인을 호출하세요.
+                navigation.navigate('Detail', {
+                  screen: 'OrderDone',
+                  params: {orderId: 1},
+                });
+              } else if (result?.fail) {
+                // 결제 실패 비즈니스 로직을 구현하세요.
+                Alert.alert('결제 실패');
+              }
+            });
+        }}>
         {`${discountPrice.toLocaleString()}원 결제하기`}
       </BottomButton>
     </S.PaymentPage>