DEV Community: pixelbyaj

Building an ISO 20022 End-to-End Demo with ngx-iso-form and ISO20022 Libraries

pixelbyaj — Sat, 15 Mar 2025 04:56:48 +0000

ISO 20022 has emerged as the global standard for financial messaging, offering a structured, extensible framework for payments, securities, and trade communications. However, working with its XML-based messages and XSD schemas can be daunting due to their complexity. In this article, we’ll walk through an end-to-end demo that simplifies ISO 20022 message creation and processing. We’ll use ngx-iso-form, an Angular library, to dynamically generate user-friendly forms, and leverage either the ISO20022.Suite library to convert XSD to JSON and transform form output into validated ISO 20022 messages. Let’s dive in!

Overview of the Tools

ngx-iso-form: An Angular library that generates reactive forms from XSD schemas, ideal for creating ISO 20022 messages dynamically. It outputs JSON, making it a bridge between user input and downstream processing.
ISO20022.Suite: A .NET library that parses XSDs, converts them to JSON, and validates/generates ISO 20022 messages.

For this demo, we’ll use ISO20022.Suite a .NET library capable of both XSD-to-JSON conversion and JSON-to-XML transformation with validation.

LIVE End-To-End DEMO

Step 1: Setting Up the Environment

Frontend (Angular with ngx-iso-form)
First, install Angular and ngx-iso-form:

ng new iso20022-demo
cd iso20022-demo
ng add @angular/material
npm install ngx-iso-form

Import Module & SCSS

import { NgxIsoFormModule } from 'ngx-iso-form';
import { HttpClient, provideHttpClient } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    NgxIsoFormModule
  ],
  provider:[provideHttpClient()]
  TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
    ...
})

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/i18n/', '.json');
}

Add style file to angular.json file

styles:[
     "node_modules/ngx-iso-form/lib/styles/index.scss"
]

Add component to view

 <div class="iso-form">
  <ngx-iso-form [schema]="schema" [form]="form"></ngx-iso-form>
  <button mat-button matStepperNext (click)="onSubmit($event)">Next</button>
 </div>

Component

export class AppComponent implements OnInit {
    @ViewChild('isoForm') isoForm: NgxIsoFormComponent;

    form: IsoForm;
    schema: SchemaElement;

    // exclude the MsgId field from loading.
    excludes:string[] = ['Document_BkToCstmrStmt_GrpHdr_MsgId'];
    ngOnInit() {

        this.httpClient.get('http://localhost:5000/api/iso20022/generate-schema').subscribe((data) => {
        this.schema = data as SchemaElement
       });
    }

    //To get the form object
    get model(): string {
        const data = this.isoForm.model;
        this.formData = JSON.stringify(data)
    }

    //To get the form validation status
    get invalid(): boolean {
        return this.isoForm.invalid;
    }

  onSubmit($event: any) {

    // Send to backend for processing
    this.submitToBackend(this.form.getFormModel());
  }

  submitToBackend(data: any) {
      const formData = JSON.stringify(jsonModel);
      const url = `http://localhost:5000/api/iso20022/create-message`;
      this.httpClient
      .post(url, formData , { responseType: 'text' })
       .subscribe({next: (data) => {
          $event.target.click();
        },error: (errorData)=>{
          const error = JSON.parse(errorData.error);
          console.log(error);
          $event.target.click();
        }});
  }
}

Backend (.NET with ISO20022.Suite)
Set up a .NET Core API project:

dotnet new webapi -n Iso20022Api
cd Iso20022Api
dotnet add package ISO20022.Suite

Note: Ensure you have an ISO 20022 XSD file (e.g., pacs.008.001.12.xsd) downloaded from iso20022.org or your provider.

Step 2: Designing the ISO 20022 Form

Using ngx-iso-form, we’ll generate a form based on an XSD like pacs.008.001.12 (FI-to-FI Customer Credit Transfer). First, convert the XSD to a JSON schema compatible with ngx-iso-form using ISO20022.Suite

Convert ISO 20022 XSD to JSON

// In your .NET API (e.g., Iso20022Controller.cs)
using ISO20022.Suite;

