Wie Chris Michael in seinem letzten Blog feststellte, wird Open Banking [großartig](https://www.linkedin.com/pulse/open -banking-awesome-chris-michael?articleId=6449732898202406912#comments-6449732898202406912&trk=prof-post) und wie versprochen wollen wir das Ökosystem durch Open Sourcing der Zahlungs-App, die wir während [ForgeRock](https://www. forgerock.com/) Hackathon. Lesen Sie den Blog bis zum Ende, um den Link zum Code zu finden…

Stellen Sie sich die Möglichkeit vor, eine mobile Zahlung [app](https://medium.com/yapily/building-a-payment-app-that-connects-to-open-banking-in-a-weekend-open-source- f24448d05488), die dem Benutzer die Möglichkeit gibt, sein Bankkonto im Handumdrehen zu verwenden. Und das alles nur, indem Sie die Erlaubnis des Benutzers dazu einholen. Keine Persistenz von Benutzeranmeldeinformationen, keine Notwendigkeit für eine Back-End-Infrastruktur, keine Notwendigkeit, einen hackigen Ansatz zu entwickeln. Einfach eine direkte Interaktion zwischen dem Benutzer und der Bank mit ein wenig Hilfe von Yapily.

Alles beginnt mit der Registrierung beim Yapily Dashboard, der Erstellung Ihrer Anwendung und der Auswahl der Finanzinstitute, mit denen Ihr Benutzer interagieren soll.

Sobald Sie fertig sind, erhalten Sie Ihre Yapily-Anmeldeinformationen und können mit der Yapily [API] (https://docs.yapily.com/) interagieren.

SDK erstellen

Natürlich basierend auf Ihrem Stack, um mit einer API zu interagieren, müssen Sie jeden Aufruf mit der Programmiersprache Ihrer Wahl implementieren. Das ist viel zu viel Aufwand, sollte es nicht einfacher sein?

Natürlich sollte es einfacher sein, deshalb stellen wir die Spezifikation unserer API Swagger zur Verfügung. Durch die Bereitstellung der Swagger-Spezifikation unserer API können Sie das Yapily SDK mit der Sprache Ihrer Wahl generieren.

Der Fels plattformübergreifender Anwendungen, daher ist [Flattern] (https://flutter.io/) ein Kinderspiel, wenn es um mobile Anwendungen geht.

Lassen Sie uns also unser SDK mit dem Tool Swagger codegen generieren.

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

Konfigurieren des Yapily SDK für Ihre Flutter-App

Wenn Sie nun Ihr eigenes SDK generieren, liegt es an Ihnen, wie Sie es verteilen und verwenden. Für das Dart-SDK haben wir dies bereits für Sie getan, indem wir es in unserem github-Profil gehostet haben, also müssen Sie es nicht tun was auch immer.

Angenommen, Sie haben bereits eine Flutter-Anwendung ausgeführt, müssen Sie lediglich die Yapily SDK-Abhängigkeit in die Datei pubspec.yaml aufnehmen.

Abhängigkeiten:
  flattern:
sdk: flattern
  yapily_sdk:
git:
  URL: git@github.com:yapily/yapily-sdk-dart.git
  flatter_webview_plugin: '0.2.1+2'

Verwenden Sie die Anmeldeinformationen Ihrer Yapily-Anwendung

Lassen Sie uns nun unsere Yapily-Anmeldeinformationen in unsere App einfügen. Der Einfachheit dieses Blogs halber werden wir sie im Asset-Ordner platzieren. Achten Sie immer darauf, wie Sie Ihre Anmeldeinformationen verteilen.

Wir werden einen Ordner yapily-assets erstellen, der die Datei yapily-config.json enthält, die die Anmeldeinformationen unserer Yapily-App und einige andere Konfigurationen enthält.

{
 "key":"<Ihr API-Schlüssel>",
 "secret":"<Ihr API-Geheimnis>",
 "userName": "moneyme_user",
 "callback": "moneyme://was auch immer/"
}

Geben Sie dann den Ordner yapily-assets im Abschnitt Assets der Datei pubspec.yaml an.

Vermögenswerte:
- Grafiken/
- yapily-vermögen/

Bevor wir mit unserem Anwendungscode fortfahren, müssen wir eine Abrufmethode für die Yapily-Konfiguration hinzufügen.

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

Klasse ConfigLoader {

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

Klasse YapilyConfig {

  finaler String-Schlüssel;
  letztes String-Geheimnis;
  final String userName;
  finaler String-Rückruf;
  finaler 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"]);
  }
}

Und das ist es! Jetzt sind wir bereit, einige Open-Banking-Funktionen hinzuzufügen, die vom Yapily SDK unterstützt werden.

Yapily-Client einrichten

Das Wichtigste zuerst, lassen Sie uns eine Fabrik für unseren Yapily ApiClient erstellen

import 'dart:async';
'yapily_config.dart' importieren;
import 'Paket:yapily_sdk/api.dart';
Klasse ApiClientFactory {
statisch Future<ApiClient> create() {
return ConfigLoader.loadAsync().then( (yapilyConfig) {
  var httpBasicAuth = HttpBasicAuth.setCredentials(Benutzername: yapilyConfig.key, Passwort: yapilyConfig.secret);
  var apiClient = ApiClient.withAuth(httpBasicAuth);
  apiClient zurückgeben;
});
  }
}

Diese Factory erstellt einen Client, der berechtigt ist, Anfragen an das Yapily SDK zu stellen.

Lassen Sie uns zuerst einen Yapily-Benutzer erstellen. Die Konfiguration unserer Anwendung enthält einen Benutzernamen, daher erstellen wir einen Yapily-Benutzer und fügen eine Referenz zu diesem Benutzernamen hinzu.

Falls der Benutzer bereits existiert, können wir nur seine userUuid abrufen, die für die Interaktion mit der Yapily-API benötigt wird.

var apiClientFactory = ApiClientFactory.create();
apiClientFactory.then((apiClient) {
  ApplicationUsersApi yapilyUsersApi = new ApplicationUsersApi(apiClient);
  yapilyUsersApi.getUsersUsingGET().then((userList) {
userList.asMap().forEach((Schlüssel, Benutzer) {
  if (user.referenceId == yapilyConfig.userName) {
userUuid = user.uuid;
  }
});
if (userUuid == null) {
  //Es existiert kein Benutzer mit diesem Benutzernamen
  NewApplicationUser applicationUser = __new__ NewApplicationUser();
  applicationUser.referenceId = yapilyConfig.userName;
  yapilyUsersApi.addUserUsingPOST(applicationUser).then((yapilyUser) {
userUuid = yapilyUser.uuid;
  });
}
  });
});

Die Zustimmung des Benutzers für eine Zahlung einholen

Wäre es nicht toll, wenn der Nutzer nur einer Zahlung zustimmen könnte und alles andere wie die Zahlungsausführung oder der Zahlungsabschluss hinter den Kulissen erledigt wird? Das ist das Tolle an Open Banking und Yapily, sie machen die Dinge so einfach.

Wir werden den Benutzer bitten, seine Zustimmung zu einer bestimmten Zahlung zu geben.

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 = "Geldzahlung";
.
.
.
var apiClientFactory = ApiClientFactory.create();
  return apiClientFactory.then( (apiClient) {
neue PaymentsApi(apiClient) zurückgeben.createPaymentInitiationUsingPOST(id,paymentRequest:
sortCodePaymentRequest, userUuid: userUuid, Rückruf: Rückruf);
  }).then((apiResponse) {
//Öffne apiResponse.data.authUrl in einem Browser
});

Dadurch wird der Nutzer an das Institut seiner Wahl weitergeleitet, um der Zahlung zuzustimmen.

Der Benutzer wählt die Bank aus und gibt die Zustimmung zur Zahlung

Zahlung ausführen

Was wir gerade getan haben, ist ein entscheidender Schritt, der vor der Ausführung einer Zahlungsanforderung durchgeführt werden muss. Zuerst muss der Benutzer Ihnen seine Zustimmung zur Ausführung einer Zahlung geben und dann können Sie diese Zahlung unter Verwendung dieser Zustimmung ausführen. Schließlich können Sie die Zustimmung des Benutzers von der zurückgegebenen URL abrufen und die Ausführung der Zahlung wäre ein Spaziergang im Park.

var ZustimmungLookupString = 'Zustimmung=';
var Zustimmung = url.substring(
url.indexOf(consentLookupString) + ConsentLookupString.__length__, url.length);
var apiClientFactory = ApiClientFactory.create();
return apiClientFactory.then( (apiClient) {
  neue PaymentsApi(apiClient) zurückgeben.createPaymentUsingPOST(consent,paymentRequest: sortCodePaymentRequest);
});

Fazit

Sie haben es geschafft ! Sie haben gerade Ihre erste Zahlung mit Yapily und Open Banking ausgeführt. In der Vergangenheit mussten Sie den Benutzer dazu bringen, seine Anmeldeinformationen anzugeben, die volle Verantwortung dafür zu übernehmen und sich mit ScreenScrap durch sie hindurchzuarbeiten. Nun, nicht mehr! Wer konnte sich vorstellen, dass es so einfach sein könnte?

Und wie versprochen findet ihr den Quellcode auf github.