Power Your AWS Application with Customer Bank Data and Payments Using Yapily APIs

By Rafael Magalhaes, Sr. Software Engineer – Yapily
By Alex Tarasov, Sr. Solutions Architect, Startups – AWS

Yapily

Open banking is revolutionizing financial services and companies like Yapily are at the forefront of this new wave of innovation. These organizations work in the background to power some of the latest technical solutions, giving customers direct access to their end user bank account data or allowing them to make simple, cost-effective payments.

In this post, we will demonstrate how to build and deploy a basic application on Amazon Web Services (AWS) in a few simple steps using the Yapily Bank Connector. We’ll demonstrate how an end user would select their bank from a list, securely connect to that bank and give consent to either:

• Share data, along with the additional API calls needed to pull real-time accounts, balances and categorized transactions.
• Make a payment—this is a direct account-to-account payment and can be adapted to include domestic, international, recurring, or bulk payments, depending on the features supported by each bank.

All of these services fall under fully regulated activity, and Yapily can help navigate the obligations and legal requirements needed to deploy the application as a live, customer facing solution.

Yapily is an AWS Partner open banking infrastructure provider, enabling companies to seamlessly access financial data and initiate payments. Connecting to thousands of banks, Yapily uses a secure open API to power industry leaders in financial services.

What We’ll Build

The diagram below illustrates how we rapidly built a demo app on AWS using the AWS Amplify framework, via a connection to the Yapily API gateway. In this post, we also include details on how to set up a free trial for Yapily via AWS Marketplace.

AWS Amplify helps users to quickly build a serverless web app with a Vue frontend. Using built-in integrations for user authentication using Amazon Cognito, securely storing application credentials with AWS Secrets Manager, setting up backend API endpoints with Amazon API Gateway, and storing the application data in Amazon DynamoDB.

Functionally, the app allows an end user to sign up using Amazon Cognito, select their bank from a list, log in to the bank, and give their consent for a third party to either:

• Pull their latest transactions; a consent can be re-used to maintain access.
• Make an account to account payment; a consent is used once to initiate the payment.

Figure 1 – Demo application architecture.

AWS Amplify generates the code for signing up and authenticating users who are then stored in an Amazon Cognito user pool. It also helps create a REST API invoked by the React frontend and implemented by an AWS Lambda function behind Amazon API Gateway. The backend Lambda function sets up the Yapily connection, allowing the end user to interact with their selected bank.

AWS Amplify also helps store the Yapily API key securely in AWS Secrets Manager so it never needs to appear in the code or in a file. User consent tokens (described in the next section) are stored in the Amazon DynamoDB database.

This is a scalable and secure architecture which does not require users to manage any server instances.

Prerequisites

Before building the app, you will need to get your API keys from Yapily. The sign-up process has been automated, but if you wish to dive into the details then Yapily has made it easy to manually register and create an account. See the Yapily documentation for details.

Install AWS Amplify

You will also need to install AWS Amplify, and if you haven’t already done so then create a default AWS configuration profile by running the AWS configure command as described in the AWS documentation.

Signing Up to Yapily

We have automated the process of creating an account on the Yapily gateway. By subscribing to Yapily on AWS Marketplace, Yapily will automatically generate an application instance on its gateway and assign a series of sandboxes and mock backs to drive the integration via the Yapily dashboard. You can then log in to retrieve the corresponding ClientID and Secret.

This sign-up process creates an associated “Production” application that will be ready to support live bank connections when you are. The switch to live accounts is straightforward but requires some know your customer (KYC) checks before enabling live access to any of the over 1,900 banks across 16 countries in the UK and Europe. More details on coverage are available on the Yapily website.

Building the App

Open the terminal window on your machine and clone the repository from the link below:

git clone https://github.com/yapily/yapily-aws-blog
cd yapily-aws-demo/

Step 1: Initialize a New AWS Amplify Project

The following command will set up a new AWS Amplify project:

amplify init
? Enter a name for the project (awsyapilydemoapp)
? Initialize the project with the above configuration? (Y/n) y
? Select the authentication profile you want to use: AWS profile 
? Please choose the profile you want to use: default

Step 2: Add Authentication

Now, let’s add the user login/sign-up page to our application. We’ll be using email address to log in.

amplify add auth
? Do you want to use the default authentication configuration? Default configuration 
? How do you want users to be able to sign in? (Use arrow keys and space bar to select)
•   Email
•   Username
? Do you want to configure advanced settings? No, I am done

Step 3: Add the API

Next, let’s add a REST API to our application that we’ll use to communicate with the backend. We’ll be using Amazon API Gateway with AWS Lambda integration. Please make sure you name your API “awsblogapi,” otherwise the demo will not work properly.

amplify add api

Follow these steps after for API creation:

