DOCSEARCHbyAlgolia
Submit Docs

Swan Banking Frontend

website·Indexed 29 days ago

https://swan-io.github.io/

Official reference implementation for user onboarding and web banking interfaces. Includes documentation on local environment setup, build and deployment, OAuth2 authentication, GraphQL API schemas, and the Lake design system component kit.

Tokens
8.2K
Snippets
35
Records
84
Agent score
74%

What's inside Swan Banking Frontend

  1. Overview of Swan Banking Frontend

    Swan Banking Frontend is the official client provided by Swan for managing user onboarding and web banking. It consists of two primary modules:

    • Web Banking (banking): A financial interface for users to manage transactions, cards, payments, and memberships.
    • Onboarding (onboarding): A guided process for opening new accounts that ensures legal requirements are met.

    This project is intended for developers who need to bootstrap a Swan UI quickly, customize the user experience (such as fonts, colors, or component removal), or use Swan's reference implementation as a guide.

  2. Build a custom banking app with Swan Web Banking

    Swan provides Web Banking source code that allows developers to create a branded banking application. The solution is highly customizable, allowing for changes to navigation and branding. It comes with several pre-built pages that can be kept, removed, or extended: History, Account, Transfer, Cards, Members, and Profile.

  4. Use the Lake Design System component kit

    Swan clients utilize Lake, a dedicated design system. The component kit is distributed as the @swan-io/lake package. For detailed documentation, component specifications, and visual examples, refer to the Lake Storybook and GitHub repository.
    # Install the Lake component kit
npm install @swan-io/lake

  5. Implement Step 2: Organization details

    Collect organization information across two screens:

    Screen 1: Legal Information and Address

    • Confirm if the organization is registered for Rich Communication Services (RCS).
    • Organization name (Mandatory).
    • Organization registration number (Optional).
    • Organization VAT number (Optional).
    • Organization address.
    • Germany Specifics: For German companies with German accounts, collect the company tax number (Umsatzsteuer-Identifikationsnummer, 10-11 digits).

    Screen 2: Company Details

    • Business activity (selected from a provided list).
    • Business description (goals and activities).
    • Expected monthly payment (selected range).

  6. Collect preliminary company onboarding information

    Before starting the main onboarding steps, collect the following essential information to determine the flow logic:

    1. Organization country.
    2. Legal status of the person completing onboarding (Only legal representatives or those with power of attorney are permitted; those with power of attorney must provide proof later).
    3. Type of organization (this determines the required documents).

  7. Expose and route the Banking and Onboarding applications

    The server is a single application that handles both the Web Banking interface and the Onboarding process. To ensure synchronization and avoid issues, both subdomains should point to the same application instance. The server determines which client to route to by inspecting the x-forwarded-host or host HTTP headers.

  9. Deploy Swan partner frontend using the official Docker image

    To deploy the onboarding and banking interfaces on your own subdomains without forking the repository, use the public Docker image hosted on the GitHub Container Registry. The image is automatically updated whenever a new version is released to production at Swan. It is recommended to keep the image up-to-date to ensure compatibility with the Swan API and to access new features.
    docker pull ghcr.io/swan-io/swan-partner-frontend:latest

  10. Manage user progress with Onboarding IDs

    Since users do not technically exist within Swan until the onboarding process is complete, the onboarding interface utilizes the unauthenticated API. To track a user's progress and associate their provided information and documents with a specific session, you must create an onboarding instance, which generates a unique onboarding ID. All data collected during the unauthenticated phase is attached to this ID.

  11. Example implementation of sendAccountMembershipInvitation

    This example demonstrates how to implement the invitation automation by fetching invitation data from an API, formatting it for Mailjet, and sending the email.
    const sendAccountMembershipInvitation = (invitationConfig: InvitationConfig) => {
  // Get data from the API
  return (
    getAccountMembershipInvitationData({
      accessToken: invitationConfig.accessToken,
      inviteeAccountMembershipId: invitationConfig.inviteeAccountMembershipId,
      inviterAccountMembershipId: invitationConfig.inviterAccountMembershipId,
    })
      // Build mailjet config
      .mapOkToResult(invitationData =>
        getMailjetInput({ invitationData, requestLanguage: invitationConfig.requestLanguage }),
      )
      // Send email
      .flatMapOk(data => {
        return Future.fromPromise(mailjet.post("send", { version: "v3.1" }).request(data));
      })
      .resultToPromise()
  );
};

  12. Generate TypeScript types from GraphQL documents

    Swan uses GraphQL Codegen to provide strong typing for GraphQL queries and mutations. Run the codegen command to generate TypeScript files (e.g., partner.ts) based on the .gql documents. Note that generated files are not versioned in the repository to avoid merge conflicts; they are generated during the CI process.
    pnpm graphql-codegen