public class Iso20022Controller : ControllerBase
{
    [HttpGet("generate-schema")]
    public IActionResult GenerateSchema()
    {
        string xsdPath = "path/to/pacs.008.001.10.xsd";
        XsdToJson xsdLib = new(xsdPath);
        xsdLib.Convert();
        return Ok(xsdLib.SchemaJson);
    }
}

Step 3: Converting JSON to ISO 20022 Message

On the backend, use ISO20022.Suite to transform the JSON into an ISO 20022 XML message and validate it against the XSD:

[HttpPost("create-message")]
public IActionResult CreateMessage([FromBody] string jsonData)
{
    try
    {
        string targetNamespace = "urn:iso:std:iso:20022:tech:xsd:pacs.008.001.12";
        string xsdContent = File.ReadAllText("path/to/pacs.008.001.12.xsd");

        // Generate ISO 20022 XML from JSON
        XElement xml = MxMessage.Create(jsonData, targetNamespace);

        // Validate against XSD
        bool isValid = MxMessage.                    MxMessage.ValidateMXMessage(xsdContent, xmlMessage, out string validationMessage);
(xml, xsdPath);
        if (!isValid) return BadRequest("Validation failed");

        return Ok(xml.ToString());
    }
    catch (Exception ex)
    {
        return StatusCode(500, $"Error: {ex.Message}");
    }
}

Here, MxMessage.Create constructs the XML, and ValidateMXMessage ensures it adheres to the schema, catching errors like missing mandatory fields or invalid data types.

Step 4: Running the Demo

Start the Backend: Run the .NET API (dotnet run in the Iso20022Api directory).
Launch the Frontend: Serve the Angular app (ng serve).
Interact with the Form: Open http://localhost:4200, fill out the form (e.g., a payment instruction), and submit.
View the Output: Check the console for the JSON form data and the resulting ISO 20022 XML message, validated against the XSD.

Benefits and Considerations

Ease of Use: ngx-iso-form abstracts XSD complexity into a user-friendly UI, while ISO20022.Suite handles backend validation and transformation.
Validation: Ensures compliance with ISO 20022 standards, critical for financial interoperability.
Scalability: Extend this setup for other message types (e.g., camt.053, pain.001) by swapping XSDs.

Conclusion

This end-to-end demo showcases how ngx-iso-form and ISO20022.Suite (or raw XSDs) can streamline ISO 20022 workflows. From form creation to validated XML output, it’s a practical solution for fintech developers aiming to adopt this standard efficiently. Try it out,a nd let us know how it transforms your financial messaging projects!

MT-To-JSON

pixelbyaj — Sat, 15 Mar 2025 02:19:26 +0000

Introducing the Swift MT to JSON Converter for .NET – a powerful library designed to effortlessly transform complex Swift MT messages into structured JSON format. Built for .NET developers, this library streamlines the integration of financial messaging data into modern applications, enabling faster processing, better readability, and seamless data handling. Whether you're working on financial systems, compliance tools, or data analytics platforms, this library is your key to bridging traditional Swift MT standards with modern JSON workflows. Simplify your development and enhance your financial data management today!

Features

Convert Swift MT to JSON message
Set custom parsing rules

Live Demo

Example

Swift MT Message

{1:F01BANKBEBBAXXX1234567890}{2:O1031500100417BANKUS33XXXX22221234561004171500N}{3:{108:ILOVEFUNDSTRANSFER}}{4:
:20:1234567890123456
:23B:CRED
:32A:240917USD100000,00
:33B:USD100000,00
:50K:/12345678
JOHN DOE
123 MAIN STREET
NEW YORK, NY 10001, USA
:52A:BANKBEBBXXX
:53A:BANKDEFFXXX
:57A:BANKUS33XXX
:59:/9876543210
JANE DOE
456 OAK STREET
LOS ANGELES, CA 90001, USA
:70:/INV/123456 PURCHASE ORDER 78910
:71A:OUR
:72:/BNF/PLEASE CONFIRM UPON RECEIPT
:77B:/NOTFORFINANCIALADVICE
-}

SWIFT MT103 RULES

