Revolut Flutter SDK

Installation

To access the private repository, you need to add the received authentication token

1. Run the following command to add the token:

  echo 'YOUR_TOKEN' | dart pub token add https://dart.cloudsmith.io/techstackapps/revolut-flutter-sdk/

2. Add the package dependency

You can add the required package to your project by executing:

General installation:

  dart pub add revolut_payments_flutter --hosted-url https://dart.cloudsmith.io/techstackapps/revolut-flutter-sdk/

Installing a specific version:

  dart pub add revolut_payments_flutter:1.3.0 --hosted-url https://dart.cloudsmith.io/techstackapps/revolut-flutter-sdk/

This will automatically update your pubspec.yaml file with the new dependency:

dependencies:
  flutter:
    sdk: flutter
  revolut_payments_flutter:
    hosted: https://dart.cloudsmith.io/techstackapps/revolut-flutter-sdk/
    version: ^1.3.0

Requirements

For iOS you also have to change the Podfile in the ios folder of your project so that CocoaPods installs the pod for this package as static:

platform :ios, '13.0'

target 'Runner' do
  use_frameworks! :linkage => :static

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

Usage

This SDK offers two different ways of accepting payments made to your Business account: directly accepting a card payment, or accepting a payment through the Revolut app using Revolut Pay.

Before everything, you need to be aware of your Merchant API keys. The public key will be used to initialise the SDK, while the secret key will be used as authorisation for the API calls.

To initialise the package in your Flutter app, use the RevolutPayment base class. First set the merchantPublicKey and the environment, which is either RevolutEnvironment.SANDBOX or RevolutEnvironment.PRODUCTION, then call the applySettings() function:

RevolutPayment.environment = RevolutEnvironment.[ENV];
RevolutPayment.merchantPublicKey ="[publicKey]";
await  RevolutPayment.instance.applySettings();

Run

This package comes with an example application that presents the functionality of both payment methods in a straightforward manner. To run it:

cd example
flutter pub get
flutter run

Payment flow

After initialisation, when you want to accept a payment in your app the first thing you need to do is create an order on the Revolut backend with the needed amount and currency:

curl -X "POST" "https://merchant.revolut.com/api/1.0/orders" \
   -H 'Authorization: Bearer [secretKey]' \
   -H 'Content-Type: application/json; charset=utf-8' \
   -d $'{
     "amount": 100,
     "currency": "GBP"
    }'

The API will return a JSON when the order is successfully created from which you need the public_id in order to start a payment.

The next steps are different for the two ways of accepting payments.

1. Card payment

In order to accept direct card payments, you need to call the startCardPayment(orderId, configuration) asynchronous function. This will bring up the payment screen where the user can enter their card information. The function returns the "authorised" string if successful or throws a RevolutCardPaymentException for all failure cases.

The parameters:

orderId is the above-mentioned public_id of the order
configuration is an object of type CardPaymentConfiguration that is optional and passes the e-mail and address of the user

Usage example:

try {
	await  RevolutPayment.instance.startCardPayment(
		orderId: revolutOrderId,
		//configuration is optional
		configuration: CardPaymentConfiguration(
			email: email,
			billingAddress: CardBillingAddress(
				streetLine1: line1,
				streetLine2: line2,
				city: city,
				region: region,
				countryIsoCode: isoCode,
				postcode: postCode)));
	//success case
} catch (e) {
	if (e  is  RevolutCardPaymentException) {
		//payment failure case
	} else {
		//general failure case
	}
}

Or you can use the pre-build button:

RevolutCardButton(
    orderPublicId: revolutOrderId,
    buttonRadius: ButtonRadius.full,
    buttonSize: ButtonSize.fullWidth,
    customIconSize: 23,
    onSucceeded: (){},
    //configuration is optional
    configuration: CardPaymentConfiguration(
        email: email,
        billingAddress: CardBillingAddress(
            streetLine1: line1,
            streetLine2: line2,
            city: city,
            region: region,
            countryIsoCode: isoCode,
            postcode: postCode,
        ),
    ),
),

2. Revolut Pay

This payment method lets the user make payments more easily using their Revolut account, if they have one. To add this functionality to your app you only need to add the RevolutPayButton widget to your screen. When the user taps the button there are two possible things that can happen:

