Open banking integration in practice

https://openbanking.scaleragency.io

This project is a Next.js 15 + TailwindCSS powered demo application designed to showcase real-world integration with SEB Open Banking APIs. It simulates a frontend user experience for the following products:

• Authorization(redirect and decoupled)
• PSD2Account information
• PSD2Payment Initiation
• FXRates

The goal of this app is not production readiness, but to serve as a developer-oriented case study - demonstrating secure API interaction, access token handling, and a clear, modular frontend/backend structure suitable for enterprise-level banking integrations.

Functional Coverage

The application demonstrates full-stack implementation of several SEB Open Banking API products. Each integration is designed to mimic a real-world user interaction, while hiding sensitive authentication and networking logic behind secure API routes.

1. Authorization

• OAuth2.0 Client Credentials Flow – Used for FX Rate and PSD2 sandbox endpoints where no user interaction is required.
• Authorization Code Flow with redirect (planned) – Currently only partial, used for storing access tokens from SEB’s sandbox user system.
• Access Token Management – Tokens are securely stored in HTTP-only cookies and read server-side in API routes.

2. Accounts Overview (PSD2 AISP)

This section demonstrates the use of SEB’s PSD2 Account Information Services (AISP) API, enabling access to user account details in a secure and PSD2-compliantmanner. It simulates how a third-party application can retrieve, display, and interact with a user’s bank accounts after successful authorization.

‍

The account data is only retrievable after the user has granted consent through the Authorization API flow. Once authorized, the app uses the returned access_tokento query protected endpoints such as:

• GET/accounts — list of available accounts

‍

• GET/accounts/{accountId} — detailed account information

• GET /accounts/{accountId}/transactions —transaction history

• GET/accounts/{accountId}/transactions/timeline — transaction history displayed as a timeline

3. PSD2Payment Initiation

• ‍Payment initiation (POST/payments/{paymentProduct})

Simulates SEPA payment creation using sandbox users and predefined IBANs.

• ‍Payment status retrieval (GET/payments/{product}/{id}/status)

Queries the payment’s transaction status (e.g., RCVD, ACTC, RJCT) to determine lifecycle state.

• ‍Payment details (GET/payments/{product}/{id})

Displays structured information about the payment (amount, account details, date, remittance).

• SCA (Strong Customer Authentication) initiation
  
  • Available SCA methods are retrieved from the status endpoint.
  • User selects one from a dropdown.
    
  • The app triggers the /authorisations endpoint with TPP-Redirect-URI, redirecting the user to SEB's sandbox flow.

• Local Storage Integration
  
  • Successful payments are stored in a saved Payments list in local Storage
  • The user can view them on a standalone page
  • Clicking a payment navigates to a detail view aggregating all 3 GET endpoints.

4. Foreign Exchange – Currency Account Transfer

• Ping(GET /ping)
  Basic service availability check.
• Quote Request (POST /quotes)
  Allows users to get exchange rate quote based on a source and target currency,and amount.
• Quote Status (GET /quotes/{quote_id})
  Displays the current state and rate of the previously fetched quote.
• Quote Order (POST /quotes/{quote_id}/orders)
  Triggers the execution of the agreed FX deal.

This layered implementation pattern — combining local Storage for persistence, server routes for token management, and clear component separation — makes this demo a powerful reference for teams integrating Open Banking APIs in enterprise-grade projects.

In-App Debug Console (DebugPanel)

To support seamless debugging during API integration and sandbox testing, the application includes a built-in debug console available in every route via a fixed floating button (🧪 Debug). This feature significantly improved developer

experience during the iterative API implementation.

How It Works

The DebugPanel component leverages a global Zustand store (useDebugStore) to collect, display, and manage debug logs related to all API interactions made via the app.

‍

Each logged item captures:

• HTTP method & frontend URL
• SEB product and endpoint
• Request body (if present)
• Response status and response body
• Timestamp of the request

The panel uses:

• react-syntax-highlighter for readable, syntax-highlighted JSON
• A Clear button to reset state between flows

This demo application showcases how modern web applications can interact securely and effectively with SEB’s Open Banking APIs. While not intended for production use, it provides developers with a comprehensive reference for structuring API calls, managing tokens, and building real-world financial workflows with best practices in mind.