https://github.com/arifshariati/react-stripe
💳. stripe payment gateway react component. Do give it a try for your projects. For better experience of data flow, i have integrated firebase firestore to perform CRUD on stripe payment transaction.
https://github.com/arifshariati/react-stripe
expre material-ui nodejs reactjs stripe
Last synced: 4 days ago
JSON representation
💳. stripe payment gateway react component. Do give it a try for your projects. For better experience of data flow, i have integrated firebase firestore to perform CRUD on stripe payment transaction.
- Host: GitHub
- URL: https://github.com/arifshariati/react-stripe
- Owner: arifshariati
- Created: 2020-11-13T08:19:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-04T15:22:25.000Z (about 4 years ago)
- Last Synced: 2025-02-21T15:51:00.951Z (4 months ago)
- Topics: expre, material-ui, nodejs, reactjs, stripe
- Language: JavaScript
- Homepage:
- Size: 3.51 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-stripe
💳. stripe payment gateway react component. Do give it a try for your projects. For better experience of data flow, i have integrated firebase firestore to perform CRUD on stripe payment transaction.
[Checkout DEMO](https://stripe-react-integration.netlify.app/)
## How it works !
## Data flow
* Use Proceeds to checkout after product selection (asumption, customer is already in his/her cart page and processing checkout)
* stripe comes into action - takes user information such as email, shipping and billing details and card details
* stipe-api
* once user presses checkout button, stripe gets use details and performs checkout process at stripe end such as create new user, create charge (everything related to payment i.e. credit card verification, payment processing etc.)
* Once stripe is is done with its internal processing, it sends response to be received by react front end. This response can be either error (failure of payment, integration set up etc.) or payment data in case of success. Note that react front-end does not store users credit card details.
* upon success response from stripe, react front-end de-structures required input data from stripe response and sends to firebase firestore. Here, you can store bunch of data however, in this project for the sack of demonstration, i have pulled basic user inforamation i.e. name, email, billing address and product details.
* firebase firestore is integrated with react front-end in realtime and transactions are seamless.
Hope i have explained at least basisc of payment processing to some extent. if you have any query, let me know. Happy coding ☺️ ☺️
## Available Scripts
In the project directory, you can run:
### `yarn start` or `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.