Merge pull request #70 from degica/dev

Dev merge to main

example/App.tsx

@@ -1,46 +1,44 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {SafeAreaView, StyleSheet} from 'react-native';
 import {KomojuSDK, LanguageTypes} from '@komoju/komoju-react-native';
 
 import PaymentScreen from './PaymentScreen';
-import SettingsModal, {SettingsIcon} from './components/settingsComponent';
 import LanguageSelectComponent from './components/languageSelectComponet';
+import getPublishableKey from './services/keyService';
+import Loader from './components/Loader';
 
 /**
- * You can get your public key and secret keys from https://komoju.com/en/sign_in
+ * You can get your Publishable key and Secret keys from https://komoju.com/en/sign_in
  * Your publishable key is required in order for Fields to access the KOMOJU API.
  * Your secret key is required in order to create a session. This should be done in your backend on a real world application
  */
-const PUBLIC_KEY = 'pk_test_bx0nb2z4jcczon39pm4m68l7';
-const SECRET_KEY = 'sk_test_61qdasmogfjxtaco2zocdaaw';
 
 function App(): React.JSX.Element {
-  const [komojuKeys, setKomojuKeys] = useState({
-    PUBLIC_KEY: PUBLIC_KEY,
-    SECRET_KEY: SECRET_KEY,
-  });
-  const [modalVisible, setModalVisible] = useState(false);
+  const [publishableKey, setPublishableKey] = useState('');
+  const [loading, setLoading] = useState(true);
   const [language, setLanguage] = useState(LanguageTypes.ENGLISH);
 
+  useEffect(() => {
+    const keyService = async () => {
+      const key = await getPublishableKey();
+      setPublishableKey(key);
+      setLoading(false);
+    };
+
+    keyService();
+  }, []);
+
   return (
     <SafeAreaView style={styles.mainContainer}>
-      <SettingsIcon setModalVisible={setModalVisible} />
       <LanguageSelectComponent language={language} setLanguage={setLanguage} />
 
       <KomojuSDK.KomojuProvider
-        publicKey={komojuKeys.PUBLIC_KEY}
+        publishableKey={publishableKey}
         language={language}>
-        <PaymentScreen secretKey={komojuKeys.SECRET_KEY} />
+        <PaymentScreen language={language} setLoading={setLoading} />
       </KomojuSDK.KomojuProvider>
 
-      {modalVisible ? (
-        <SettingsModal
-          komojuKeys={komojuKeys}
-          modalVisible={modalVisible}
-          setModalVisible={setModalVisible}
-          setKomojuKeys={setKomojuKeys}
-        />
-      ) : null}
+      {loading ? <Loader /> : null}
     </SafeAreaView>
   );
 }

example/PaymentScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {Dispatch, SetStateAction, useState} from 'react';
 import {
   useColorScheme,
   View,
@@ -9,15 +9,21 @@ import {
   Pressable,
   Alert,
 } from 'react-native';
-import {KomojuSDK} from '@komoju/komoju-react-native';
+import {KomojuSDK, SessionShowResponseType} from '@komoju/komoju-react-native';
 import createSession from './services/sessionService';
 
 export enum CurrencyTypes {
   JPY = 'JPY',
   USD = 'USD',
 }
 
-const PaymentScreen = ({secretKey}: {secretKey: string}) => {
+const PaymentScreen = ({
+  language,
+  setLoading,
+}: {
+  language: string;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+}) => {
   const [amount, setAmount] = useState('');
   const [currency, setCurrency] = useState(CurrencyTypes.JPY);
   const colorScheme = useColorScheme(); // Detects the color scheme of the device
@@ -26,13 +32,15 @@ const PaymentScreen = ({secretKey}: {secretKey: string}) => {
   const {createPayment} = KomojuSDK.useKomoju();
 
   const handleSessionPay = async () => {
+    setLoading(true);
     if (!amount) {
       Alert.alert('Error', 'Please enter an amount to checkout');
       return;
     }
 
     // fetch a session Id to initiate payment
-    const sessionId = await createSession({amount, currency, secretKey});
+    const sessionId = await createSession({amount, currency, language});
+    setLoading(false);
 
     // invoke createPayment method with sessionId as parameters to open the payment portal
     createPayment({
@@ -43,7 +51,7 @@ const PaymentScreen = ({secretKey}: {secretKey: string}) => {
   };
 
   // when the payment is complete pass a callback to get the final results of response
-  const onPaymentComplete = (response: any) => {
+  const onPaymentComplete = (response: SessionShowResponseType) => {
     console.log(`Transaction Status: ${response?.status}`);
     setAmount('');
   };

example/components/Loader.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {ActivityIndicator, StyleSheet, View} from 'react-native';
+
+const Loader = () => {
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" />
+    </View>
+  );
+};
+
+export default Loader;
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

example/services/constants.ts

@@ -0,0 +1,3 @@
+export const PUBLISHABLE_KEY_URL = 'https://rn-komoju-app.glitch.me/serve-keys';
+export const CREATE_SESSION_URL =
+  'https://rn-komoju-app.glitch.me/create-session';

example/services/keyService.ts

@@ -0,0 +1,19 @@
+import {Alert} from 'react-native';
+import {PUBLISHABLE_KEY_URL} from './constants';
+
+const getPublishableKey = async () => {
+  try {
+    const response = await fetch(PUBLISHABLE_KEY_URL);
+    const {publishableKey} = await response.json();
+
+    return publishableKey;
+  } catch (e) {
+    Alert.alert(
+      'Error',
+      'Unable to fetch publishable Key. Is your server running?',
+    );
+    return null;
+  }
+};
+
+export default getPublishableKey;