ccAvenue Integration

How to Integrate ccAvenue on an HTML Website

By - (Last Modified: August 8, 2016)

ccAvenue is one of the leading payment processors on the markets right now due to the security, reliability and support it provided when there weren’t many options in the market – especially in India. It therefore comes to me as a surprise that they do not have a useful guide or tutorial to help newcomers and/or inexperienced developers to integrate the gateway on their site.

When I was unfamiliar with PHP, I wouldn’t have even thought of integrating a payment gateway let alone try one on an HTML site – the instructions that they had wouldn’t make sense to me. But after learning PHP, I decided to give it a go, without anyone’s help. It took days of tinkering and looking for solutions to the problem but I was ecstatic to see it happen finally. You can take a look at it on our payments page.

I would mention that the support provided by the ccAvenue team was subpar and team had very limited knowledge on the matter. The Web Integration guide on the ccAvenue’s website is the completely opposite story. It appears to be written by core developers and assumes everyone is familiar with several advanced topics like calling an API.

This encouraged me to write an easy for beginners tutorial on Integrating ccAvenue on your website, it can even be HTML but in all honesty, there is PHP involved. Don’t worry though, I’ll guide you every step of the way. Let’s get started.

Preparation

First off, you must have an active ccAvenue account, even for testing. I assume since you’re here you already have an account and are ready to integrate the gateway on your website. Login to your dashboard at ccAvenue’s website and go to Settings > API Keys. There are 3 keys listed on this page and you’ll need all of them to initiate any transaction. Take note of these as you’ll need them soon.

Another thing to mention is there are 2 APIs that you can hit: secure.ccavenue.com is for production version and is used in final, live project; test.ccavenue.com is used for testing purposes. I recommend you use the testing environment for now as it’ll let you complete a transaction without making any payments so you can see the whole process in action and view the kind of emails admins and users receive when completing a transaction.

ccAvenue doesn’t inform this but test environment is not enabled by default on an account, so if you were to try using the test url you’ll only get errors. I would ask you to call ccAvenue and ask them to setup this environment for testing. You’ll receive an email soon confirming the activation of test environment. The email will also contain 2 keys which will most likely be the same as in your account but double check anyway.

Next, go to Resources > Web Integration Kit and this is where all [useless] information is presented by the ccAvenue’s team. Go to the download section and download the PHP kit. If you have an HTML site, you’ll still use PHP for this.

Integration

There are three ways of integrating the API as mentioned on the same page you’re at: Non-Seamless, Iframe and Custom. The site says iFrame is the easiest but I found that Non-Seamless was easier. For the purpose of this tutorial, I’ll show you both of these bit skip the custom method as I don’t see any use for it. Custom method can be useful if you wish to collect Credit Card details on your own site but I suggest letting ccAvenue handle this part for security purposes. Let’s begin with the easiest option of Non-Seamless method.

1. Non-Seamless Method

This method only requires you to collect a unique order id and transaction amount from the user and redirect them to the Checkout page of ccAvenue where he can fill the rest of his details and make the payment. This is what’s used on our payment page as well. If you take a look at the folder you downloaded earlier there are 3 folders aptly named Non-seamless, iFrame and Custom. Open the Non-seamless folder and copy ccavRequestHandler.php, ccavResponseHandler.php and Crypto.php to a directory of your choice in your project folder. For the purpose of this tutorial, I’ll assume they are in the same directory as your payments page. If it isn’t, you’ll just have to change some location attributes which I’ll point out as necessary.

First thing we’ll do is setup a form where user will enter a unique order id and amount and proceed to checkout page. This is your payments page. Whether it’s in PHP or HTML, you need an HTML form to collect data and send it to the API for processing. Here’s how the form looks like and next I’ll explain what it does.

I assume you are familiar with HTML so I won’t explain HTML tags but here’s what the form does:

  • It uses ‘POST’ method for secure transmission to a PHP file which we copied in the same directory earlier – ccavRequestHandler.php. If you placed the php file in another directory, specify its location here.
  • Some <h> tags for displaying text.
  • Some input tags have an attribute hidden which hides them from view so the user doesn’t have to fill them but they are sent to the ccavRequestHandler.php
  • Hidden fields already have a value defined as they remain the same in every case.
  • The visible fields have a class of form-control which is a standard bootstrap class for styling purposes only.
  • A required attribute is placed on visible field to make sure user does not submit the form without filling these fields which would give an error.
  • A submit button to send the values, again with bootstrap classes.

