BankingComponent: Open Banking SDK

A production-ready Open Banking Client SDK for React and Next.js applications, powered by BankingComponent.

Features

• Connect Account Flow (<OpenBankingConnectAccount />): Discovered accounts listing with multi-select checkboxes, Select All toggle, real-time balance display, account type badges, and 4-digit Transaction PIN authorization.
• Data Consent Flow (<OpenBankingConsent />): Manage Open Banking data-sharing permissions, account access, transaction history, and consent duration.
• Payment Authorization Flow (<OpenBankingPayment />): Complete Strong Customer Authentication (SCA) with 4-digit PIN verification and interactive decline reason modals.
• Granular Permissions: Enable or disable specific open banking scopes

Installation

npm install bankingcomponent-openbanking-sdk-web
# or
yarn add bankingcomponent-openbanking-sdk-web
# or
pnpm add bankingcomponent-openbanking-sdk-web

Quick Start

1. Import Styles

Import the compiled CSS in your application root (e.g. layout.tsx, _app.tsx, or main.tsx):

import "bankingcomponent-openbanking-sdk-web/dist/index.css";

2. Data Consent Flow (<OpenBankingPayment />)

"use client";

import { useState } from "react";
import { OpenBankingPayment } from "bankingcomponent-openbanking-sdk-web";

export default function Checkout() {
  return (
      <OpenBankingPayment
        public_key="pk_test_ob-carbontech-12345"
        initiation_reference="202609272034252464"
        onSuccess={(data) => {
          console.log(data);
        }}
        onError={(error) => {
          console.error(error);
        }}
        onCancel={() => {
          console.log("Payment cancelled by user");
        }}
      />
  );
}

3. Connect Account Flow (<OpenBankingConnectAccount />)

import { OpenBankingConnectAccount } from "bankingcomponent-openbanking-sdk-web";

export default function LinkAccountsPage() {
  return (
      <OpenBankingConnectAccount
        public_key="pk_test_ob-carbontech-12345"
        consent_id="CONS-LY1YD07J8"
        onSuccess={(data) => {
          console.log(data);
        }}
        onError={(error) => {
          console.error(error);
        }}
        onCancel={() => {
          console.log("Account connection cancelled by user");
        }}
      />
  );
}