{"type_of":"article","id":1483531,"title":"Flutter CC-Avenue Payment Gateway Integration ft. PHP","description":"In today's digital era, businesses are constantly seeking secure and reliable payment gateways to...","readable_publish_date":"May 28 '23","slug":"flutter-cc-avenue-payment-gateway-integration-ft-php-1nj7","path":"/djsmk123/flutter-cc-avenue-payment-gateway-integration-ft-php-1nj7","url":"https://dev.to/djsmk123/flutter-cc-avenue-payment-gateway-integration-ft-php-1nj7","comments_count":2,"public_reactions_count":22,"collection_id":null,"published_timestamp":"2023-05-28T08:25:19Z","language":null,"subforem_id":null,"positive_reactions_count":22,"cover_image":"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v5thpu3pvldmj7bwwtw.png","social_image":"https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9v5thpu3pvldmj7bwwtw.png","canonical_url":"https://dev.to/djsmk123/flutter-cc-avenue-payment-gateway-integration-ft-php-1nj7","created_at":"2023-05-28T08:25:19Z","edited_at":null,"crossposted_at":null,"published_at":"2023-05-28T08:25:19Z","last_comment_at":"2023-10-18T12:05:00Z","reading_time_minutes":4,"tag_list":"flutter, php, tutorial, android","tags":["flutter","php","tutorial","android"],"body_html":"\u003cp\u003eIn today's digital era, businesses are constantly seeking secure and reliable payment gateways to facilitate seamless transactions. \u003ca href=\"https://www.ccavenue.com/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eCCAvenue\u003c/a\u003e 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.\u003c/p\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: There is no official SDK available for flutter, so we are going to integrate through Flutter Webview.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"prerequisites\" href=\"#prerequisites\"\u003e\n  \u003c/a\u003e\n  Prerequisites:\n\u003c/h2\u003e\n\n\u003cp\u003eBefore we begin, make sure you have the following requirements in place:\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eFlutter SDK installed on your machine\u003c/li\u003e\n\u003cli\u003eBasic knowledge of Flutter and PHP\u003c/li\u003e\n\u003cli\u003eCCAvenue merchant account credentials\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: 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.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"lets-understand-how-does-transaction-handle-through-ccavenue\" href=\"#lets-understand-how-does-transaction-handle-through-ccavenue\"\u003e\n  \u003c/a\u003e\n  Lets understand how does transaction Handle through CCAvenue?\n\u003c/h2\u003e\n\n\u003cp\u003eCCAvenue has two phase for completing transaction\u003c/p\u003e\n\n\u003cp\u003e\u003ca href=\"https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fddg7nzhefnbhw4piiusp.png\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fddg7nzhefnbhw4piiusp.png\" alt=\"image 1\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eInitiate Payment\u003c/strong\u003e : In this step,client send \u003ccode\u003eamount\u003c/code\u003e and \u003ccode\u003ecurrency\u003c/code\u003e and other required details to server and than server encrypt these values to a single encrypted(lets says \u003ccode\u003eenc_val\u003c/code\u003e) string and send \u003ccode\u003eenc_val\u003c/code\u003e and \u003ccode\u003eaccess_code\u003c/code\u003e to client.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: When your CCAvenue approved and whitelisted for transaction then you can get following \u003ccode\u003eaccess_code\u003c/code\u003e,\u003ccode\u003eworking_key\u003c/code\u003e and \u003ccode\u003emerchant_id\u003c/code\u003e from CCAvenue.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cul\u003e\n\u003cli\u003eGenerate enc_val: Merchant need to encrypt following set of parameters using encryption tool provided by CCAvenue(We will use PHP)\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eWe will encrypt following String: \u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n\nmerchant_id=123\u0026amp;order_id=123456redirect_url=www.amazonaws.com/payment\n/ccav_resp.phpcancel_url=www.amazonaws.com/payment/ccav_resp.phpamount=1.00\u0026amp;currency=INR\n\n\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cp\u003eafter encryption we will get string like\u003c/p\u003e\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n\na5eed2d2a51358773bb1de741b0b2f1261308043c2a8f78bf59d9d3d5081f785792599d64876\n220964ebdd1578ce633aae959b804f2b2d53cda3821baf5480b3a082ea89a0e6784af4fef98e0\n54f3a5c78f0ec9e611a01dd7666e9903e6b5d62c7a11d8db869d665c0077a292cfa6aba80a1ab\na94882168ede009b2c3806a4b08c781e2e5a7d54411b5a288ff28d499bc9de\n\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"table-wrapper-paragraph\"\u003e\u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\n\u003cth\u003eParameter Name\u003c/th\u003e\n\u003cth\u003eDescription\u003c/th\u003e\n\u003cth\u003eType (length)\u003c/th\u003e\n\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd\u003eMerchant Id\u003c/td\u003e\n\u003ctd\u003eMerchant Id is a unique identifier generated by CCAvenue for each activated merchant.\u003c/td\u003e\n\u003ctd\u003eNumeric\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eOrder Id\u003c/td\u003e\n\u003ctd\u003eThis 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.\u003c/td\u003e\n\u003ctd\u003eAlphanumeric (30)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eRedirect Url\u003c/td\u003e\n\u003ctd\u003eCCAvenue will post the status of the order along with the parameters to this URL.\u003c/td\u003e\n\u003ctd\u003eAlphanumeric (100)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCancel Url\u003c/td\u003e\n\u003ctd\u003eCCAvenue will redirect the customer to this URL if the customer cancels the transaction on the billing page.\u003c/td\u003e\n\u003ctd\u003eAlphanumeric (100)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eAmount\u003c/td\u003e\n\u003ctd\u003eOrder amount\u003c/td\u003e\n\u003ctd\u003eNumeric (12, 2)\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eCurrency\u003c/td\u003e\n\u003ctd\u003eCurrency in which you want to process the transaction. \u003cbr\u003e AED - Arab Emirates dirham \u003cbr\u003e USD - United States Dollar \u003cbr\u003e SAR - Saudi Arabia Riyal \u003cbr\u003e INR – Indian Rupee \u003cbr\u003e SGD – Singapore Dollar \u003cbr\u003e GBP – Pound Sterling \u003cbr\u003e EUR – Euro, official currency of Eurozone\u003c/td\u003e\n\u003ctd\u003eAlphabets (3)\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/tbody\u003e\n\u003c/table\u003e\u003c/div\u003e\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: we will talk about \u003ccode\u003ecancel_url\u003c/code\u003e and \u003ccode\u003eredirect_url\u003c/code\u003e in the next steps.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cul\u003e\n\u003cli\u003eStart payment in WebView: you can start payment in webview through following url\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n\nhttps://secure.ccavenue.com/transaction.do?command=initiateTransaction\u0026amp;encRequest=enc_val\u0026amp;access_code=access_code\n\n\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cblockquote\u003e\n\u003cp\u003eNote for testing replace \u003ccode\u003esecure.ccavenue.com\u003c/code\u003e to \u003ccode\u003etest.ccavenue.com\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eResponse 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.\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003eredirect_url\u003c/code\u003e: 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.\u003c/li\u003e\n\u003cli\u003e\n\u003ccode\u003ecancel_url\u003c/code\u003e: Similar to the \u003ccode\u003eredirect_url\u003c/code\u003e, the \u003ccode\u003ecancel_url\u003c/code\u003e is also hosted on your server's domain/IP. However, it specifically handles requests where the user cancels the payment.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003eNow we will use decryption tool to decrypt string given by CCAvenue \u003cbr\u003e\nafter payment complete.\u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"lets-start-integration-server-side\" href=\"#lets-start-integration-server-side\"\u003e\n  \u003c/a\u003e\n  Lets Start Integration (Server Side)\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eWe need encryption and decryption function to encrypt and decrypted request.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003ecreate \u003ccode\u003ecrypto.php\u003c/code\u003e and with following content:\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag_gist-liquid-tag\"\u003e\n  \u003cscript id=\"gist-ltag\" src=\"https://gist.github.com/Djsmk123/d13f3dded32764a80d97fd40981fcc68.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n\n\n\n\u003cp\u003eInstall required Library:\u003c/p\u003e\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n\nsudo apt-get install php7.4-openssl\n\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cul\u003e\n\u003cli\u003eNow we need to create a page that accept \u003ccode\u003ePOST\u003c/code\u003e request and return \u003ccode\u003eenc_val\u003c/code\u003e and \u003ccode\u003eaccess_code\u003c/code\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003e\u003ccode\u003eccAvenueRequestHandler.php\u003c/code\u003e\u003c/p\u003e\n\n\n\u003cdiv class=\"ltag_gist-liquid-tag\"\u003e\n  \u003cscript id=\"gist-ltag\" src=\"https://gist.github.com/Djsmk123/015bf832a6ac651f0cabc4dab11606cf.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n\n\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: you can edit page as per your requirement,but later on flutter side you need JavaScript function to get desired result.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003cul\u003e\n\u003cli\u003eWe also need to create a page like above which accept \u003ccode\u003ePOST\u003c/code\u003e request and return decrypted data.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003e\u003ccode\u003eccavResponseHandler.php\u003c/code\u003e\u003cbr\u003e\n\u003c/p\u003e\n\u003cdiv class=\"ltag_gist-liquid-tag\"\u003e\n  \u003cscript id=\"gist-ltag\" src=\"https://gist.github.com/Djsmk123/f4a2d3012efb1af87cc0cb6ba8718612.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n\n\n\u003cblockquote\u003e\n\u003cp\u003eNote: Following url should be accessible through whitelisted domain \u003ccode\u003ehttps://your-domain/ccavResponseHandler.php\u003c/code\u003e.\u003c/p\u003e\n\u003c/blockquote\u003e\n\n\u003ch2\u003e\n  \u003ca name=\"integration-in-flutterclient\" href=\"#integration-in-flutterclient\"\u003e\n  \u003c/a\u003e\n  Integration in Flutter(Client):\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003eAdding following to \u003ccode\u003epubspec.yaml\u003c/code\u003e\n```\n\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cp\u003edependencies:\u003cbr\u003e\n  http: ^0.13.6\u003cbr\u003e\n  webview_flutter: ^2.0.6 \u003cbr\u003e\n  html: \u003c/p\u003e\n\n\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n- Android Configuration: Change in `build.gradle`(android/app)\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003cp\u003eandroid {\u003cbr\u003e\n    defaultConfig {\u003cbr\u003e\n        minSdkVersion 19\u003cbr\u003e\n    }\u003cbr\u003e\n}\u003c/p\u003e\n\n\n\u003cdiv class=\"highlight js-code-highlight\"\u003e\n\u003cpre class=\"highlight plaintext\"\u003e\u003ccode\u003e\n- Create Payment handler Screen with following content: \nlets say `payment_screen.dart`:\n\n\u003cdiv class=\"ltag_gist-liquid-tag\"\u003e\n  \u003cscript id=\"gist-ltag\" src=\"https://gist.github.com/Djsmk123/926c94e77dd2a964a73999b74d215013.js\"\u003e\u003c/script\u003e\n\u003c/div\u003e\n\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eisTesting\u003c/code\u003e (Variable):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eDescription: A boolean variable used to indicate whether the application is in testing mode or production mode.\u003c/li\u003e\n\u003cli\u003eType: \u003ccode\u003ebool\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003ejsChannels\u003c/code\u003e (Variable):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eDescription: A set of \u003ccode\u003eJavascriptChannel\u003c/code\u003e objects that define the JavaScript channels available for communication between the Flutter app and the WebView.\u003c/li\u003e\n\u003cli\u003eType: \u003ccode\u003eSet\u0026amp;lt;JavascriptChannel\u0026amp;gt;\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003einitPayment\u003c/code\u003e (Method):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eDescription: This method is responsible for initializing the payment by making an HTTP POST request to the \u003ccode\u003erequestInitiateUrl\u003c/code\u003e with the specified amount.\u003c/li\u003e\n\u003cli\u003eParameters:\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003eamount\u003c/code\u003e (Type: \u003ccode\u003eString\u003c/code\u003e): The amount for the payment.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eReturns: A Future object that resolves to the payment data in JSON format.\u003c/li\u003e\n\u003cli\u003eType: \u003ccode\u003eFuture\u0026amp;lt;dynamic\u0026amp;gt;\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003eonPageFinished\u003c/code\u003e (Method):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eDescription: This method is called when the WebView finishes loading a page.\u003c/li\u003e\n\u003cli\u003eParameters:\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003eurl\u003c/code\u003e (Type: \u003ccode\u003eString\u003c/code\u003e): The URL of the loaded page.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eReturns: \u003ccode\u003evoid\u003c/code\u003e\n\u003c/li\u003e\n\u003cli\u003eType: \u003ccode\u003evoid\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003enavigationDelegate\u003c/code\u003e (Method):\u003c/p\u003e\n\n\u003cul\u003e\n\u003cli\u003eDescription: This method is used to control the navigation behavior of the WebView based on the requested URL.\u003c/li\u003e\n\u003cli\u003eParameters:\n\n\u003cul\u003e\n\u003cli\u003e\n\u003ccode\u003enav\u003c/code\u003e (Type: \u003ccode\u003eNavigationRequest\u003c/code\u003e): The navigation request object containing information about the requested URL.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eReturns: A \u003ccode\u003eNavigationDecision\u003c/code\u003e that determines whether to allow or prevent the navigation.\u003c/li\u003e\n\u003cli\u003eType: \u003ccode\u003eNavigationDecision\u003c/code\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\n\u003cp\u003e\u003ca href=\"https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F314ap05o981dse3ja155.jpg\" class=\"article-body-image-wrapper\"\u003e\u003cimg src=\"https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F314ap05o981dse3ja155.jpg\" alt=\"meme1\" loading=\"lazy\"\u003e\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"source-code-\" href=\"#source-code-\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Source code :\n\u003c/h2\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/Djsmk123/ccavenue_flutter_example\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eGithub Repo\u003c/a\u003e\u003c/p\u003e\n\u003ch2\u003e\n  \u003ca name=\"follow-me-on\" href=\"#follow-me-on\" class=\"anchor\"\u003e\n  \u003c/a\u003e\n  Follow me on\n\u003c/h2\u003e\n\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://twitter.com/smk_winner\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eTwitter\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://www.instagram.com/smkwinner/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eInstagram\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://www.github.com/djsmk123\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eGithub\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://www.linkedin.com/in/md-mobin-bb928820b/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003elinkedin\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://dev.to/djsmk123\"\u003edev.to\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003cli\u003e\u003cp\u003e\u003ca href=\"https://medium.com/@djsmk123\" target=\"_blank\" rel=\"noopener noreferrer\"\u003eMedium\u003c/a\u003e\u003c/p\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003c/code\u003e\u003c/pre\u003e\n\u003cdiv class=\"highlight__panel js-actions-panel\"\u003e\n\u003cdiv class=\"highlight__panel-action js-fullscreen-code-action\"\u003e\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"\u003e\u003ctitle\u003eEnter fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n    \u003csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"\u003e\u003ctitle\u003eExit fullscreen mode\u003c/title\u003e\n    \u003cpath d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\n","body_markdown":"In today's digital era, businesses are constantly seeking secure and reliable payment gateways to facilitate seamless transactions. [CCAvenue](https://www.ccavenue.com/) 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.\n\n\u003e Note: There is no official SDK available for flutter, so we are going to integrate through Flutter Webview.\n\n## Prerequisites:\nBefore we begin, make sure you have the following requirements in place:\n\n- Flutter SDK installed on your machine\n- Basic knowledge of Flutter and PHP\n- CCAvenue merchant account credentials\n\n\u003e 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.\n\n## Lets understand how does transaction Handle through CCAvenue?\n\nCCAvenue has two phase for completing transaction\n\n![image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddg7nzhefnbhw4piiusp.png)\n\n- **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.\n\n\u003e Note: When your CCAvenue approved and whitelisted for transaction then you can get following `access_code`,`working_key` and `merchant_id` from CCAvenue.\n\n   - Generate enc_val: Merchant need to encrypt following set of parameters using encryption tool provided by CCAvenue(We will use PHP)\n\nWe will encrypt following String: \n\n```\nmerchant_id=123\u0026order_id=123456redirect_url=www.amazonaws.com/payment\n/ccav_resp.phpcancel_url=www.amazonaws.com/payment/ccav_resp.phpamount=1.00\u0026currency=INR\n\n```\n\nafter encryption we will get string like\n\n```\na5eed2d2a51358773bb1de741b0b2f1261308043c2a8f78bf59d9d3d5081f785792599d64876\n220964ebdd1578ce633aae959b804f2b2d53cda3821baf5480b3a082ea89a0e6784af4fef98e0\n54f3a5c78f0ec9e611a01dd7666e9903e6b5d62c7a11d8db869d665c0077a292cfa6aba80a1ab\na94882168ede009b2c3806a4b08c781e2e5a7d54411b5a288ff28d499bc9de\n```\n\n\n| Parameter Name | Description | Type (length) |\n| --- | --- | --- |\n| Merchant Id | Merchant Id is a unique identifier generated by CCAvenue for each activated merchant. | Numeric |\n| 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) |\n| Redirect Url | CCAvenue will post the status of the order along with the parameters to this URL. | Alphanumeric (100) |\n| Cancel Url | CCAvenue will redirect the customer to this URL if the customer cancels the transaction on the billing page. | Alphanumeric (100) |\n| Amount | Order amount | Numeric (12, 2) |\n| Currency | Currency in which you want to process the transaction. \u003cbr\u003e AED - Arab Emirates dirham \u003cbr\u003e USD - United States Dollar \u003cbr\u003e SAR - Saudi Arabia Riyal \u003cbr\u003e INR – Indian Rupee \u003cbr\u003e SGD – Singapore Dollar \u003cbr\u003e GBP – Pound Sterling \u003cbr\u003e EUR – Euro, official currency of Eurozone | Alphabets (3) |\n\n\u003e Note: we will talk about `cancel_url` and `redirect_url` in the next steps.\n\n   - Start payment in WebView: you can start payment in webview through following url\n\n```\nhttps://secure.ccavenue.com/transaction.do?command=initiateTransaction\u0026encRequest=enc_val\u0026access_code=access_code\n\n```\n\n\u003e Note for testing replace `secure.ccavenue.com` to `test.ccavenue.com`.\n\n\n- 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.\n\n    - `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.\n\n    - `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.\n\nNow we will use decryption tool to decrypt string given by CCAvenue \nafter payment complete.\n\n\n## Lets Start Integration (Server Side)\n\n- We need encryption and decryption function to encrypt and decrypted request.\n\ncreate `crypto.php` and with following content:\n\n{% gist https://gist.github.com/Djsmk123/d13f3dded32764a80d97fd40981fcc68 %}\n\nInstall required Library:\n\n```\nsudo apt-get install php7.4-openssl\n```\n\n- Now we need to create a page that accept `POST` request and return `enc_val` and `access_code`.\n\n`ccAvenueRequestHandler.php`\n\n{% gist https://gist.github.com/Djsmk123/015bf832a6ac651f0cabc4dab11606cf %}\n\n\u003e Note: you can edit page as per your requirement,but later on flutter side you need JavaScript function to get desired result.\n\n- We also need to create a page like above which accept `POST` request and return decrypted data.\n\n\n`ccavResponseHandler.php`\n{% gist https://gist.github.com/Djsmk123/f4a2d3012efb1af87cc0cb6ba8718612 %}\n\n\u003e Note: Following url should be accessible through whitelisted domain `https://your-domain/ccavResponseHandler.php`.\n\n\n\n## Integration in Flutter(Client): \n\n- Adding following to `pubspec.yaml`\n```\ndependencies:\n  http: ^0.13.6\n  webview_flutter: ^2.0.6 \n  html: \n```\n\n- Android Configuration: Change in `build.gradle`(android/app)\n \n```\nandroid {\n    defaultConfig {\n        minSdkVersion 19\n    }\n}\n```\n\n- Create Payment handler Screen with following content: \nlets say `payment_screen.dart`:\n\n{% gist https://gist.github.com/Djsmk123/926c94e77dd2a964a73999b74d215013 %}\n\n\n1. `isTesting` (Variable):\n   - Description: A boolean variable used to indicate whether the application is in testing mode or production mode.\n   - Type: `bool`\n\n2. `jsChannels` (Variable):\n   - Description: A set of `JavascriptChannel` objects that define the JavaScript channels available for communication between the Flutter app and the WebView.\n   - Type: `Set\u003cJavascriptChannel\u003e`\n\n3. `initPayment` (Method):\n   - Description: This method is responsible for initializing the payment by making an HTTP POST request to the `requestInitiateUrl` with the specified amount.\n   - Parameters:\n     - `amount` (Type: `String`): The amount for the payment.\n   - Returns: A Future object that resolves to the payment data in JSON format.\n   - Type: `Future\u003cdynamic\u003e`\n\n4. `onPageFinished` (Method):\n   - Description: This method is called when the WebView finishes loading a page.\n   - Parameters:\n     - `url` (Type: `String`): The URL of the loaded page.\n   - Returns: `void`\n   - Type: `void`\n\n5. `navigationDelegate` (Method):\n   - Description: This method is used to control the navigation behavior of the WebView based on the requested URL.\n   - Parameters:\n     - `nav` (Type: `NavigationRequest`): The navigation request object containing information about the requested URL.\n   - Returns: A `NavigationDecision` that determines whether to allow or prevent the navigation.\n   - Type: `NavigationDecision`\n\n\n![meme1](https://img.buzzfeed.com/buzzfeed-static/static/2015-04/14/11/enhanced/webdr13/enhanced-buzz-wide-13335-1429024179-8.jpg)\n\n## Source code : \n[Github Repo](https://github.com/Djsmk123/ccavenue_flutter_example)\n\n## Follow me on \n\n- [Twitter](https://twitter.com/smk_winner)\n\n- [Instagram](https://www.instagram.com/smkwinner/)\n\n- [Github](https://www.github.com/djsmk123)\n\n- [linkedin](https://www.linkedin.com/in/md-mobin-bb928820b/)\n\n- [dev.to](https://dev.to/djsmk123)\n\n- [Medium](https://medium.com/@djsmk123)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","user":{"name":"Md. Mobin","username":"djsmk123","twitter_username":"SmkWinner","github_username":"Djsmk123","user_id":869436,"website_url":"https://smkwinner.vercel.app","profile_image":"https://media2.dev.to/dynamic/image/width=640,height=640,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F869436%2Fbdef6092-f77a-4639-9fe9-877e6d1adf26.jpeg","profile_image_90":"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F869436%2Fbdef6092-f77a-4639-9fe9-877e6d1adf26.jpeg"}}