The name fields of this form must contain the exact letters as given on the ccAvenue’s Web Integration Kit > Response Parameters page. Tally them up with the fields you’re using and use exact letters as mentioned there, for instance if you were to replace merchant_id with merchantId, the form will not work. Web Integration Kit also categorizes the fields into two parts: critical information and optional information. In this example, we’re sending only as much information as we have to so the form remains as small and easy as possible for the user, so we’re only sending critical information. Allow me to explain these tags in detail:

  • tid – a hidden field with no value but an ID. This is your Transaction ID which must be unique for every request. In this case, we don’t bother the user with this and use JavaScript to generate a unique number to fill into this field automatically. More on that later.
  • merchant_id – this is 5 digit account number of your merchant account with ccAvenue. Replace #s with your merchant ID. This field also must be sent to the API or you’ll get authentication errors.
  • order_id – This is your unique id for the transaction, you can have it autogenerate as well – if you’re using a database for instance – or you can have the user enter this manually as it is in our case.
  • amount – The amount of the order for which the transaction will be charged from the user. Can be loaded from a database or manually entered by the user.
  • currency – ccAvenue accepts a handful of currency and if your account can accept more than one, you can have radio buttons to select currencies. In this case the currency sent is INR (Indian Rupee). The value attribute of this field must be standard code as well. Refer to the Web Integration Kit for all currency codes.
  • redirect_url – This is the url user will be redirected to after completing the transaction.
  • cancel_url – This is the url user will be redirected to if he cancels the transaction mid-way.
  • language – The language that the checkout page will appear in. Language codes are specified on the Web Integration Kit page and must be standard values.

The transaction ID is filled using the following code. Copy and paste this code on your payments page before the closing </body> tag.

If you have jQuery, you can use the following code which does the same thing:

What this code does is create variable d whose value is the current time generated by JavaScript’s getTime() function. Next the value of d is set to the value of input tag with an ID tid.

These are the compulsory fields you must send in order to initiate a transaction. At this point, our form is ready and we can move on to the PHP file (ccavRequestHandler.php) which receives this data and sends it to the ccAvenue’s servers for processing.

There are 4 things you’re concerned with here:

  • php – This file requires another file Crypto.php to encrypt the data before sending it. If you have placed Crypto.php in another directory different from ccavRequestHandler.php (not your payments page) then you need to specify its location in PHP tag [php]<?php include(‘Crypto.php’)?>[/php]
  • Working Key – The key that you received from your account in Preparation phase will be the value of the variable $working_key. Paste the key between the quotes.
  • Access code – Received in Preparation phase and goes in as the value of the variable $access_code. Paste this between the quotes as well.
  • The default url set in this file is https://secure.ccavenue.com/transaction/transaction.do?command=initiateTransaction. You can keep it this way if you plan to go into production right away but I strongly recommend testing first, so replace ‘secure’ with ‘test’ and url now reads https://test.ccavenue.com/transaction/transaction.do?command=initiateTransaction

Save the PHP file and close it. You’re basically done here. If everything was done correctly you should have a working payment processing page here. Upload all the files and go to your page. Fill in the necessary field and click Submit, you should get redirected to the checkout page where your billing and shipping information is asked for. This is where user will enter their name, address and other information. If you don’t deliver a physical product, you can disable Shipping information from your Settings panel in the ccAvenue’s dashboard.

2. iFrame Method

Another way to do it is by using the iFrame method. The primary difference is that you must collect billing and optionally shipping information on your website before sending the user ahead. There’ll be no checkout page and user will be directly sent to the page where they select their preferred payment option. This is useful when you wish to have your own custom checkout page – eCommerce website for instance where Shipping and Discount codes are also applied modifying the item cost.

I’ll only highlight the differences in setup compared to Non-Seamless method explained earlier. Copy the same files as earlier but from the directory iFrame_Normal this time and paste them in your project’s directory. Let’s start with the HTML form:

