React native ecommerce app with stripe
70.2 هزار بار بازدید -
3 سال پیش
-
React native ecommerce app with
React native ecommerce app with stripe
**** Alert ******
Better/New way to setup the firebase: React native ecommerce app with stripe
#react-native#ecommerce#stripe
This video shows all the steps for creating ecommerce app with stripe. The app is created using bare workflow of expo. The below repos contains all the code for you to get started.
App use Firebase authentication flow i have built in my old video. Link for video. ( The starter repo contains this )
React native video call app free | we...
STARTER REPO REACT NATIVE: https://github.com/techTutorialsYTube...
STARTER REPO BACK END: https://github.com/techTutorialsYTube...
Video Timestamp:
00:00 Demo
02:11 Flow
02:45 Firebase setup
04:27 React native app build
45:09 React native stripe integration
58:00 Nodejs ecommerce backend
01:19:25 React native eCommerce UI
01:42:02 Final demo
Getting started:
Run following for both repos. It should install all the dependencies.
------------------------------------------------------------------
npm install
------------------------------------------------------------------
Create your stripe account, and get the test publish key and private key from the dashboard.
There is uploader.js in backend repo which will create the products in firestore.
1. Flow:
SIGN UP flow:
When the customers sign up for the ecommerce app, app will sign up using firebase and will create the stripe customer for the user in the background which is required for stripe integration.
CHECKOUT FLOW:
When the user click on checkout we will hit our node sever which will go through the customer cart to create PaymentIntent. The PaymentIntent is passed back to the app, which will show the stipe payment sheet. When the user completes the payment, stipe will call our webhook ( nodesever) with payment_intent.succeeded which we will use to confirm the order.
2. Firebase setup:
Code for Firebase setup:
------------------------------------------------------------------
https://rnfirebase.io
classpath'com.google.gms:google-services:4.3.4'
apply plugin: 'com.google.gms.google-services'
------------------------------------------------------------------
As show in the video, Use the version that will be provided during the app creation.
• IOS setup:
------------------------------------------------------------------
https://rnfirebase.io/#3-ios-setup
------------------------------------------------------------------
Complete this steps, you will be able to follow along. (Only this step is different in IOS )
Firestore Setup:
Firestore database rules needs to changed as show in the video. This will prevent anyone from changing the product price or changing the price in order document.
- This will provide read access to products document.
- Will provide access to read, update and delete access to the respective user carts document.
Firestore products:
uploader.js in backend repo will create the products required for this project. Run
------------------------------------------------------------------
node uploader.js
------------------------------------------------------------------
3. React native app build:
In this step you will build complete functionality of the app.
We will build on top of firebase authentication flow i have built earlier. This
- We will create React native bottom navigation which will contain home screen, checkout screen and profile screen.
- Home screen will make the call to firestore and get all products and call grid component which will display all the products.
- Once we click on product in grid, user will be taken to product screen were he can add the product to cart.
- Checkout screen will list all the products in the cart. The cart will be stored in firestore.
4. React native stripe integration:
- Once user click on buy now, we will make a call to our node sever (/checkout). Which will provide paymentIntent. Then we will display the payment page that’s pre built from stripe.
- Once the user pays, Stripe will call our webhook to confirm the payment.
5. Nodejs ecommerce backend:
- The nodesever will go through the user cart and create the stripe paymentInetent create firestore document caller order with payment intent id.
- Once the payment is confirmed stripe will call the webhook. Our code then will confirm the order by updating the firestore order document with success.
- The flow will be complete.
6. React native styling:
We will style in the app as show in the demo. I have the created this style from ground up. Let me know if you like to see a video about it in the comment section.
Please support me on Patreon (Source code): Patreon: 54627424
**** Alert ******
Better/New way to setup the firebase: React native ecommerce app with stripe
#react-native#ecommerce#stripe
This video shows all the steps for creating ecommerce app with stripe. The app is created using bare workflow of expo. The below repos contains all the code for you to get started.
App use Firebase authentication flow i have built in my old video. Link for video. ( The starter repo contains this )
React native video call app free | we...
STARTER REPO REACT NATIVE: https://github.com/techTutorialsYTube...
STARTER REPO BACK END: https://github.com/techTutorialsYTube...
Video Timestamp:
00:00 Demo
02:11 Flow
02:45 Firebase setup
04:27 React native app build
45:09 React native stripe integration
58:00 Nodejs ecommerce backend
01:19:25 React native eCommerce UI
01:42:02 Final demo
Getting started:
Run following for both repos. It should install all the dependencies.
------------------------------------------------------------------
npm install
------------------------------------------------------------------
Create your stripe account, and get the test publish key and private key from the dashboard.
There is uploader.js in backend repo which will create the products in firestore.
1. Flow:
SIGN UP flow:
When the customers sign up for the ecommerce app, app will sign up using firebase and will create the stripe customer for the user in the background which is required for stripe integration.
CHECKOUT FLOW:
When the user click on checkout we will hit our node sever which will go through the customer cart to create PaymentIntent. The PaymentIntent is passed back to the app, which will show the stipe payment sheet. When the user completes the payment, stipe will call our webhook ( nodesever) with payment_intent.succeeded which we will use to confirm the order.
2. Firebase setup:
Code for Firebase setup:
------------------------------------------------------------------
https://rnfirebase.io
classpath'com.google.gms:google-services:4.3.4'
apply plugin: 'com.google.gms.google-services'
------------------------------------------------------------------
As show in the video, Use the version that will be provided during the app creation.
• IOS setup:
------------------------------------------------------------------
https://rnfirebase.io/#3-ios-setup
------------------------------------------------------------------
Complete this steps, you will be able to follow along. (Only this step is different in IOS )
Firestore Setup:
Firestore database rules needs to changed as show in the video. This will prevent anyone from changing the product price or changing the price in order document.
- This will provide read access to products document.
- Will provide access to read, update and delete access to the respective user carts document.
Firestore products:
uploader.js in backend repo will create the products required for this project. Run
------------------------------------------------------------------
node uploader.js
------------------------------------------------------------------
3. React native app build:
In this step you will build complete functionality of the app.
We will build on top of firebase authentication flow i have built earlier. This
- We will create React native bottom navigation which will contain home screen, checkout screen and profile screen.
- Home screen will make the call to firestore and get all products and call grid component which will display all the products.
- Once we click on product in grid, user will be taken to product screen were he can add the product to cart.
- Checkout screen will list all the products in the cart. The cart will be stored in firestore.
4. React native stripe integration:
- Once user click on buy now, we will make a call to our node sever (/checkout). Which will provide paymentIntent. Then we will display the payment page that’s pre built from stripe.
- Once the user pays, Stripe will call our webhook to confirm the payment.
5. Nodejs ecommerce backend:
- The nodesever will go through the user cart and create the stripe paymentInetent create firestore document caller order with payment intent id.
- Once the payment is confirmed stripe will call the webhook. Our code then will confirm the order by updating the firestore order document with success.
- The flow will be complete.
6. React native styling:
We will style in the app as show in the demo. I have the created this style from ground up. Let me know if you like to see a video about it in the comment section.
Please support me on Patreon (Source code): Patreon: 54627424
3 سال پیش
در تاریخ 1400/05/08 منتشر شده
است.
70,255
بـار بازدید شده