Payment Methods
Integrate different payment methods in Razorpay Flutter Custom SDK.
You can use the Razorpay Flutter Custom SDK to integrate the supported payment methods on your Flutter app's Checkout form.
For card payments, method should be specified as card.
The sample code shown below allows the checkout to accept a card payment of ₹299.35:
var options = {"key": key,"amount": 29935,"currency": "","contact": "+919876543210","email": "gaurav.kumar@example.com","order_id": "order_EMBFqjDHEEn80l", // Generate order_id using Orders API,"description": "Fine T-Shirt""method": "card","card[name]": "Test User","card[number]": "card number","card[expiry_month]": 11,"card[expiry_year]": 30,"card[cvv]": <CVV>,"display_logo": "0"};_razorpay.submit(options);
For netbanking, method should be specified as netbanking and an additional field bank must specify the bank with its respective bank code. Use getPaymentMethods to retrieve the list of supported bank codes.
The sample code shown below allows the checkout to perform a netbanking transaction for a payment of ₹299.35:
netBankingOptions = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","order_id": "<order-id>","contact": "9009009009","method": "netbanking","bank": "icic"};_razorpay.submit(netBankingOptions!);
For UPI payments, method should be specified as upi. The SDK supports two flows:
- Collect
- Intent
In Collect Flow, the collect request will be sent to the UPI app for the specified vpa.
The sample code below will send collect request to gaurav.kumar@exampleupi handle:
var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","order_id": "<order-id>","contact": "9009009009","method": "upi","_[flow]": "collect","vpa": "gauravkumar@exampleupi"};_razorpay.submit(options);
final supportedUpiApps = _razorpay.getAppsWhichSupportUpi();var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","contact": "9009009009","method": "upi","_[flow]": "intent","upi_app_package_name": "paytm","order_id": "<order-id>"};_razorpay.submit(options);
Handy Tips
If your application targetSdkVersion is 30 or above, add the following code in your app's manifest file to support the UPI Intent flow.
<queries><!-- List of apps which you want to support for Intent pay --><package android:name="com.google.android.apps.nbu.paisa.user" /><package android:name="com.phonepe.app"/><!--Specific intents you query for,eg: for a custom share UI--><intent><action android:name="android.intent.action.SEND" /></intent></queries>
View the complete list of
.Given below is the sample code when the payment method is app and provider is cred. Know more about
- Check if the Cred app is installed on the customer’s phone. This can be detected by calling
isCredAppAvailablemethod.
onPressed: () {final credAppInstalled = _razorpay.isCredAppAvailable();var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","contact": "9009009009","app_present": true,"method": "app","provider": "cred","order_id": "<order-id>"if (credAppInstalled) {'callback_url': 'flutterCustomUI://'}};_razorpay.payWithCred(options);}
- Handle the Cred app callback in the
AppDelegate. To do this:- Open
Runner.xcworkspace. - Go to
AppDelegate.swift. - Add the
open url: methodas given below:
- Open
override func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {NotificationCenter.default.post(name: NSNotification.Name(rawValue: "CRED_CALLBACK_NOTIFICATION"), object: nil, userInfo: ["response":url.absoluteString])}return false}
Check if the Cred app is installed on the customer’s phone. This can be detected by calling isCredAppAvailable method.
var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","contact": "9009009009","app_present": false,"method": "app","provider": "cred","order_id": "<order-id>"};_razorpay.submit(options);
Given below is the sample code for the payment method paylater. Know more about
var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","contact": "9009009009","method": "paylater","provider": "<provider_code>","order_id": "<order-id>"};_razorpay.submit(options!);
Given below is the sample code for the payment method cardless_emi. Know more about
var options = {"key": key,"amount": 29935,"currency": "INR","email": "gaurav.kumar@example.com","contact": "9009009009","method": "cardless_emi","provider": "<provider_code>","order_id": "<order-id>"};_razorpay.submit(netBankingOptions!);
Given below is the sample code for the payment method emi.
var options = {"key": key,"amount": 100,"card[cvv]": 123,"card[expiry_month]": 11,"card[expiry_year]": 25,"card[name]": "Test User","card[number]": "4386289407660153","contact": "9900990099","currency": "INR","display_logo": "0","email": "gaurav.kumar@example.com","description": "Fine T-Shirt","method": "emi","emi_duration": 9,"order_id": "<order-id>"};_razorpay.submit(options);
Is this integration guide useful?