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,"order_id": "<order-id>","card[cvv]": <CVV>,"card[expiry_month]": 11,"card[expiry_year]": 25,"card[name]": "Test User","card[number]": "4111111111111111","contact": "9900990099","currency": "INR","display_logo": "0","email": "gaurav.kumar@example.com","description": "Fine T-Shirt","method": "card"};_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
isCredAppAvailable
method.
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: method
as 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]": "4111111111111111","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?