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: ^2.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

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 => '4.0.1'

  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 may be some warnings, but you can ignore them, as they are Flutter-related.

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' }
```

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' }
        ...
    }
    ...
}
...

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:3.+'

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

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

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/configuration.dart';
import 'package:ramp_flutter/offramp_sale.dart';
import 'package:ramp_flutter/onramp_purchase.dart';
import 'package:ramp_flutter/ramp_flutter.dart';
import 'package:ramp_flutter/send_crypto_payload.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 StatefulWidget {
  const _RampDemo({Key? key}) : super(key: key);

  @override
  State<_RampDemo> createState() => _RampDemoState();
}

class _RampDemoState extends State<_RampDemo> {
  late final RampFlutter ramp;
  late final Configuration configuration;

  @override
  void initState() {
    super.initState();
    configuration = Configuration();
    configuration.hostApiKey = 'YOUR_API_KEY';
    configuration.hostAppName = "Ramp Flutter";
    configuration.hostLogoUrl = "https://ramp.network/logo.png";
    configuration.enabledFlows = ["ONRAMP", "OFFRAMP"];

    ramp = RampFlutter();
    ramp.onOnrampPurchaseCreated = onOnrampPurchaseCreated;
    ramp.onSendCryptoRequested = onSendCryptoRequested;
    ramp.onOfframpSaleCreated = onOfframpSaleCreated;
    ramp.onRampClosed = onRampClosed;
  }

  _presentRamp() {
    ramp.showRamp(configuration);
  }

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

  void onOnrampPurchaseCreated(
    OnrampPurchase purchase,
    String purchaseViewToken,
    String apiUrl,
  ) {}

  void onSendCryptoRequested(SendCryptoPayload payload) {}

  void onOfframpSaleCreated(
    OfframpSale sale,
    String saleViewToken,
    String apiUrl,
  ) {}

  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.

Setup​

Flutter project​

iOS project​

Android​

Usage​

Setup

Flutter project

iOS project

Android

Usage