Stripe Payments Application

This quickstart repository consists of a hasura project with a basic Stripe payment app integrated on both the Web (using React) and on mobile (using React Native). It can also be used as a boilerplate by any company to get a running payment portal. Follow along to learn on how this quickstart works.

Pre-requisites

• NodeJS

• hasura CLI

• React-native

• yarn packager

Hasura APIs Used

1. Auth API We used the Auth API for the login/signup part with OTP

2. The Data API For storing various data related to transactions and retrieving it, we have used the Data APIs This quickstart app comes with seven pre-created tables author, article (Hasura defaults) and transactions

   transactions

   column	type
   user	Text
   transaction_id	Text - primary key
   amount	Integer
   currency	Text
   paid	Boolean
   mes	Text
   count	Integer(Auto-increament)

   Here mes stands for 'message'

How this App Works (Basic Process)

1. The user logs in the application
2. The user enter details of his card
3. A token is generated by stripe
4. This token is then sent to our server to create a charge i.e. to deduct an amount
5. The charges that have been deducted can be viewed on the Stripe dashboard. Moreover, if a bank acoount is properly configured with stripe, it can directly recieve payments once the transaction is completed successfully and validated. However, for verifying this account, you would need an international account, which currently we lack, Sorry :) Nevertheless, the app is currently working in test mode and the charges made can be seen as follows:

Front-end Demo

React Native

An application for Android showing some of the front-end interface is as follows:

1. Login screen

---

---

2. OTP screen:

---

---

3. Card Payment screen:

---

---

4. Bank Payment screen:

---

---

5. Last Transactions screen:

---

---

The source code can be found in the native-app folder of this quickstart.

Also the required documentation of front-end can be found here

Live link of our Application

Our react-native app can be seen live on expo here

APK of our Application

The APK can be downloaded from Google Drive from here

Deployment Instruction

Setting up a Stripe Account

1. Create an account on Stripe
2. Go to Dashboard to obtain your API keys:
3. Copy these keys, as they will be required for further steps.

Getting the Hasura Project

Just run the following commands to get the project up and running.

# Cloning the project
$ hasura quickstart dvk/stripe-pay --type free
# Add Stripe secret API key to hasura secrets.
$ hasura secrets update secretkey.key  <Your Stripe secret API KEY>
# Get hasura user token for otp
$ hasura user-info
# use the token from above command in next step
$ hasura secrets update notify.hasura.token "<token>"
# Deploy
$ git add . && git commit -m "Deployment commit"
$ git push hasura master

Getting the Front-end Running

Now, run the following command to get a cluster name $ hasura cluster list Sample output:

$ hasura cluster list
You have created 2 of 2 free clusters.
  # delete clusters that are not required using:
  $ hasura cluster delete [cluster-name]

Clusters available in your account:
NO   NAME        OWNER
1    advance88   you
2    adsorb13   you

Clusters added to this project:
NO   NAME        ALIAS
1    adsorb13   hasura

Here, the cluster name allocated to the project is 'adsorb13'. Also, add the publishable key of stripe in this file.

Getting the app to run

To get the app running, modify the cluster name in cluster.json file in native-app folder After modification, it should like:

{
  "name":"adsorb13",
  "publishable_key": "pk_test_mTGHyef7YcBAZ9qIRcUAHrbO"
}

Here, 'adsorb13' should be replaced by your cluster name and the publishable key should also be updated.

Run the following commands to compile the native code for mobile

# changing to native-app folder
$ cd native-app
# Adding dependencies
$ yarn install
# Loading packager
$ yarn start
# Now depending on your choice ios or android choose a for android, or i for icons
$ a

Congratulations, you've got the app running successfully.

More on Deployment

Deploying changes

Following are the instructions to make some changes to our backend app and then deploy them.

Modify the server.js file at microservices/api/src/service.js to serve your purpose.

Save server.js.

To deploy these changes to your cluster, you just have to commit the changes to git and perform a git push to the hasura remote.

$ # Git add, commit & push to deploy to your cluster
$ git add .
$ git commit -m 'Added a new route'
$ git push hasura master

To see the changes, open the URL and navigate to specific endpoint to veiw the changes.

View Logs

To view the logs for your microservice, run the following commands once the cluster is published

$ # app is the service name
$ hasura microservice logs api

Know the Developers

1. Vidita Kher - React
2. Akash Ravi - NodeJS Express
3. Ravikant Verma - NodeJS Express
4. Divyanshu Kumar - React Native

However, this app is our collaborative effort, irrespective of our languages. The react front-end will be updated soon.

Found a bug?

Please feel free to report a bug here, or mail me at divyanshukumarg@gmail.com

Known issues

The bank payment doesn't work well due to the lack of an international account for verification, we would be glad if you could come up with a solution, we are trying to figure it out too.

---

Happy Developing :)

---

Divyanshu Kumar

---