Scribd
Upload
108 views7 pages

Razorpay

This document outlines the steps for integrating Razorpay as a payment gateway, covering both frontend and backend processes. It details the setup of Razorpay accounts, installation of necessary packages, creation of payment APIs, and verification of payments. Additionally, it discusses the use of webhooks for automatic payment verification and saving payment details in a database.

Uploaded by

studyp00011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
108 views7 pages

Razorpay

This document outlines the steps for integrating Razorpay as a payment gateway, covering both frontend and backend processes. It details the setup of Razorpay accounts, installation of necessary packages, creation of payment APIs, and verification of payments. Additionally, it discusses the use of webhooks for automatic payment verification and saving payment details in a database.

Uploaded by

studyp00011
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

- Pog ment Guate uig Integration -

-!

For Payment Guateway Integration S have to do some thing


in Foontend and also Backend. whenna jor even we creatfng
using boy ment stis hobþen inîn 2 steþ.
(1) Create Drdec: /ereate -order
(2) Payment Verifica hoh: Iverybgment

Before move fo(awatd we will lean fronm scateh


-:Istep i1
11 Set-up- Razorbay
1 Sign uþ on Razor hayr
Create a Razorbay acbunt and get youc key.id ond
kty-secet from the Rozorbay Dashboard.

2. Install Razor bay packae in gouc Backend.


nprn Ins tal razor þay
" make sure your Backend shousd asready nstalled * dotenv
IE It ia not instai þlease also înstall it. Becau
we keep all bivate data în .env file such aA.
Key-id, key-sectet and so On. Sofor aCieNA thene
value we will UAe we need to uAe for doten
foc acesA thene alueg.
nbm i dot eny 9

STEP:2
Cregte a Batken d for Pay ment Integration.
Set up your Backend using 'Node ja
Imbort Package and Conflqure Razorag i File
ThiA File
in (oot wll
b
const Razc þay = (equtre " azor pay" ) direc tory
.ehv
conAt exþres iequire (Cexbress;
exþress (); RAZDRPAY. KEYLO:
-RA20RPAY.KEY SECR
ConAt dot env = (eguire (" dot eny ; ETE

dot env. con fig );


abp.yAe Cerpress. ysoh0); RAZORPAYLWEBHOOK
-SECRET:

-< Const azor þay nenew Razorþay (


keyid ? pocess. env. RAZORPAY-KEY.ID,
Key_secreti þioceSS.env. RAZORPAY_KEY.SE CRETL,
3);

(6) Create Payment dcdec CBackend API)


The fontend Sends the amount to the
the backend generates an order.Id fom backerd, and
Razora4
ahp. þost Clceate-order, async (reg, re,) =>
(onAt ambúnt, curren (y j= feg. body
Const order = await cqzor bay .o(ders.create ((
amount amount.
Curfency : (Utfncy "INR",
S);
(es.statua C200 ).JS0n (i
SUCCeAA true,
oder: o(der
3):
cat ch (crrot)
renstatuA (S00), send (errot);
STEP:3
Frentend fot Payment Popup'
Integrate Razor bay Into your fronkend..
(a Load Razorpay sDK
add the Razoþoy scribt in yout "ATML' OR "React
Component.
<scci7t scca' https:llcheckout. rqzotbay. comlvL/checko
-y"> Isciþt >

6) Create Payment Handler


When he Uer clicks on PAY NOW Button, the
frontend reoueata an ocder fiom he backend
the þay ment þopup.
Const handle Payment async() =>£
MGaet order detas from frontend tim using thia
backend API.
Const renponse = awatt fetch (" htp: |Llocal hot:5000/
create-order ",
method: "PosT",
headers : (' Content-Type: apþlication(S0 h3,
body JSON. stringi fy (E amoont: 5000 3),
Const ocdet_- auwait renponse.4 s0n C)
WShouw Razothay þayment Popo.
const aptions'
key:YoUR -PUBLICKEY ',
amount: ofcder.am ount,
cuteny: order, curtenc9,
order idi order,id,
Royment De tai l s.
hondler i (reaponse) =>f
Console.legl"Res bon Ae:,(es onse);
verig Paymment (rea þon Ae );1 send iasgmtnt
3, Ildetalto Backend verificehi
3,
Const (zþ - new Razorfo Copions)
czp.open )

( payment Details ) => {


(Onst vecify PaymenT -asyncfebch
condt cea pon Ae =await ("http:Alecalhoot:Socoherify-ayment,
me thod:POsT
headecs : lontent-Type':'abhli caton |4son ,
bady: Js0N. stingify (paymentDetails),
3);
(ont resalt eawit (eA ponjeag soh();
console .logC result );
33

STEP:4
Veify Backend API
9 create verify Payment API. bayment
Onte the bayment is done , Razot hay sends
debails lilke: Cazor kayo derid , azor paq-ayment-id ,
(azorbag-signature
data
) to he Bhckend
to the fontent. send HiA
for verifiation.
tonst crypto require (" crypto);
abp. þost (C lveify-þayment", (reg, (eA )=>
tonat (tazerpag-oYde.td , (azol bay-paynent-id, fazorpy- signatue
eq. bodys
Const generated.signature =crypto
. Create Hmac sha256, þioceAA. env. RAZORPAY_KEX
SECRE T)
- update (razo(hay.ordes_id + T't (02ochay
digeat ("hex ");
ifC generate d-signatue J=== R (azot bas signature) 1
(eh.statuA (2.00).g Soh (
Sutegs true,
mesage: "Payment verified"
3)
felse£
fes. Status(4.06). (son (l
SUCCeSA: falße,
hessag: " Pament uerification failed
3);

3);

STEP:5
Webhok for auto na tie yeification (0pbional)
Ínst ead of elgigg on the froet end to verf fy the jayner
you can UNE Razorþay:s webhook S. Raz2D (hay will notif
Hou backend wheneyer
gour a þoyment
bayr bten.
Webhook '

app.postCIweshook , (req. (es ) => £


conAt webhook Secrete pcoCeAA, env. RA20RPAYLWEBHOOK.
SECRET:
Const ce ceived-signature - (eq. headers ['y-qzo rhay -signature
conAt generoted_signature =cgpto
cíeate Hmac C" sha 256,web hook Secret)
-oþdate (JSON. stingify Cieg-body))
digest (hex");
fe (generated. si nature 2> recelved signature)t
censole .log (ayment vefified ua webhaok",eq body );
ceA Statu C2,00)js0nlC
neSage:"Webhook processed"
3);
(es. status (400). Gend ("Invald web hook siqnatace J

3)',

STEP:6
Save the poyrmen Detals.
A6ier sÚceEM Ful vtift cation (from verify- baymerit or
webhaok
save the paymen details fo Hour Dat ban e
-ifinal Workflow '
1 FRONTEND: Usec click "PAY NÒW’sends amoun to hackend
fontend
2 BACKEND: Create a ordel’ Return odecid to
3 FRONT END: Show Razoray poboh ’ Uner makes þay ment.
+ FRaNTTEND: SErd foyment de tails foy mentid ,orderid,siqnatue
to backend.
5 8ACKEND: Veftfy Pay ment detal s and confiim sucteal fluM
6 coþtibnat) Une wes nooks fot auto-vefificaton by Rrzntk
FE BE
create ocder Backend have
Aayment Ven haion

IPAY NO
Suce0A Failure veifehon Razprhayteid,
Ragorpauj-kereite
Order_id Razoipay-we bheok
h o o k

e na
to n e ,

n e nmentordercd
re
tun
web order
id reate Order
ecret
bU
yh e r
JoPfoco +
after
broo
POyMENT keg-d, keg-secret of
Creditcard razcf pay
Debidt catd
Dther ethod

SRazor bag
Pogment
Dialog Box

You might also like