{
  "20": {
    "Name": "TransactionReferenceNumber"
  },
  "23B": {
    "Name": "BankOperationCode"
  },
  "32A": {
    "Fields": [
      {
        "Name": "ValueDate",
        "FormatDate": "dd/MM/yyyy",
        "SubString": {
          "From": 0,
          "To": 6
        }
      },
      {
        "Name": "Currency",
        "SubString": {
          "From": 6,
          "To": 3
        }
      },
      {
        "Name": "InterbankSettled",
        "SubString": {
          "From": 9,
          "To": -1
        }
      }
    ]
  }
}

Swift MT JSON Message parsed with rules

{
    "BasicHeader": {
      "MessageType": "F01",
      "SenderBIC": "BANKBEBB"
    },
    "ApplicationHeader": {
      "MessageIndicator": "Output",
      "MessageType": "103",
      "ReceiverBIC": "15001004",
      "MessagePriority": "Urgent"
    },
    "UserHeader": {
      "MessageUserReference": "ILOVEFUNDSTRANSFER"
    },
    "MessageDetails": {
      "Fields": {
        "TransactionReferenceNumber": "1234567890123456",
        "BankOperationCode": "CRED",
        "ValueDate": "17-09-2024",
        "Currency": "USD",
        "InterbankSettled": "100000,00"
      }
    },
    "Message": "{1:F01BANKBEBBAXXX1234567890}{2:O1031500100417BANKUS33XXXX22221234561004171500N}{3:{108:ILOVEFUNDSTRANSFER}}{4:\r\n:20:1234567890123456\r\n:23B:CRED\r\n:32A:240917USD100000,00\r\n:33B:USD100000,00\r\n:50K:/12345678\r\nJOHN DOE\r\n123 MAIN STREET\r\nNEW YORK, NY 10001, USA\r\n:52A:BANKBEBBXXX\r\n:53A:BANKDEFFXXX\r\n:57A:BANKUS33XXX\r\n:59:/9876543210\r\nJANE DOE\r\n456 OAK STREET\r\nLOS ANGELES, CA 90001, USA\r\n:70:/INV/123456 PURCHASE ORDER 78910\r\n:71A:OUR\r\n:72:/BNF/PLEASE CONFIRM UPON RECEIPT\r\n:77B:/NOTFORFINANCIALADVICE\r\n-}\r\n"
  }

Swift MT JSON Message parsed without rules


