Integrate Paytm Payment Gateway for static hosted Website using Google Cloud Function.

Satyam Gupta
imLolman
Published in
4 min readJun 28, 2019

Many times there is a need for a payment gateway usually for Donation but You have a Static Hosting Ex: Github pages. To keep your Merchant key Secret you need to buy hosting, Well You Don’t Need it Anymore because you can use Google Cloud Functions for free.

What Do You Need?

  • A Paytm Merchant Account (I’ll use mine for the demo.)
  • A Google Account That will be used for using Google Cloud Function.
  • A Static Hosting I’ll use Github Pages for the demo.

Steps to Create Backend Using Google Firebase Functions.

  • Give a name to it, Example paytm-donation.
  • Go to the functions section on the left side.
  • Click on Get Started
  • To use Functions, you need to install Firebase command-line tools using npm (Node.js).
    If you have node js already installed. Run the following command to install the Latest Version of Firebase CLI.
  • $ npm install -g firebase-tools
  • Once you have everything set up, make a new directory for your project, and move into it.

Initiate your project using:

  • $ firebase init
  • Select Cloud functions using space, select your project, choose javascript as Programing Language and select No for ESLint and Yes for Install Dependency Now.
  • Download Zip From Here and Place the paytm Folder inside functions folder as Shown.
  • Replace the Code for the file paytm_config.js under the paytm folder with the following code for better understanding.
  • Change the ******* as per your requirements for testing, for Callback URL, replace **projectID*** with your project ID/ You can find your project id in Firebase Console.
  • Make a file named myFunction.js outside the paytm folder as Shown.
  • Add the Following Code to it.
  • Replace the index.js file code with this code.
  • Use Command firebase deploy to deploy the firebase function.

Your Server is Ready For testing 😃. Let’s make some frontend Code.

Steps to Connect to Your Backend Code using Your FrontEnd Code.

  • Make a Link to Donation Page from Your Main Page

You will need three files.

  • donateViaPaytm.html
  • donationSuccessful.html
  • donationFailture.html

Make a form in donateViaPaytm.html with the following fields.

  • amount(mandatory)
  • name(optional)
  • email(optional)
  • mobile(optional)
  • orderid(optional)
  • Submit the form to go to the payment gateway.
  • donationSuccessful.html Will be Shown in the case of a successful Transaction and donationFailture.html Will be shown in the case of the failed transaction.
  • Do the Testing By Filling Form.

Your Payment Gateway is Ready, Change the credentials in the Google Cloud Function’s file and you are good to go. 😃

Check it Working on My Main Website https://imlolman.github.io/, and Test a Donation 😉😉.

Originally published at https://imlolman.github.io on June 28, 2019.

--

--