Skip to main content

Getting Started

For architecture and schema details, see Technical Reference. For the full catalog of integration points, see Extension Points.

Quick Start​

To onboard and test an extension quickly:

  1. Build your extension (React component or JavaScript module)
  2. Host it on a publicly accessible HTTPS URL
  3. Register the extension using the Extensions API
  4. Enable it for your FI (institutionId)
  5. Reload the application and verify it in the UI

Once registered, the platform automatically loads your extension at runtime when the corresponding extension point is invoked.

Prerequisites​

Before onboarding an extension, ensure the following:

  • Access to Extension APIs (authentication and authorization configured)
  • Required permissions to register extensions
  • Ability to host JavaScript bundles on a publicly accessible HTTPS URL (for example, an FI-hosted CDN)
  • Allowed domains configured to avoid CORS issues when loading remote modules
  • Extension bundle correctly built and exposing the expected entry point
  • Bundle URL versioned or cache-safe so updates are reflected
  • Extension compatible with the platform runtime (for example, supported React version, no conflicting dependencies)
  • Basic error handling implemented so the extension does not impact the host application
warning

If any of the above are not set up, the extension may fail to load, render incorrectly, or not reflect updates.

Step 1: Build Your Extension​

Develop your extension as a JavaScript module (for example, a React component for UI extensions) that adheres to the contract defined by the target extension point.

export default function MyExtension(props: ExtensionProps) {
  return (
    <div>
      Custom FI Extension — Account: {props.accountId}
    </div>
  );
}

Contract Definition​

  • ExtensionProps represents the contract defined by the extension point
  • It contains all contextual data passed to the extension at runtime (for example, account, transaction, or user data)
  • The structure of ExtensionProps is specific to each extension point and is documented as part of the extension point schema

For data provider extensions:

  • The platform defines an interface (contract) that the extension must implement
  • The extension is expected to return data in the format defined by this interface
  • The returned data is consumed by the platform to drive UI rendering or behavior

Requirements​

  • The module must export a default entry point
  • The implementation must conform to the contract defined by the extension point
  • The extension should handle missing or optional data gracefully

Step 2: Host Your Extension​

Host the compiled extension bundle on a publicly accessible HTTPS endpoint.

Extensions are typically hosted on the platform's GCP Cloud Storage (via CDN). The URL structure often follows this pattern:

https://<prod-url>/widgets/nextgen/<extension-name>/latest

Requirements​

  • The hosted bundle must be publicly accessible (no authentication required)
  • The URL must be reachable from the target environment (Stage / Production)
  • The hosting domain must be whitelisted in the allowed domains list
  • HTTPS must be used for all hosted resources
  • Ensure the correct entry file (for example, remoteEntry.js) is accessible

Step 3: Register and Enable the Extension​

Register the extension using the Extension API. Once registered, the extension is automatically enabled for the associated FI.

API Endpoint​

POST /extensions

Sample Request​

{
  "extensionId": "com.fi.custom.account-extension.00516",
  "extensionPointId": "com.dbk.platform.olb.extension-point.pages.account-history.account-detail",
  "remote": {
    "url": "https://your-domain.com/extensions/my-extension.js",
    "name": "account-extension",
    "entry": "MyExtension",
    "category": "ModuleFederation"
  }
}

Extension Metadata​

FieldDescription
extensionIdUnique identifier for the extension (must be globally unique)
extensionPointIdIdentifier of the target extension point
remote.urlURL where the extension bundle is hosted
remote.nameModule Federation container name
remote.entryExported module or component to be loaded
remote.categoryLoader category (for example, ModuleFederation)

FI Enablement and Naming Convention​

  • The extensionId must be globally unique across the platform
  • It is recommended to suffix the extensionId with the FI's institutionId

Example:

com.fi.custom.account-extension-00516

This convention helps:

  • Avoid naming conflicts across different FIs
  • Clearly identify ownership of the extension
  • Automatically associate the extension with the intended FI
info

Once the extension is registered with the appropriate FI-specific identifier, it is considered enabled for that FI in the given environment.

Notes​

  • Ensure the extensionPointId matches a valid and supported integration point — see Extension Points
  • Any mismatch in metadata (for example, incorrect entry, invalid URL) may prevent the extension from loading
  • Changes to the extension require updating the hosted bundle (and versioning, if applicable)

Step 4: Verify Integration​

After registering the extension, verify that it is correctly loaded and functioning as expected.

Validation Steps​

  • Navigate to the target page or flow where the extension point is invoked
  • Confirm that the extension is loaded and rendered at the expected location in the UI
  • Validate the behavior using relevant contextual data (for example, account or transaction data)
  • Ensure the extension responds correctly to different data scenarios (if applicable)

Debugging Tips​

Use browser Developer Tools (Network and Console tabs) to:

  • Verify that the extension bundle (for example, remoteEntry.js) is successfully loaded
  • Check for any runtime errors or warnings

Also confirm that:

  • The extensionPointId and extensionId are correctly configured
  • The hosted URL is accessible and not blocked (for example, due to CORS or network restrictions)
tip

Extensions are loaded dynamically at runtime when the corresponding extension point is triggered. If the extension is not visible, it is typically due to configuration issues — incorrect metadata, an invalid entry point, or an inaccessible bundle.

General Guidelines​

These guidelines apply to all point-based extensions.

Performance​

  • Avoid heavy synchronous logic
  • Use lazy loading where applicable
  • Keep UI components lightweight

Data Handling​

  • Always handle partial or missing data

UI Constraints​

  • Respect container size (cards, slide-overs)
  • Follow platform styling conventions

Safety​

  • Do not mutate host application state
  • Ensure error isolation (no UI break)

Next Steps​