Flutter CC-Avenue Payment Gateway Integration ft. PHP

In today’s digital era, businesses are constantly seeking secure and reliable payment gateways to facilitate seamless transactions. CCAvenue is a popular payment gateway in India, offering a wide range of payment options for online businesses. In this blog, we will explore how to integrate CCAvenue into a Flutter application using PHP server.

Note: There is no official SDK available for flutter, so we are going to integrate through Flutter Webview.

Prerequisites:

Before we begin, make sure you have the following requirements in place:

• Flutter SDK installed on your machine
• Basic knowledge of Flutter and PHP
• CCAvenue merchant account credentials

Note: CCAvenue does not allow payment transaction in live or test mode until you whitelist your Domain/IP. For Whitelisting your domain, you can email them.

Lets understand how does transaction Handle through CCAvenue?

CCAvenue has two phase for completing transaction

• Initiate Payment : In this step,client send amount and currency and other required details to server and than server encrypt these values to a single encrypted(lets says enc_val) string and send enc_val and access_code to client.

Note: When your CCAvenue approved and whitelisted for transaction then you can get following access_code,working_key and merchant_id from CCAvenue.

• Generate enc_val: Merchant need to encrypt following set of parameters using encryption tool provided by CCAvenue(We will use PHP)

We will encrypt following String:

merchant_id=123&order_id=123456redirect_url=www.amazonaws.com/payment
/ccav_resp.phpcancel_url=www.amazonaws.com/payment/ccav_resp.phpamount=1.00¤cy=INR

after encryption we will get string like

a5eed2d2a51358773bb1de741b0b2f1261308043c2a8f78bf59d9d3d5081f785792599d64876
220964ebdd1578ce633aae959b804f2b2d53cda3821baf5480b3a082ea89a0e6784af4fef98e0
54f3a5c78f0ec9e611a01dd7666e9903e6b5d62c7a11d8db869d665c0077a292cfa6aba80a1ab
a94882168ede009b2c3806a4b08c781e2e5a7d54411b5a288ff28d499bc9de

Note: we will talk about cancel_url and redirect_url in the next steps.

• Start payment in WebView: you can start payment in webview through following url

https://secure.ccavenue.com/transaction.do?command=initiateTransaction&encRequest=enc_val&access_code=access_code

Note for testing replace secure.ccavenue.com to test.ccavenue.com.

• Response Handler: When a user completes a payment, either in case of failure or success, CCAvenue will send an encrypted string to either the redirect_url or cancel_url using a POST request.

  • redirect_url: It refers to a webpage hosted on your server’s domain/IP, which must be whitelisted by CCAVenue. This webpage will handle the necessary steps after the payment request is completed, including handling both failure and success scenarios.
  • cancel_url: Similar to the redirect_url, the cancel_url is also hosted on your server’s domain/IP. However, it specifically handles requests where the user cancels the payment.

Now we will use decryption tool to decrypt string given by CCAvenue
after payment complete.

Lets Start Integration (Server Side)

• We need encryption and decryption function to encrypt and decrypted request.

create crypto.php and with following content:

Install required Library:

sudo apt-get install php7.4-openssl

• Now we need to create a page that accept POST request and return enc_val and access_code.

ccAvenueRequestHandler.php

Note: you can edit page as per your requirement,but later on flutter side you need JavaScript function to get desired result.

• We also need to create a page like above which accept POST request and return decrypted data.

ccavResponseHandler.php

Note: Following url should be accessible through whitelisted domain https://your-domain/ccavResponseHandler.php.

Integration in Flutter(Client):

• Adding following to pubspec.yaml

dependencies:
  http: ^0.13.6
  webview_flutter: ^2.0.6 
  html: 

• Android Configuration: Change in build.gradle(android/app)

android {
    defaultConfig {
        minSdkVersion 19
    }
}

• Create Payment handler Screen with following content:
  lets say payment_screen.dart:

1. isTesting (Variable):

   • Description: A boolean variable used to indicate whether the application is in testing mode or production mode.
   • Type: bool

2. jsChannels (Variable):

   • Description: A set of JavascriptChannel objects that define the JavaScript channels available for communication between the Flutter app and the WebView.
   • Type: Set

3. initPayment (Method):

   • Description: This method is responsible for initializing the payment by making an HTTP POST request to the requestInitiateUrl with the specified amount.
   • Parameters:
     • amount (Type: String): The amount for the payment.
   • Returns: A Future object that resolves to the payment data in JSON format.
   • Type: Future

4. onPageFinished (Method):

   • Description: This method is called when the WebView finishes loading a page.
   • Parameters:
     • url (Type: String): The URL of the loaded page.
   • Returns: void
   • Type: void

5. navigationDelegate (Method):

   • Description: This method is used to control the navigation behavior of the WebView based on the requested URL.
   • Parameters:
     • nav (Type: NavigationRequest): The navigation request object containing information about the requested URL.
   • Returns: A NavigationDecision that determines whether to allow or prevent the navigation.
   • Type: NavigationDecision

Source code :

Github Repo

Follow me on