As Chris Michael stated in his recent blog, Open Banking is going to be awesome and as promised, we want to help the ecosystem by Open Sourcing the payment App we created during ForgeRock hackathon. Read the blog until the end to find the link to the code…

Imagine the ability of making a mobile payment app, that gives the user the ability to use his bank account in no time. And all of that just by asking the user’s permission to do so. No user credentials persistence, no need for backend infrastructure, no need to come up with a hacky approach. Just straight interaction between the user and the bank with a little help from Yapily.

It all starts with registering to the Yapily dashboard, creating your application and choosing the financial institutions that you want your user to interact with.

Once you are done, you will receive your Yapily credentials and you are ready to interact with the Yapily API.

Generating the SDK

Obviously based on your stack in order to interact with an API you need to implement each call using the programming language of your choice. That’s way too much effort, shouldn’t it be easier?

Of course it should be easier, that’s why we provide our API’s Swagger specification. By providing our API’s Swagger specification you can generate the Yapily SDK with the language of you choice.

Cross platform application’s rock, thus Flutter is a no brainer when it comes to mobile applications.

So let’s generate our SDK using the Swagger codegen tool.

java -jar swagger-codegen-cli-2.3.0.jar generate -i  https://api.yapily.com/docs/swagger.json -l dart

Configuring the Yapily SDK to your Flutter app

Now if you generate your own SDK it is up to you on how to distribute it and use it. For the Dart SDK we already did this for you by hosting it to our github profile, so no need to do anything whatsoever.

Supposing you already have a Flutter application up running all you need is to just include the Yapily SDK dependency at the pubspec.yaml file.

dependencies:
  flutter:    
sdk: flutter  
  yapily_sdk:    
git:    
  url: git@github.com:yapily/yapily-sdk-dart.git    
  flutter_webview_plugin: '0.2.1+2'

Use your Yapily application’s credentials

Now let’s put our Yapily credentials to our app. For the sake of this blog’s simplicity we are going to place them at the asset folder. Always be careful on how you distribute your credentials.

We will create a yapily-assets folder which shall contain the yapily-config.json file containing the the credentials of our Yapily app and some other configuration.

{
 "key":"<your api key>",  
 "secret":"<your api secret>",  
 "userName": "moneyme_user",  
 "callback": "moneyme://whatever/"  
}

Then specify the the yapily-assets folder in the assets section of the pubspec.yaml file.

assets:  
- graphics/  
- yapily-assets/

Before proceeding to our application code we need to add a retrieval method for the Yapily config.

import 'dart:convert' show json;  
import 'dart:async';  
import 'package:flutter/services.dart' show rootBundle;  

class ConfigLoader {  

static Future<YapilyConfig> loadAsync() {  
return rootBundle.loadStructuredData<YapilyConfig>("yapily-assets/yapily-config.json",  
(jsonStr) async {  
  final yapilyConfig = YapilyConfig.fromJson(json.decode(jsonStr));  
  return yapilyConfig;  
});  
  }  
}  

class YapilyConfig {  

  final String key;  
  final String secret;  
  final String userName;  
  final String callback;  
  final String basePath;  
  
YapilyConfig({this.key = "", this.secret = "", this.userName = "",   this.callback = "", this.basePath = ""});  

factory YapilyConfig.fromJson(Map<String,dynamic> jsonMap) {  
return new YapilyConfig(key: jsonMap["key"], secret: jsonMap["secret"],   userName: jsonMap["userName"], callback: jsonMap["callback"]);  
  }  
} 

And that’s it! Now we are ready to add some open banking functionality backed by the Yapily SDK.

Set up the Yapily client

First things first, let’s make a factory for our Yapily ApiClient

import 'dart:async';  
import 'yapily_config.dart';  
import 'package:yapily_sdk/api.dart';  
class ApiClientFactory {  
static Future<ApiClient> create() {  
return ConfigLoader.loadAsync().then( (yapilyConfig) {  
  var httpBasicAuth = HttpBasicAuth.setCredentials(username:   yapilyConfig.key, password: yapilyConfig.secret);  
  var apiClient = ApiClient.withAuth(httpBasicAuth);  
  return apiClient;  
});  
  }  
}

This factory will create a client eligible to issue requests upon the Yapily SDK.

Let’s create a Yapily user first. Our application’s config contains a username, so we are going to create a Yapily user and add a reference to that username.

In case the user already exists then we can just get his userUuid, which is needed to interact with the Yapily API.

var apiClientFactory = ApiClientFactory.create();  
apiClientFactory.then((apiClient) {  
  ApplicationUsersApi yapilyUsersApi = new ApplicationUsersApi(apiClient);  
  yapilyUsersApi.getUsersUsingGET().then((userList) {  
userList.asMap().forEach((key, user) {  
  if (user.referenceId == yapilyConfig.userName) {  
userUuid = user.uuid;  
  }  
});  
if (userUuid == null) {  
  //No user exists with this username  
  NewApplicationUser applicationUser = __new__ NewApplicationUser();  
  applicationUser.referenceId = yapilyConfig.userName;  
  yapilyUsersApi.addUserUsingPOST(applicationUser).then((yapilyUser) {  
userUuid = yapilyUser.uuid;  
  });  
}  
  });  
});

Get the user’s consent for a payment

Wouldn’t it be great if the user could just give his consent only for one payment and everything else like payment execution or payment completion being taken care of behind the scenes? That is what is so great with Open Banking and Yapily, they make things so simple.

We will ask the user to give his permission for a certain payment.

var sortCodePaymentRequest = new SortCodePaymentRequest();  
sortCodePaymentRequest.paymentReferenceId = new   Uuid().v4().toString().replaceAll("-", "");  
sortCodePaymentRequest.senderAccountId = "9bd5ae68-2266-4dad-865b-4980550a72b7";  
sortCodePaymentRequest.accountNumber = paymentData.accountNumber;  
sortCodePaymentRequest.sortCode = paymentData.sortCode;  
sortCodePaymentRequest.country = "GB";  
sortCodePaymentRequest.currency = paymentData.currency;  
sortCodePaymentRequest.name = paymentData.name;  
sortCodePaymentRequest.reference = "moneyme payment";  
.  
.  
.  
var apiClientFactory = ApiClientFactory.create();  
  return apiClientFactory.then( (apiClient) {  
return new   PaymentsApi(apiClient).createPaymentInitiationUsingPOST(id,paymentRequest:
sortCodePaymentRequest, userUuid: userUuid, callback: callback);  
  }).then((apiResponse) {  
//Open apiResponse.data.authUrl in a browser  
});  

This will redirect the user to the institution of his choice in order to give consent for the payment.

The user selects the bank and gives the consent for the payment

Execute the payment

What we just did is a crucial step that needs to be done before executing a payment request. First the user has to give his consent to you to execute a payment and then you can execute that payment using this consent. Eventually you shall be able to retrieve the user’s consent from the url passed back and thus executing the payment would be a walk in the park.

var consentLookupString = 'consent=';  
var consent = url.substring(  
url.indexOf(consentLookupString) + consentLookupString.__length__, url.length);  
var apiClientFactory = ApiClientFactory.create();  
return apiClientFactory.then( (apiClient) {  
  return new PaymentsApi(apiClient).createPaymentUsingPOST(consent,   paymentRequest: sortCodePaymentRequest);  
});

Conclusion

You made it ! You just executed your first payment using Yapily and Open Banking. Back in the past you had to make the user to give his credentials, take full responsibility of them and ScreenScrap your way through it. Well not anymore! Who could imagine it could be so easy?

And as promised, you can find the source code on github.