if the Revolut app is installed on their phone, the user is taken to it and can pay there
if the Revolut app is not installed, the user is taken to a webview with a card form similar to the other payment method (this is true only for the production environment, in sandbox the user is never taken to the Revolut app even if it's installed)

If the payment is successful, the widget calls the onSucceeded void callback. If it fails for whatever reason, it calls the onFailed(errorMessage) callback. You need to provide these callbacks when you instantiate the button.

ℹ️ Info:
To test Revolut Pay in the sandbox environment, you must use the Simulator.

Usage example of the native button:

RevolutPayButton(
	orderPublicId: revolutOrderId,
	height: height,
	width: width,
	buttonParams: RevolutPayButtonParams(
		radius: RevolutPayRadius.LARGE,
		size: RevolutPaySize.MEDIUM,
		//lightMode and darkMode are optional
		lightMode: RevolutPayVariant.LIGHT_OUTLINED,
		darkMode: RevolutPayVariant.DARK_OUTLINED),
	onSucceeded: () {
		//success case
	},
	//onFailed is optional
	onFailed: (message) {
		//failure case
	}
)

Or you can use a custom flutter button for Revolut Pay:

CustomRevolutPayButton(
  orderPublicId: revolutOrderId,
  buttonRadius: ButtonRadius.full,
  buttonSize: ButtonSize.fullWidth,
  iconSize: IconSize.large,
  onSucceeded: (){},
  onFailed: (msg) {},
),

3. Apple Pay

The SDK also offers the possibility of checking if the Revolut app is installed on the user's device using the isRevolutAppInstalled() function which returns a bool.

ℹ️ Info:
Apple Pay is not available in the sandbox environment. Real transactions must be made to test your implementation in the production environment.

Implementation Overview for Apple Pay

Follow this high-level guide to implementing the Apple Pay button in your iOS app.

1. Create a Merchant Identifier

Log in to your Apple Developer Account.
Navigate to Certificates, Identifiers & Profiles.
Under Identifiers, select Merchant IDs.
Click the + button to create a new Merchant ID.
Follow the prompts to create your Merchant Identifier (e.g., merchant.com.yourappname).

2. Create an Apple Pay Certificate

To process payments with Apple Pay, you need an Apple Pay Payment Processing Certificate associated with your Merchant Identifier.

Steps:

Request a Certificate Signing Request (CSR) file from Revolut by emailing merchant-integration@revolut.com.
Use the provided CSR file to create an Apple Pay Payment Processing Certificate in the Apple Developer portal.
In your Apple Developer Account:
- Go to Certificates, Identifiers & Profiles.
- Select your Merchant ID.
- Click Create Certificate under the Apple Pay Payment Processing Certificate section.
Follow the instructions to:
- Upload the CSR file.
- Download the generated certificate (.cer file).
Send the certificate (.cer file) to Revolut by emailing it back to merchant-integration@revolut.com.

⚠️ Caution:

This step is not automated.

You must use only one certificate per Merchant ID.

If you want to change the Merchant ID or if the certificate is about to expire, you must repeat this process.

3. Add the Apple Pay Capability to Your Project

To enable Apple Pay in your Xcode project:

Open your project in Xcode.
Select your project in the Project Navigator.
Go to the Signing & Capabilities tab.
Click the + Capability button.
Add the Apple Pay capability.
Select the Merchant ID you created earlier.

ℹ️ Info:
For more details, check Apple's documentation on Adding Apple Pay Capabilities.

This formatting improves readability, makes instructions clearer with bullet points, and includes emphasis for important parts. Let me know if you need any further refinements! 🚀

For Apple Pay add to your Info.plist file:

<key>NSMerchantIdentifier</key>
<string>merchant.com.yourappnamep</string>

Usage example of the native button:

RevolutApplePayButton(
    orderId: revolutOrderId,
    amount: amount,
    currency: currency,
    buttonStyle: RevolutApplePayButtonStyle.white,
),

Or you can use a custom flutter button for Apple Pay:

CustomRevolutApplePayButton(
    orderPublicId: revolutOrderId,
    amount: widget.amount,
    currency: widget.currency,
    buttonRadius: ButtonRadius.full,
    buttonSize: ButtonSize.fullWidth,
    iconSize: IconSize.large,
    onSucceeded: (){},
)

Supported button styles

Below are presented the Flutter buttons:

Card Button Styles

      
RevolutCardButton(
    orderPublicId: revolutOrderId, // String: The order ID associated with Revolut order ID.
    buttonRadius: ButtonRadius.full, // ButtonRadius: Defines button corner radius (e.g., small, full).
    buttonSize: ButtonSize.fullWidth, // ButtonSize: Defines button size (e.g., small, large, fullWidth).
    configuration: CardPaymentConfiguration(), // CardPaymentConfiguration?: (Optional) Configuration for card payments.
    customIconSize: 23, // double?: (Optional) Custom icon size override.
    onSucceeded: _onSucceeded, // VoidCallback?: Callback triggered when payment succeeds.
    onFailed: (msg) {}, // VoidCallback?: (Optional) Callback triggered when payment fails.
    variant: ButtonVariant.dark, // ButtonVariant: Defines button style (e.g., dark, lightWithBorder).
    customWidth: 200, // double?: (Optional) Custom width override.
    customHeight: 50, // double?: (Optional) Custom height override.
    customRadius: 10, // double?: (Optional) Custom border radius override.
)

Revolut Pay Button Styles

      
CustomRevolutPayButton(
    orderPublicId: revolutOrderId, // String: The order ID associated with Revolut order ID.
    buttonRadius: ButtonRadius.full, // ButtonRadius: Defines button corner radius (e.g., small, full).
    buttonSize: ButtonSize.fullWidth, // ButtonSize: Defines button size (e.g., small, large, fullWidth).
    iconSize: IconSize.large, // IconSize: Defines icon size (e.g., small, large).
    onSucceeded: (){}, // VoidCallback: Callback triggered when payment succeeds.
    onFailed: (msg) {}, // void Function(String)?: (Optional) Callback triggered when payment fails.
    buttonIconType: ButtonIconType.ios, // ButtonIconType: Defines the button icon / logo to be used.
    variant: ButtonVariant.dark, // ButtonVariant: Defines button style (e.g., dark, lightWithBorder).
    customWidth: 200, // double?: (Optional) Custom width override.
    customHeight: 50, // double?: (Optional) Custom height override.
    customRadius: 10, // double?: (Optional) Custom border radius override.
    customIconSize: 30, // double?: (Optional) Custom icon size override.
)

Apple Pay Button Styles

      
CustomRevolutApplePayButton(
    orderPublicId: revolutOrderId, // String: The order ID associated with Revolut order ID.
    amount: 1000, // int: Payment amount in minor units (e.g., cents).
    currency: "USD", // String: The currency code.
    buttonRadius: ButtonRadius.full, // ButtonRadius: Defines button corner radius (e.g., small, full).
    buttonSize: ButtonSize.fullWidth, // ButtonSize: Defines button size (e.g., small, large, fullWidth).
    iconSize: IconSize.large, // IconSize: Defines icon size (e.g., small, large).
    onSucceeded: (){}, // VoidCallback: Callback triggered when payment succeeds.
    onFailed: (msg) {}, // void Function(String)?: (Optional) Callback triggered when payment fails.
    variant: ButtonVariant.dark, // ButtonVariant: Defines button style (e.g., dark, lightWithBorder).
    customWidth: 200, // double?: (Optional) Custom width override.
    customHeight: 50, // double?: (Optional) Custom height override.
    customRadius: 10, // double?: (Optional) Custom border radius override.
    customIconSize: 30, // double?: (Optional) Custom icon size override.
)

Support the Revolut App URL scheme

If you want the widget to be able to open the Revolut app you need to add the relevant URL scheme to your application:

For Android you need to add the following to your AndroidManifest.xml:

<queries>
    <package android:name="com.revolut.revolut" />
</queries>

For iOS add to your Info.plist file:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>revolut</string>
</array>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revolut Flutter SDK

Installation

1. Run the following command to add the token:

2. Add the package dependency

Requirements

Usage

Run

Payment flow

1. Card payment

2. Revolut Pay

3. Apple Pay

Implementation Overview for Apple Pay

1. Create a Merchant Identifier

2. Create an Apple Pay Certificate

Steps:

3. Add the Apple Pay Capability to Your Project

Supported button styles

Card Button Styles

Revolut Pay Button Styles

Apple Pay Button Styles

Support the Revolut App URL scheme

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

Revolut Flutter SDK

Installation

1. Run the following command to add the token:

2. Add the package dependency

Requirements

Usage

Run

Payment flow

1. Card payment

2. Revolut Pay

3. Apple Pay

Implementation Overview for Apple Pay

1. Create a Merchant Identifier

2. Create an Apple Pay Certificate

Steps:

3. Add the Apple Pay Capability to Your Project

Supported button styles

Card Button Styles

Revolut Pay Button Styles

Apple Pay Button Styles

Support the Revolut App URL scheme