Stripe Payment Gateway Integration — 1

lostbarncoffee.co.uk

Our aim in this payment gateway article series is as follows

• Understand the basics of stripe payment function. i.e how stripe payment gateway works?
• Review Stripe dashboard according to developer point of view.
• Setup basic nodejs project and routes of the project. So we can start to code there.
• Install necessary packages for stripe and write the helper function of the stripe payment gateway.
• Postman collection to call API.
• Stripe integration on client-side with React js.

As we know stripe is a very popular and trusted payment gateway around the world. Over the years many countries adopted the stripe payment gateway in their respective country. So, today we are going to review flow diagram and basics of Stripe payment gateway.

How does Stripe payment gateway work?

Stripe is very easy to integrate but before that how it gets processed end to end will give us a very clear idea.

The above picture gives us a clear end-to-end flow that how a payment is initiated from the client-side then it goes to the server and …..? Wait I will be explaining to you all the steps one by one.

Step 1:

• Yes, the client is the payment initiator 😎.
• In the above diagram, we can see that in between client and server payment gets initiated whenever the user request payment. In this client send some information like which product ( Product id)user is trying to buy and in what quantity.

{
  "productId": "80980928378932", // which product user is trying to buy
  "quantity" 10 // What quantity 
}

Step 2:

• Now server received a request with the product id and quantity of the product.
• Now here process the request with custom logic. example with productId and quantity collect name, total price, discount, etc.

{
  currency: "INR",
  productName: "sampleItem",
  amount: 100*100//PriceofproductinINRand2nd100isconvertedintopaisesquantity: 1,
  metadata: customeMetadata//Fordeveloperreferece,
  transectionId: "transectionId"
}

• Once information is collected of product and price then send this data to stripe to create order.

Step 3:

• When stripe receives the order create request from the server it creates an order request and sends a payload with orderId to the server. As we can see in diagram step 3. Here is the sample payload which is sent by stripe

{
  "id": "order_Hdn872dRN1KSqc",
  "entity": "order",
  "amount": 1340,
  "amount_paid": 0,
  "amount_due": 1340,
  "currency": "USD",
  "receipt": "60ff70409ddd8034de404e73",
  "offer_id": null,
  "status": "created",
  "attempts": 0,
  "created_at": 1627353155
}

Step 4:

• Again our server will receive the same response which is sent by Stripe. What we can see in the above JSON data.
• Next, the same response is going to return to the client which is shown in the fig as step 4.

Step 5:

• Once again payment control is on the user side.
• Here on the client-side JSON data is needed to fill in the client stripe library as payload and then
• Users will get a new page of Stripe where the user will fill in all the necessary details of payment mode
• Once payment information is filed by the user that clicks on pay.
• Here now direct call will happen with the Stripe server.
• Stripe server will validate all the information like card details etc and deduct the money from the client's account.
• Once payment is successful and then send information to the clip ent and server.

Step 6:

• When the client receives a successful response from Stripe then show some success message.
• And serve er receives the payment success message then the server will validate the request and amount. After that add the product to the user account. In the next article, we will see step 6 more precisely.

Bored right? Don’t worry in the next article on Stripe integration we are going to do real coding.

Feedback: This is the first article that I am writing. If any suggestions from readers please comment in the comment section. I will surely try to improve in future as well as this article.