rashidmakki / mycart

a shopping app integrated with firebase , redux for state management and stripe api for payment.

mycart

a react-native shopping app integrated with firebase , redux for state management and stripe api for payment.

To run this app successfully please follow the steps:

I have developed this app using react-native cli, haven't used expo cli. This app can only run on Android for now as firebase Integration ,unimodules Installation and configuration of react-native-splash-screen has not been done on IOS yet. To run this app on IOS configures all the packages given in step 2.

Step 1:

git clone https://github.com/rashidmakki/mycart.git

Step 2:

Integrate firebase with your app

Already Configured for Android.Only download your google-services.json file after creating a new Android Project from firebase and place it at android/app/ .

For IOS you have to configure it on your own for now.

Install Unimodules

Already Configured for Android.

For IOS you have to configure it on your own for now.

Installation of react-native-splash-screen

Already Configured for Android.

For IOS you have to configure it on your own for now.

Expo-stripe-Payment

Already Configured for Android.

For IOS you have to configure it on your own for now.

Note: If you have installed all the above packages and configured it on the both Android and Ios then you are free to use app on both the platform.

Step 3:

Place you webClientId at ./screens/stackComponent.js.You can find your webClientId at firebase in Authentication Section. If You are new then signup on Firebase to get the webClientId.

   async componentDidMount() {
	    await GoogleSignin.configure({
         webClientId:'Client_Id', // client ID of type WEB for your server(needed to verify user ID and offline access)
         offlineAccess: true, // if you want to access Google API on behalf of the user FROM YOUR SERVER
         forceCodeForRefreshToken: true, // [Android] related to `serverAuthCode`, read the docs link below *.
         accountName: '', // [Android] specifies an account name on the device that should be used
     });
   } 

Step 4:

Place Your Publishable Key at ./components/stripeButton.js.You can find your Publishable Key at Stripe.If You are new then signup on Stripe to get the Publishable Key.

   await Stripe.setOptionsAsync({
   publishableKey: 'Your Publishable Key' //  Your key
 });

Step 5:

To make a transaction successful you have to create you server and with the help of stripe api we can make transaction which will be shown on your stripe account once it is successfull or failed.

If you are familiar with backend then provide your endpoint where you want to send your data and then get the response.

 fetch(`YOUR ENDPOINT HERE`,{    //example https://www.mycart.com/checkout
 method:'POST',
 headers:{
   'Content-Type':'application/json',
   'Accept':'application/json'
 },
 body:JSON.stringify(body)
})

If you are new to backend and nodeJs then clone the repo mycart-api and follow the few steps shown there.

Step 6:

Download the react-native-cli : npm i react-native-cli if you haven't.

Run the following command from the root folder of your app in the terminal:

npm install

react-native run-android

on another terminal: react-native start

Now the app is ready to run.Wait till it execute all the files.

Note: If you are facing issue regarding adb devices or Android SDK, Android SDK Platform, Android Virtual Device that is because you haven't set up Android Development Environment properly.You can also refer to stackoverflow for the same.