DEV Community

Cover image for Flutter CC-Avenue Payment Gateway Integration ft. PHP
Md. Mobin
Md. Mobin

Posted on

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.


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

image 1

  • 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:


Enter fullscreen mode Exit fullscreen mode

after encryption we will get string like

Enter fullscreen mode Exit fullscreen mode
Parameter Name Description Type (length)
Merchant Id Merchant Id is a unique identifier generated by CCAvenue for each activated merchant. Numeric
Order Id This ID is used by merchants to identify the order. Ensure that you send a unique id with each request. CCAvenue will not check the uniqueness of this order id. As it generates a unique payment reference number for each order which is sent by the merchant. Alphanumeric (30)
Redirect Url CCAvenue will post the status of the order along with the parameters to this URL. Alphanumeric (100)
Cancel Url CCAvenue will redirect the customer to this URL if the customer cancels the transaction on the billing page. Alphanumeric (100)
Amount Order amount Numeric (12, 2)
Currency Currency in which you want to process the transaction.
AED - Arab Emirates dirham
USD - United States Dollar
SAR - Saudi Arabia Riyal
INR – Indian Rupee
SGD – Singapore Dollar
GBP – Pound Sterling
EUR – Euro, official currency of Eurozone
Alphabets (3)

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

Enter fullscreen mode Exit fullscreen mode

Note for testing replace to

  • 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
Enter fullscreen mode Exit fullscreen mode
  • Now we need to create a page that accept POST request and return enc_val and access_code.


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.


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

Integration in Flutter(Client):

  • Adding following to pubspec.yaml
  http: ^0.13.6
  webview_flutter: ^2.0.6 
Enter fullscreen mode Exit fullscreen mode
  • Android Configuration: Change in build.gradle(android/app)
android {
    defaultConfig {
        minSdkVersion 19
Enter fullscreen mode Exit fullscreen mode
  • 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<JavascriptChannel>
  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<dynamic>
  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

Top comments (0)