? Please select from one of the below mentioned services: REST
? Would you like to add a new path to an existing REST API: No
? Provide a friendly name for your resource to be used as a label for this category in the project: yapilytestapi
? Provide a path (e.g., /book/{isbn}): /v1
? Choose a Lambda source Create a new Lambda function
? Provide an AWS Lambda function name: yapilyaws
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Serverless ExpressJS function (Integration with API Gateway)
? Do you want to configure advanced settings? Yes
? Do you want to access other resources in this project from your Lambda function? No
? Do you want to invoke this function on a recurring schedule? No
? Do you want to enable Lambda layers for this function? No
? Do you want to configure environment variables for this function? Yes
? Enter the environment variable name: APPLICATION_ID
? Enter the environment variable value: [Enter your yapily application Key - when application was created]
? Select what you want to do with environment variables: Add new environment variable
? Enter the environment variable name: APPLICATION_SECRET
? Enter the environment variable value: [Enter your yapily application secret key - when application was created]
? Select what you want to do with environment variables: Add new environment variable
? Enter the environment variable name: APPLICATION_USER
? Enter the environment variable value: [can be a random string]
? Select what you want to do with environment variables: Add new environment variable
? Enter the environment variable name: TABLE_NAME
? Enter the environment variable value: yapilyaws
? Select what you want to do with environment variables: I'm done

Please make sure you’re using “yapilyaws” as a table name, otherwise the demo will not work properly.

? Do you want to configure secret values this function can access? Yes
? Enter a secret name (this is the key used to look up the secret value): yapily_SECRET
? Enter the value for yapily_SECRET: [Enter your yapily sandbox API key - hidden]
? What do you want to do? I'm done
? Do you want to edit the local lambda function now? No
? Press enter to continue
Successfully added resource yapilyaws locally.
? Restrict API access No
? Do you want to add another path? No
Successfully added resource yapilytestapi locally

At this point, AWS Amplify has generated the stub for Lambda to be used with Amazon API Gateway integration located in amplify/backend/function/yapilyaws/src/app.js

We now have to replace that stub file with our version from the repository by running this command from your terminal:

cp functions/app.js amplify/backend/function/yapilyaws/src/app.js

We also have to replace the generated package.json file in the same folder to include the relevant dependencies for the Lambda function:

cp functions/package.json amplify/backend/function/yapilyaws/src/package.json

Step 4: Update Cloud Resources

Until now, the AWS Amplify resources have only been provisioned locally—let’s push the changes to your AWS account:

amplify push

Step 5: Add Storage

Next, let’s create an Amazon DynamoDB table to store the necessary data for our demo:

amplify add storage
? Please select from one of the below mentioned services: NoSQL Database

Welcome to the NoSQL DynamoDB database wizard
This wizard asks you a series of questions to help determine how to set up your NoSQL database table.

? Please provide a friendly name for your resource that will be used to label this category in the project: yapilyawsdb

The table name must be the same as the value of the TABLE_NAME environment variable above 

? Please provide table name: yapilyaws

You can now add columns to the table.

? What would you like to name this column: id
? Please choose the data type: string
? Would you like to add another column? Yes
? What would you like to name this column: token
? Please choose the data type: string
? Would you like to add another column? No
? Please choose partition key for the table: id
? Do you want to add a sort key to your table? No
? Do you want to add global secondary indexes to your table? No
? Do you want to add a Lambda Trigger for your Table? No
Successfully added resource yapilyawsdb locally

Step 6: Update Lambda Function to Add Permissions for Database

Let’s adjust the AWS Lambda function permissions to give it the access to the table:

amplify update function
? Select the Lambda function you want to update? yapilyaws
? Which setting do you want to update? Resource access permissions
? Select the categories you want this function to have access to? storage
? Select the operations you want to permit on yapilytestdb? create, read, update, delete
? Do you want to edit the local lambda function now? No

Step 7: Add Hosting to Deploy the Site

Make sure you have Vue CLI and necessary JavaScript modules installed by running the following commands from the project root folder:

npm install -g @vue/cli
npm install

AWS Amplify can automatically package and deploy your frontend code, uploading your code to Amazon Simple Storage Service (Amazon S3) and setting up Amazon CloudFront distribution for fast access:

amplify add hosting
? Select the plugin module to execute: Hosting with Amplify Console (Managed hosting) ? Choose a type: Manual deployment

Step 8: Publish the Site

Let’s do another sync of the latest changes to your AWS account:

amplify publish

Testing the App

Once you have successfully published the AWS Amplify project, you should get the demo URL similar to https://dev.XXXXX.amplifyapp.com/ in the console output.

Open that URL in the browser, create a new account, and then sign in.

You can use any of the preconfigured sandboxes to test the application. Here are some example screens from our version for reference:

• Select the functionality you wish to use (pull data or make a payment).

Figure 2 – Home page.

• Select your bank screen.

Figure 3 – Select an institution.

• Leverage QR code images.

Figure 4 – Authenticate with Yapily API.

Going Live

Now that you’ve seen how easy it is to build an application powered by the latest financial service technology, try registering on the Yapily page (sandbox connections are free). You can immediately tap into Yapily’s extensive knowledge and experience of helping new solutions and innovators bring their ideas to life.

Conclusion

By following the steps detailed in this post, you will be able to build and deploy a demo application in a few simple steps using the Yapily Bank Connector and AWS Amplify. Users can select their bank from a list, securely connect to that bank, and give consent to either share data or make a payment.
.

.

Yapily – AWS Partner Spotlight

Yapily is an AWS Partner that helps businesses and fintechs connect securely to their end-user bank accounts.

Contact Yapily | Partner Overview | AWS Marketplace