Quick Start

Let's get started with Volume in less than 5 minutes.

Flutter for Volume is a library with custom view that allows you to display Volume checkout and start accepting payments from your customers in zero time into any flutter app.

Getting Started

Get started by installing Volume sdk.

    dependencies:
      flutter:
        sdk: flutter
      volume_sdk:
        git:
          url: https://<GIT_AUTHORIZATION>@github.com/getvolume/VolumePubDev.git
          ref: 1.3.0

Where GIT_AUTHORIZATION is environment variable made of github user and it's token volume-public:<token> in that manner. Token is provided by Volume.

e.g. volume-public:github_pat_72A4HWM8I0LwB3_T0kenProv1dedByV0lume__V3o9ZRvFBM5cmENW8vf8ES365KNJ7b6u7gY1

Volume Provider & Volume Button

The volume provider should be placed at the root level of your application, this provides key global configuration for using volume in your application. When VolumeProvider is initialized then you can add Volume button to your screen by adding VolumeButtonComponent to ExampleAppView struct.

import 'package:volume_sdk/volume_provider.dart';
 
void main() {
  const myApp = MyApp();
  VolumeProvider.init(
    VolumeSetup(
        applicationId: "", //provided by Volume
        volumeEnvironment: "sandbox",
        showSandboxBanks: true,
        maxPaymentAmount: "15000",
        minPaymentAmount: "1"),
        buttonCustomisation: const ButtonCustomization(),
        translations: {
          "EN": const VolumeTranslations(
              accountHolderNameText: "Name and Surname"),
          "DE": const VolumeTranslations(
              accountHolderNameText: "Name und Nachname"),
        },
        language: "EN"),
        myApp
  );
  VolumeProvider.setLanguage("DE") // Use this to change language in runtime
 
  runApp(myApp);
}

You can use Volume widget by just declaring it in any Widget. To successfully initiate transaction you should set MerchantPaymentId, Reference and amount.

VolumePaymentButtonWidget(
  merchantPaymentId: "Pay 12345",
  reference: "Ref 12345",
  amount: 50.0,
  isEnabled: true,
  currency: "GBP",
  metadata: <String, dynamic>{
      "type": "shirt",
      "color": "black",
      "owner": {
        "position": "CTO",
        "description": "Very handsome man",
        "details": {
          "name": "John",
          "surname": "Doe",
        },
        "relatedItems": [
          { "itemName": "trousers", "color": "blue" },
          { "itemName": "shoes", "color": "white" },
        ],
      },
    },
)

Properties

Expand the section below for a quick glance at what you need to know.

Implementing the after payment screen (Callback) in mobile app

Upon completion of the payment process, users are directed back from the banking app to your app using a callback via an app link or universal link. Volume accepts only https links, which means traditional deep links like myapp://callback are not supported. Instead, we recommend using App Links and Universal Links, such as https://myDomain.com/callback (opens in a new tab), for their superior security, user experience, seamless integration, and web fallback capabilities.

Android:

About app links (opens in a new tab)

Create Deep Links to App Content (opens in a new tab)

iOS:

Supporting universal links in your iOS app (opens in a new tab)

Supporting associated domains on iOS (opens in a new tab)

Flutter:

Flutter app links library (opens in a new tab)

Universal links on Flutter (opens in a new tab)

React Native:

React Native linking documentation (opens in a new tab)

React Native app links tutorial (opens in a new tab)

Documentation for the Volume Callback parameters: Callback

iOS Banks detection required setup (Your project Info.plist file needs to be updated)

To make bank detection work Apple require we add some values in your Info.plist to indicate intent to work with app schemes, we use this to detect which banking apps the end user has installed on their phone so that we can show them only banks they have installed.

To complete the setup there are some <string> tags we need to add under the LSApplicationQueriesSchemes key in Info.plist file.

<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>BMBGB</string>
		<string>revolut</string>
		<string>natwestbank</string>
		<string>monzo</string>
		<string>santanderuk</string>
		<string>rbs</string>
		<string>lloyds-retail</string>
		<string>ukcomhsbcmobilebanking</string>
		<string>zappcfi437759</string>
		<string>hsbc-pwnwguti5z</string>
		<string>zapp</string>
		<string>launchAIB</string>
		<string>ie.aib.mobilebanking</string>
		<string>BOIOneAPP</string>
		<string>halifax-retail</string>
		<string>starlingbank</string>
		<string>tescobank</string>
		<string>tsbmobile</string>
		<string>sparda-app</string>
		<string>bankingappspardaproduktion</string>
		<string>secureappspardaproduktion</string>
		<string>sapp-pushtan</string>
		<string>sapp-invest</string>
		<string>de.sparda.securego</string>
	</array>

Testing

After you have completed the steps above, then you can start testing.

We strongly recommend to use sandbox environment before switching to live environment.

Please note that sandbox testing will not open the Banking app due to lack of testing environment offered by the different banks in the UK. However, a successful test will open the bank environment via the browser. The user experience will differ bank by bank. Ask us more information at support@getvolume.com or use the chat in this page to get immediate assistance.

Please check Sandbox Banks Credentials to be able to test with Natwest Sandbox and other sandbox banks.