Integrating Cashfree Payment Gateway in Oracle APEX 24.2
Introduction:
This blog explains a simple and practical approach to integrating the Cashfree payment gateway into an Oracle APEX 24.2 application. The implementation uses Cashfree’s JavaScript SDK and Oracle APEX AJAX callbacks to securely create payment orders, redirect users to the Cashfree checkout page, and return them back to the application after payment completion. This approach is suitable for handling UPI and card payments in a clean and page-level implementation.
Step 1: Create Cashfree account and API keys
Create a Cashfree account and generate the Client ID and Client Secret from the dashboard. Use sandbox credentials for development and testing.
Step 2: Create payment page in Oracle APEX
In Oracle APEX 24.2, create a payment page. Add a number item P13_AMOUNT for entering the payment amount and hidden items P13_ORDER_ID and P13_CF_ORDER_ID to store order details.
Step 3: Include Cashfree JavaScript SDK
In the page attributes, add the following file URL to load the Cashfree SDK:
Step 4: Define Cashfree checkout function
In the page-level Function and Global Variable Declaration section, define the openCashfree() function. This function initializes Cashfree in sandbox mode and opens the checkout using the payment session ID stored in P13_CF_ORDER_ID.
Sample code:
function openCashfree() {
const cashfree = Cashfree({
mode: "sandbox" // change to "production" later
});
cashfree.checkout({
paymentSessionId: $v('P13_CF_ORDER_ID'),
redirectTarget: "_self"
});
}
Step 5: Create Pay button
Add a button named PAY on the page. This button will trigger the payment creation and checkout flow and create a Dynamic Action on the PAY button with event Click. Add a True action of type Execute JavaScript Code to call an APEX AJAX process.
Sample code:
apex.server.process(
'CREATE_CASHFREE_ORDER',
{
pageItems: '#P13_AMOUNT'
},
{
success: function (pData) {
if (pData.status === 'SUCCESS') {
openCashfree();
} else {
alert(pData.message);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('AJAX Error: ' + errorThrown);
}
}
);
Step 6: Call backend process using JavaScript
Use apex.server.process to call the CREATE_CASHFREE_ORDER process, passing P13_AMOUNT as a page item. On successful response, call openCashfree() to launch the Cashfree checkout.
Step 7: Create AJAX Callback to generate Cashfree order
Create an AJAX Callback process named CREATE_CASHFREE_ORDER. In this process, call the Cashfree Orders API using apex_web_service, passing order details and the return URL. From the Cashfree API response, extract the payment_session_id and store it in P13_CF_ORDER_ID. Return a JSON response with SUCCESS status to the JavaScript caller.
Sample code:
DECLARE
l_url VARCHAR2(4000) := 'https://sandbox.cashfree.com/pg/orders';
l_request CLOB;
l_response CLOB;
l_order_id VARCHAR2(100);
l_session_id VARCHAR2(4000);
l_return_url VARCHAR2(4000);
BEGIN
-- Generate Order ID
l_order_id := 'ORD_' || TO_CHAR(SYSDATE, 'YYYYMMDDHH24MISS');
-- ✅ Preserve APEX session while returning
l_return_url :=
'https://oracleapex.com/ords/r/foura_consultant/d2d-feed/payment-callback?session=&SESSION.';
-- Build Cashfree request
l_request := '{
"order_id": "' || l_order_id || '",
"order_amount": ' || :P13_AMOUNT || ',
"order_currency": "INR",
"customer_details": {
"customer_id": "CUST001",
"customer_email": "test@test.com",
"customer_phone": "9999999999"
},
"order_meta": {
"return_url": "' || l_return_url || '"
}
}';
apex_web_service.g_request_headers.delete;
apex_web_service.g_request_headers(1).name := 'x-client-id';
apex_web_service.g_request_headers(1).value := 'TEST10939594ea837ebd7f0ef8b2c32e49593901';
apex_web_service.g_request_headers(2).name := 'x-client-secret';
apex_web_service.g_request_headers(2).value := 'cfsk_ma_test_0c1866ff81a91e9edc37325ef50026b0_f070b115';
apex_web_service.g_request_headers(3).name := 'x-api-version';
apex_web_service.g_request_headers(3).value := '2022-09-01';
apex_web_service.g_request_headers(4).name := 'Content-Type';
apex_web_service.g_request_headers(4).value := 'application/json';
-- Call Cashfree
l_response := apex_web_service.make_rest_request(
p_url => l_url,
p_http_method => 'POST',
p_body => l_request
);
-- Extract payment session id
l_session_id := json_value(l_response, '$.payment_session_id');
-- Store in items
:P13_ORDER_ID := l_order_id;
:P13_CF_ORDER_ID := l_session_id;
-- Return JSON for JS
apex_json.open_object;
apex_json.write('status', 'SUCCESS');
apex_json.write('order_id', l_order_id);
apex_json.write('payment_session_id', l_session_id);
apex_json.close_object;
EXCEPTION
WHEN OTHERS THEN
apex_json.open_object;
apex_json.write('status', 'ERROR');
apex_json.write('message', SQLERRM);
apex_json.close_object;
END;
Step 8: Complete payment and redirect back to APEX
The user completes payment using UPI or card on the Cashfree hosted page.i had used TEST MODE. After payment, Cashfree redirects the user to the configured return URL in Oracle APEX, where the payment status can be handled.
Comments
Post a Comment