# bancard/bancard-checkout-js architecture

> Architecture diagram of the GitHub repository bancard/bancard-checkout-js, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bancard/bancard-checkout-js
- Repository: https://github.com/bancard/bancard-checkout-js

## Overview

This is a browser-side Bancard vPOS checkout library: a merchant obtains a process ID or alias token from vPOS, then mounts the corresponding embedded payment, card-registration, preauthorization, or PIN-confirmation UI. The README documents these entry points and configurable styles, but no source excerpts are available; the listed build files are generated artifacts, so implementation paths and unverified internal calls are omitted.

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["Merchant integration"]
  node_checkout_api["Checkout.createForm"]
  node_cards_api["Cards.createForm"]
  node_preauth_api["Preauthorization.createForm"]
  node_confirmation_api["Confirmation.loadPinPad"]
  node_styles["Style options"]
end

subgraph group_forms["Embedded forms"]
  node_payment_form["Payment form"]
  node_card_form["Card registration form"]
  node_preauth_form["Preauthorization form"]
  node_pin_pad["PIN pad"]
end

subgraph group_lifecycle["Payment lifecycle"]
  node_process_id["Process ID"]
  node_alias_token["Alias token"]
end

node_merchant(("Merchant site"))
node_vpos["Bancard vPOS API"]

node_merchant -->|"requests process ID"| node_vpos
node_vpos -->|"returns process ID"| node_merchant
node_merchant -->|"supplies"| node_process_id
node_merchant -->|"invokes"| node_checkout_api
node_checkout_api -->|"mounts"| node_payment_form
node_merchant -->|"invokes"| node_cards_api
node_cards_api -->|"mounts"| node_card_form
node_merchant -->|"invokes"| node_preauth_api
node_preauth_api -->|"mounts"| node_preauth_form
node_merchant -->|"requests card operation"| node_vpos
node_vpos -->|"returns alias token"| node_merchant
node_merchant -->|"supplies"| node_alias_token
node_merchant -->|"invokes"| node_confirmation_api
node_confirmation_api -->|"mounts"| node_pin_pad
node_merchant -->|"configures"| node_styles
node_styles -->|"styles"| node_payment_form
node_styles -->|"styles"| node_card_form
node_styles -->|"styles"| node_preauth_form
node_styles -->|"configures"| node_pin_pad

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_checkout_api,node_cards_api,node_preauth_api,node_confirmation_api,node_styles toneBlue
class node_payment_form,node_card_form,node_preauth_form,node_pin_pad toneAmber
class node_process_id,node_alias_token,node_vpos toneMint
class node_merchant toneIndigo
```

## Components

### Merchant integration

- **Checkout.createForm**
- **Cards.createForm**
- **Preauthorization.createForm**
- **Confirmation.loadPinPad**
- **Style options**

### Embedded forms

- **Payment form**
- **Card registration form**
- **Preauthorization form**
- **PIN pad**

### Payment lifecycle

- **Process ID**
- **Alias token**

### Other components

- **Merchant site**
- **Bancard vPOS API**

## Connections

- Merchant site → Bancard vPOS API: requests process ID (evidence: `README.md`)
- Bancard vPOS API → Merchant site: returns process ID (evidence: `README.md`)
- Merchant site → Process ID: supplies (evidence: `README.md`)
- Merchant site → Checkout.createForm: invokes (evidence: `README.md`)
- Checkout.createForm → Payment form: mounts (evidence: `README.md`)
- Merchant site → Cards.createForm: invokes (evidence: `README.md`)
- Cards.createForm → Card registration form: mounts (evidence: `README.md`)
- Merchant site → Preauthorization.createForm: invokes (evidence: `README.md`)
- Preauthorization.createForm → Preauthorization form: mounts (evidence: `README.md`)
- Merchant site → Bancard vPOS API: requests card operation (evidence: `README.md`)
- Bancard vPOS API → Merchant site: returns alias token (evidence: `README.md`)
- Merchant site → Alias token: supplies (evidence: `README.md`)
- Merchant site → Confirmation.loadPinPad: invokes (evidence: `README.md`)
- Confirmation.loadPinPad → PIN pad: mounts (evidence: `README.md`)
- Merchant site → Style options: configures (evidence: `README.md`)
- Style options → Payment form: styles (evidence: `README.md`)
- Style options → Card registration form: styles (evidence: `README.md`)
- Style options → Preauthorization form: styles (evidence: `README.md`)
- Style options → PIN pad: configures (evidence: `README.md`)