The form remains the same more or less but a few fields have been added, hidden or otherwise. I’ll explain the fields that are new here:

  • integration_type – A new field has been added with a value of iframe_normal. This tells the API which method we are using now.
  • billing_[details] – billing fields are self-explanatory and all of them are compulsory for successfully initiating the transaction. If you are delivering a physical product and need a shipping address as well, you must add more fields for that as well. A list of all field names is available on the Web Integration Kit page and a reference HTML form is included in the kit as dataFrom.htm file.

The ccavRequestHandler.php is different for this method but the details you have to change are the same. Paste your access code and working key into the file and change secure.ccavenue.com to test.ccavenue.com. Save the file and upload everything to the server.

This time when you go to your payments page you’ll be asked for billing details as well and if you included shipping fields, they’ll be here too. The user will fill all the details on your page and click Submit/Checkout and will be redirected to the gateway for direct payment processing.

Conclusion

When you’re done testing, you only have to change the API url in ccavRequestHandler.php from test.ccavenue.com back to secure.ccavenue.com. That’s it. You’ve just learned how to integrate a payment gateway system on you HTML or PHP site. If it seems too much work for you, we advise you to contact us and let our experts do the job for you. If you found this information valuable, please feel fry to share with your friends and if something didn’t go right, let us know in the comments below.

Ciao!

16 thoughts on “How to Integrate ccAvenue on an HTML Website

  • siddharth sinha

    Hi, I am unable to integrate the web it api in a booking calender plugin… Please help me out. Mob:7727832013

    Reply
  • Barnali

    Hi, I have Integrated the Contact Form 7 with CCAvenue … How do I pass the Amount from the Contact Form 7 to CCAvenue.. Amount to be passed is always the same amount and not Variable amount….

    Reply
  • Leena

    Hi Vipul,

    How to store the captured & response data in database? (iFrame method)

    And, thanks for sharing step by step guide. It is indeed helpful.

    Reply
  • CCS

    Vivek Hattarge

    This might be due to incorrect value of merchant ID, working_key or access_code. Also make sure if the order originates from the registered URL for which the API keys are issued. i.e if your API Keys are issued for example.com then they will work only for example.com. You need to contact CCAvenue to get API Keys for your new domain.

    http://paymentgatewayintegrationhelp.com

    Reply
  • Ramesh Bawankar

    I am getting same error page as Vivek had got while his integration.

    Reply
    • Vipul Kapoor

      That error is most likely caused by an unactivated account. Talk to customer care about it.

      Reply
  • VENKATESH RAO

    Hi, my application is in laravel and i dont want keep the ccavRequestHandler.php, ccavResponseHandler.php and Crypto.php in same folder as payments page. How do i make it work when its in a different folder.

    Reply
    • Vipul Kapoor

      You can keep the files anywhere you want. Just make sure you are linking/including them appropriately.

      Reply
  • Danish

    Best and to the point explanation in just 3 minutes.watch the video on the below link.

    Reply
    • Vipul Kapoor

      Thanks for sharing the video Danish

      Reply
  • Developer

    Error Code: 10002 Merchant Authentication failed.

    access code , working key ,merchant id is correct

    What is value of merchant_data in file ccavRequestHandler.php
    I am using non seamless method

    Reply
    • Vipul Kapoor

      merchant_data is a variable that stores all data received from the form. You don’t need to make any changes there. If you’re getting an authentication failed message, double check your keys, see if the url is correct, then contact ccAvenue

      Reply
  • nitin

    hi, i am using ccavenue test account . i got this error security illegal access detected. how to solve this error

    Reply
    • Vipul Kapoor

      Hi Nitin, you’ll have to contact ccAvenue to enable your test account first. Then you can hit the test api successfully.

      Reply
  • Vivek Hattarge

    I am getting error :
    Error Code: 10002 Merchant Authentication failed.

    Don’t worry… It happens to the best of us.
    Eventhough, i have entered correct info e.g.:
    1. access code.
    2.working key.
    3. merchant id.

    Reply
    • Vipul Kapoor

      Hi Vivek,

      Which method are you using and what is the url you are sending requests to?

      Reply

Share Your Thoughts

Copyright © 2011, 2016 - BWD MEDIA
Web Design & Digital Marketing Agency
Call Now Enquire