{
  "BasicHeader": {
    "MessageType": "F01",
    "SenderBIC": "BANKBEBBAXX"
  },
  "ApplicationHeader": {
    "MessageIndicator": "Output",
    "MessageType": "103",
    "ReceiverBIC": "0417BANKUS3",
    "MessageDate": "150010",
    "MessagePriority": "Urgent"
  },
  "UserHeader": {
    "MessageUserReference": "ILOVEFUNDSTRANSFER"
  },
  "MessageDetails": {
    "Fields": {
      "20": "1234567890123456",
      "59": "/9876543210",
      "70": "/INV/123456 PURCHASE ORDER 78910",
      "72": "/BNF/PLEASE CONFIRM UPON RECEIPT",
      "23B": "CRED",
      "32A": "240917USD100000,00",
      "33B": "USD100000,00",
      "50K": "/12345678",
      "52A": "BANKBEBBXXX",
      "53A": "BANKDEFFXXX",
      "57A": "BANKUS33XXX",
      "71A": "OUR",
      "77B": "/NOTFORFINANCIALADVICE"
    }
  },
  "Message": "{1:F01BANKBEBBAXXX1234567890}{2:O1031500100417BANKUS33XXXX22221234561004171500N}{3:{108:ILOVEFUNDSTRANSFER}}{4:\n:20:1234567890123456\n:23B:CRED\n:32A:240917USD100000,00\n:33B:USD100000,00\n:50K:/12345678\nJOHN DOE\n123 MAIN STREET\nNEW YORK, NY 10001, USA\n:52A:BANKBEBBXXX\n:53A:BANKDEFFXXX\n:57A:BANKUS33XXX\n:59:/9876543210\nJANE DOE\n456 OAK STREET\nLOS ANGELES, CA 90001, USA\n:70:/INV/123456 PURCHASE ORDER 78910\n:71A:OUR\n:72:/BNF/PLEASE CONFIRM UPON RECEIPT\n:77B:/NOTFORFINANCIALADVICE\n-}"

ISO 20022

pixelbyaj — Thu, 06 Mar 2025 06:12:28 +0000

We provide free and open-source, enterprise-grade libraries and software designed to manage payment messages that adhere to SWIFT ISO20022 & SEPA standards. Our robust tools allow users to download, extract, render, generate, and **upload **the swift messages seamlessly. Leverage our advanced solutions to enhance your financial operations.

Please click ISO20022 for further details.

Angular Form using ISO 20022 XML Message

pixelbyaj — Tue, 15 Aug 2023 21:42:19 +0000

ngx-xml-message

This form is used to design Angular Readonly Form using any given XML/ISO 20022 messages. The primary use of this UI library is to design ISO 20022 or MX readonly forms dynamically.

Features

🔥 Automatic forms generation
⚡️ Supports ISO 20022 messages:
- Support translation labels.

LIVE DEMO

Angular Dynamic Form Using XSD

pixelbyaj — Tue, 15 Aug 2023 21:37:15 +0000

ngx-iso-form angular library is used to design Angular Reactive Form using any given XSD. The primary use of this UI library is to design ISO 20022 forms dynamically.

LIVE DEMO

Features

🔥 Automatic forms generation
📝 Easy to extend with custom field types
⚡️ Supports ISO 20022 schemas:
- XSD - JSON Schema using XSDService nuget
- Support all validation like required, pattern, minlength, maxlength
- Support translation labels, errors and date formats.

Kafka.SignalR

pixelbyaj — Wed, 26 Jul 2023 15:14:13 +0000

Kafka.SignalR is a powerful .NET library that seamlessly integrates Apache Kafka with ASP.NET Core SignalR, enabling real-time message streaming from Kafka topics directly to your SignalR clients. Designed for developers building responsive, scalable applications, this library bridges the gap between Kafka’s robust messaging system and SignalR’s real-time communication capabilities.

Features

Real-Time Messaging: Push Kafka messages to SignalR clients instantly.
Multi-Topic Support: Subscribe to multiple Kafka topics with ease.
Scalable Integration: Leverage Kafka’s distributed architecture with SignalR’s client connectivity.
Simple API: Intuitive setup for .NET developers familiar with SignalR and Kafka.

GitHub Repo
NuGet

SitePage for React. sitepage.jsx

pixelbyaj — Sun, 10 Jan 2021 15:54:26 +0000

Releasing the ReactJS version of sitepage.js. sitepage.jsx 1.0.0-rc for ReactJS has been released. This version has bring the feature to load ReactJS component at runtime.

GitHub Documentation:
https://github.com/pixelbyaj/sitepage.jsx/tree/1.0.0-rc

Demo link:
https://stackblitz.com/edit/sitepagejsx

sitePage.js 3.0.3-rc

pixelbyaj — Wed, 06 Jan 2021 20:02:31 +0000

From 3.0.3-rc is sitePage.js library will be now available under GPL License. I have even fix the transition bug mentioned by https://dev.to/jamesthomson.

sitePage.js 3.0.2-rc released

pixelbyaj — Tue, 05 Jan 2021 17:51:05 +0000

Hello mates,
I just release sitePage.js 3.0.2-rc version. sitePage.js is the JavaScript library with which you can build beautiful full page scrolling website. You can visit www.pixelbyaj.com or https://pixelbyaj.github.io/sitepage for further details.

Thanks,
pixelbyaj

sitePage.js

pixelbyaj — Mon, 17 Feb 2020 15:05:20 +0000

It would going to be my first full fledge #javascript library. Introducing sitePage.js
pixelbyaj.github.io/sitepage/
npm i sitepage.js

Typescript based JSONAPI Serializer & Deserializer library

pixelbyaj — Wed, 25 Dec 2019 13:34:50 +0000

package name: @pixelbyaj/jsonapi