For card payments, the SDK provides a
CFCardWidget that renders the card number field for you. Your application never receives the raw card number. You collect only the card holder name, expiry, and CVV in your own UI and pass them to the SDK alongside the widget.Prerequisites
Complete the following tasks before you start the integration:- Create a Cashfree Merchant Account.
- Log in to the Merchant Dashboard and generate an App ID and Secret Key. Learn how to generate API keys.
- Use Cashfree Flutter SDK version 2.4.0+52 or above. Get it from pub.dev.
- Use Flutter 2.5.0 or above and Dart 3.0.0 or above.
- Set your Android application’s
minSdkVersionto API level 19 or higher. - Set your iOS minimum deployment target to 12.0 or higher.
Step 1
Create an order
Step 2
Open the payment page
Step 3
Confirm the payment
Step 1: Create an order Server-side
Create an order from your backend server before you process any payment.This API requires your secret key. Create orders through your server only. Do not call this API directly from your mobile application.
API request for creating an order
Here’s a sample request for creating an order using your desired backend language. Cashfree offers backend SDKs to simplify the integration process.order_id and payment_session_id that you need for subsequent steps.
You can view the complete API request and response for /orders in the Create Order API.
Step 2: Open the payment page Client-side
After you create the order, open the payment page so the customer can provide payment details.1. Set up the SDK
The Flutter SDK is hosted on pub.dev. Add it to your project:pubspec.yaml file:
iOS configuration
To support UPI payments on iOS, add the following UPI app URI schemes to your application’sios/Runner/Info.plist file:
2. Select a payment method
The Element SDK supports the following payment methods:- Card
- Net banking
- UPI Intent
In this flow, the SDK renders the card number field using
CFCardWidget, so your application never handles the raw card number. Your application collects the card holder name, expiry, and CVV in its own UI and passes them to the SDK along with a reference to the widget.3. Complete the payment
To complete the payment, follow these steps:- Set up the payment callback.
- Create a
CFSessionobject. - Create the payment object for the selected payment method.
- Initiate the payment using
doPayment().
Set up the payment callback
Register a success callback and an error callback usingsetCallback(). The SDK invokes the success callback with the order ID when the payment flow ends, and the error callback with a CFErrorResponse and order ID if the flow fails.
Create a session
TheCFSession object holds the session context for the payment. It accepts the order_id and payment_session_id obtained from Step 1, and the Cashfree environment (CFEnvironment.SANDBOX or CFEnvironment.PRODUCTION).
Create a payment object
The SDK provides a dedicated payment builder for each supported payment method. Build only the object that corresponds to the payment method your customer has selected.- Card
- Net banking
- UPI Intent
Render a
CFCardWidget in your widget tree to collect the card number, then build the CFCard object using setCardWidget along with the remaining card details.To charge a previously saved card, call
setInstrumentId on CFCardBuilder with the saved instrument ID instead of setCardWidget, and pass only the CVV.Initiate the payment
CalldoPayment() to open the Cashfree payment flow for the selected method. The example below uses cardPayment. Replace it with netbankingPayment or upiPayment for your selected payment method.
Sample code
The following example shows a complete integration, including session creation, payment object setup for each method, and payment initiation.Element checkout sample
Element checkout sample
Sample GitHub code
You can explore a working integration example on GitHub:Flutter Element integration
Flutter Element integration
Step 3: Confirm the payment Server-side
After the SDK delivers a callback viaverifyPayment, confirm the payment status from your backend before taking any action. The SDK callback signals only that the payment flow has ended. It does not guarantee a successful payment.
To verify an order you can call our /pg/orders endpoint from your backend. You can also use our SDK to achieve the same.
Always verify the order status from your backend before you deliver goods or services to the customer. You can use the Get Order API for this. An order is successful when the
order_status is PAID.Testing
After you integrate a payment method, verify that it behaves as expected. Follow these steps to test:- Trigger a payment using each method you have integrated.
- Confirm that the SDK opens the correct payment screen for the method (Cashfree’s hosted net banking screen, the card widget’s own flow, or the selected UPI app).
- Confirm that
verifyPaymentoronErroris called when the payment flow ends.
Error codes
Before it reaches the native SDK, the Flutter layer validates each builder call and throws aCFException if a required field is missing. Catch CFException around every builder and doPayment() call to handle these cases.
Show validation exceptions
Show validation exceptions
onError callback receives a CFErrorResponse with getStatus(), getMessage(), getCode(), and getType() accessors describing the failure.
Affiliate partner program
As a developer building payment experiences for your clients, you can earn additional income while providing them with industry-leading payment solutions.
Join the Cashfree affiliate partner program and get rewarded every time your clients use Cashfree.
What you get:
- Earn up to 0.25% commission on every transaction.
- Become a trusted fintech partner for your clients.
- Access to a dedicated partner manager for expert support.
What your clients get:
- Instant activation and go live in minutes.
- Industry-best success rate across all payment modes.
- Effortless acceptance of international payments in 140+ currencies.
Get started today. Become a partner now.