Razorpay Payment Gateway Integration in HTML & JS Websites

welcome to razapi raza pay is the easiest way to accept and process digital payments in india in this video we will learn to integrate the razerby payment gateway with your js based custom website before we begin we must complete a few steps visit razerby.com and sign up for an account provide the relevant details and complete the registration process generate the api keys on the recipe dashboard navigate to settings api keys and generate the keys save the api keys on your system open the recipe web standard integration document integration steps you must complete these integration steps create an order from your server pass order id and other options to checkout handle payment success and failure events store fields in server perform signature verification step 1 create an order from your server order is an important step in the payment process orders and payments go hand in hand for every payment an order needs to be created it is compulsory to create orders to capture payments automatically you can create an order using the orders api it is a server to serve a call that is secured by basic auth using your api keys pass the order id received in the order's api response to checkout this ties the order with the payment and secures the prequest from being tampered in this video we will use postman to file the orders api and create an order navigate to the order sample code in the document copy the code and url and open postman select the post method and enter the api url select basic as the authorization type enter the api key id and secret generated on the recipe dashboard select body raw json paste the request parameters you can modify the request parameter as needed click send to fire the api and create an order copy the order id from the response step 2 pass order id to checkout there are two types of checkout code with handler function and callback url in case of handler function on successful payment the customer will be shown your web page on payment failure the customer will be notified on the reason of failure and asked to retry the payment in case of callback url on successful payment the customer will be redirected to a specified url for example a payment success page on payment failure the customer will be asked to retry payment on checkout in this video we will follow the handler method in the document copy the sample code for handler function open the code editor and create an html file this is a mock web page where the pay button will appear customers will click on the pay button to open checkout and make a payment once the payment is successful the payment id order id and payment signature will appear as notifications on the page in this video we have created a simple web page called checkout.html this is a page in which we will paste the checkout code open checkout.html and paste the code change the checkout parameters replace your key id with the test api key id we had generated on the dashboard change the amount to match the order amount replace the order id with the id generated in the api response save your changes open the checkout.html on the browser the webpage displays the pay button click this button to open checkout we have successfully added checkout to the web page step 3 handle payment and failure even since we are using the handler function checkout code on payment success the payment id order id and signature will appear as notifications on the web page you can store these on the server in case of payment failure the customer is notified of the reason for failure and asked to retry the payment step 4 store fields in server the payment id order id and signature fields appear on the checkout response you must store these pins on the server verify payment signature to verify the reason signature returned to you by the checkout form create a signature on your server using the order id raise of the payment id and key secret use the sha256 algorithm the raise up a payment id and the order id to construct a hmac hex digest if the signature you generate on your server matches the razor signature returned to you by the checkout form the payment received is from an authentic source read the document to know more about signature verification in this video we are not showing the storage of payment details and verification of signature steps as these are to be performed on your server end you can refer to the document to learn how to implement these steps on your server side this completes the integration let us test the integration by making a test payment open the checkout.html on the browser the web page displays the pay button click this button to open checkout select a payment method for example netbanking and select a bank the payment id order id and signature appear on the web page as notifications on payment success payment id and order id are generated in case of failure the failure response is shown our customer is asked to retry the payment you can view the payment on the transaction tab of the recipe dashboard login to the dashboard go to transactions payments click on the payment id to view the details this completes the test integration to start accepting live payments you need to complete the kyc process and get your app account activated in the dashboard switch to the live mode and generate the api keys in your checkout.html file replace the test mode api key with the live mode api key your integration is complete in case of any queries contact the razerbase support team you can also raise a ticket from the dashboard thank you for watching this video

Channel: Razorpay

Views: 104,044

Keywords: razorpay, razorpay payment gateway integration, razorpay payment gateway integration in html, Payment Gateway, payment gateway for website, payment integration in website, payment link in js website, razorpay payment gateway integration in opencart website, payment gateway, razorpay payment gateway, html and javascript, Integration, #paymentgatewayinhtml, #paymentgatewayinjs

Id: SFHbcs-lSio

Length: 8min 24sec (504 seconds)

Published: Fri Jun 11 2021