Skip to main content

Flutter integration via SDK

Ramp for Flutter is a simple wrapper for native iOS and Android Ramp SDKs. Unified API lets you write code once and use on any of the platforms.

Ramp Flutter SDK supports iOS and Android platforms. For a web app integration, see our web SDK.

Setup

There are a few simple steps you have to perform on your main project and both Flutter-generated iOS and Android projects to integrate Ramp into your app project.

Flutter project

Open pubspec.yaml file located at the root directory of your project and add Ramp dependency in the dependencies section:

dependencies:
flutter:
sdk: flutter
ramp_flutter: ^1.0.0

If you are using Visual Studio Code, after saving the file, flutter pub get command will be performed automatically. Otherwise, perform the command yourself in Terminal app in your project's root directory. It should download all necessary dependencies.

iOS project

Open ios/Podfile file and add the following code on the top:

platform :ios, '11.0'

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/passbase/cocoapods-specs.git'
source 'https://github.com/passbase/microblink-cocoapods-specs.git'

This is necessary for Passbase to work. Passbase is a KYC solution that Ramp uses internally.

Now add the pod Ramp line inside the Runner target to add Ramp's native iOS SDK and run pod install in your terminal to update Cocoapods.

target 'Runner' do
use_frameworks!
use_modular_headers!

pod 'Ramp', :git => 'https://github.com/RampNetwork/ramp-sdk-ios', :tag => '2.0.0'

flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

To install iOS dependencies, go to the ios directory and type pod repo update in the Terminal app, followed by pod install. After a while, you should get a message saying Pod installation complete! There are 3 dependencies from the Podfile and 5 total pods installed.. There may be some warnings, but you can ignore them, as they are Flutter-related.

Next, open Runner.xcworkspace in Xcode, go to the Info.plist file and add the following entries:

<key>NSCameraUsageDescription</key>
<string>Please give us access to your camera to complete the verification.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Please give us access to your photo library to verify you.</string>
note

These permissions are used by Passbase to get access to the camera and photo library for KYC process. If your app already uses them, simply edit the descriptions to give your user opportunity to make a more informed decision.

In order for Ramp to redirect the user from payment back to your app, you need to set up a deeplink scheme. To do it, add a custom scheme to your app. Later, you will need pass this scheme to Ramp Flutter SDK's Configuration instance.

Run the project to make sure all the dependencies are installed correctly.

Android

Open android/build.gradle file and make the following changes:

  • in the buildscript section, set ext.kotlin_version to 1.5.30
  • in allprojects -> repositories section, add the following lines:
    maven { url 'https://jitpack.io' }
    maven { url 'https://button.passbase.com/__android' }

Your android/build.gradle file should look like the following now:

...
buildscript {
ext.kotlin_version = '1.5.30'
...
}
allprojects {
repositories {
maven { url 'https://jitpack.io' }
maven { url 'https://button.passbase.com/__android' }
...
}
...
}
...

Now, open the android/app/build.gradle file and make the following changes:

  • in the android -> defaultConfig section, set minSdkVersion value to 21
  • in the android -> dependencies section, add this line:
implementation 'com.github.RampNetwork:ramp-sdk-android:1.+'

Your android/app/build.gradle file should look like the following now:

...
android {
defaultConfig {
minSdkVersion: 21
...
}
dependencies {
implementation 'com.github.RampNetwork:ramp-sdk-android:1.+'
...
}
...
}
...

If you are using Android Studio, it should detect the changes in these files and install dependencies automatically. If it doesn't, select File -> Sync project with gradle files or go to the android directory in your Terminal and type ./gradlew build.

Run the project to make sure all the dependencies are installed correctly.

Usage

In order to use Ramp Flutter SDK, first you need to import Ramp to your Flutter class.

You can do it like this:

import 'package:ramp_flutter/ramp_flutter.dart';

Then, you need to create a Configuration instance and fill it with the parameters you need. You can see available configuration params in our docs here.

For iOS only:

Some payment methods redirect user to an external app - a browser or, if available, a payment provider's app (Revolut, Monzo, etc.). To redirect the user back to your app after the payment, you can set a custom URL scheme in your Xcode project and then pass the scheme to Configuration struct’s deepLinkScheme property.

Now the only thing left to do is to actually call the method that displays Ramp. It accepts the following arguments:

  • Configuration instance
  • onPurchaseCreated - will be called with Purchase instance, purchase view token and API URL (See Purchase documentation)
  • onRampFailed - will be called when there is a problem with performing the transaction
  • onRampClosed - will be called when Ramp is closed

A full example integration looks like the following:

import 'package:flutter/material.dart';

import 'package:ramp_flutter/ramp_flutter.dart';

void main() => runApp(const RampDemoApp());

class RampDemoApp extends StatelessWidget {
const RampDemoApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) => MaterialApp(home: _RampDemo());
}

class _RampDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: _presentRamp,
child: const Text("Present Ramp"),
),
);
}

void _presentRamp() {
Configuration configuration = Configuration();
configuration.fiatCurrency = "EUR";
configuration.fiatValue = "15";
configuration.deepLinkScheme = "myawesomeapp";
RampFlutter.showRamp(
configuration, onPurchaseCreated, onRampFailed, onRampClosed);
}

void onPurchaseCreated(Purchase purchase, String token, String url) {}

void onRampFailed() {}

void onRampClosed() {}
}

This code will allow you to preset the purchase parameters for your users and pass it to Ramp during initialization. At this stage, your integration is almost ready - all that's left to do now is to get an API key and add it to your configuration. You can read more about Ramp API keys and learn how to get them here.