chartletv0.21.0chartlet.casoon.de

← All examples

Payments and what to know about them

Payments with three notes: one on the token vault, joined to it by a dotted line, one inside the card data zone at the head of its frame, and one without on for the whole diagram, in a band below it. Notes add no connection, so structure and main path stay the same; the description gives every note after the elements. With a phone variant. Illustrative values.

Payments and what to know about them

examples/payment-notes.json
{
  "schemaVersion": 1,
  "type": "architecture",
  "title": "Payments and what to know about them",
  "source": "Illustrative reference architecture",
  "width": 1000,
  "height": 1120,
  "architecture": {
    "boundaries": [
      {
        "id": "cloud",
        "label": "Cloud account"
      },
      {
        "id": "pci",
        "label": "Card data zone",
        "in": "cloud"
      }
    ],
    "components": [
      {
        "id": "shopper",
        "label": "Shopper",
        "kind": "person"
      },
      {
        "id": "checkout",
        "label": "Checkout",
        "kind": "frontend"
      },
      {
        "id": "gateway",
        "label": "API gateway",
        "in": "cloud"
      },
      {
        "id": "payments",
        "label": "Payment service",
        "in": "pci"
      },
      {
        "id": "vault",
        "label": "Token vault",
        "kind": "security",
        "in": "pci"
      },
      {
        "id": "ledger",
        "label": "Ledger",
        "kind": "database",
        "in": "cloud"
      },
      {
        "id": "provider",
        "label": "Card provider",
        "kind": "external"
      }
    ],
    "connections": [
      {
        "from": "shopper",
        "to": "checkout",
        "label": "pays"
      },
      {
        "from": "checkout",
        "to": "gateway",
        "technology": "HTTPS"
      },
      {
        "from": "gateway",
        "to": "payments",
        "label": "charge"
      },
      {
        "from": "payments",
        "to": "vault",
        "label": "tokenizes"
      },
      {
        "from": "payments",
        "to": "provider",
        "label": "authorizes",
        "technology": "HTTPS"
      },
      {
        "from": "payments",
        "to": "ledger",
        "label": "records",
        "technology": "SQL"
      }
    ],
    "mainPath": [
      "shopper",
      "checkout",
      "gateway",
      "payments",
      "provider"
    ],
    "orientation": "portrait",
    "notes": [
      {
        "on": "vault",
        "text": "Card numbers never leave the vault; everything else sees tokens."
      },
      {
        "on": "pci",
        "text": "Audited once a year; changes need a second reviewer."
      },
      {
        "text": "Figures and names are illustrative; the diagram shows the target state."
      }
    ]
  },
  "mobile": {
    "width": 440,
    "height": 1200
  }
}
Focus
Payments and what to know about them
Payments and what to know about themArchitecture diagram with 7 components and 6 connections in 2 boundaries. Cloud account: API gateway, Ledger, Card data zone. Card data zone (in Cloud account): Payment service, Token vault. Main path: Shopper → Checkout → API gateway → Payment service → Card provider. Most connected: Payment service (4 connections). Nothing leads into Shopper. Nothing leads out of Token vault, Ledger and Card provider. Bottleneck: API gateway; without it the diagram falls apart. Shopper (person): connects to Checkout (pays). Checkout (frontend): connects to API gateway (via HTTPS). API gateway (service): connects to Payment service (charge). Payment service (service): connects to Token vault (tokenizes), Card provider (authorizes, via HTTPS) and Ledger (records, via SQL). Token vault (security): no outgoing connection. Ledger (database): no outgoing connection. Card provider (external system): no outgoing connection. Note on Token vault: Card numbers never leave the vault; everything else sees tokens. Note on Card data zone: Audited once a year; changes need a second reviewer. Note: Figures and names are illustrative; the diagram shows the target state.Cloud accountCard data zoneShopper → Checkout: paysCheckout → API gateway: [HTTPS]API gateway → Payment service: chargePayment service → Token vault: tokenizesPayment service → Card provider: authorizes [HTTPS]Payment service → Ledger: records [SQL]pays[HTTPS]chargetokenizesauthorizes[HTTPS]records[SQL]ShopperShopperCheckoutCheckoutAPI gatewayAPI gatewayPayment servicePayment serviceToken vaultToken vaultLedgerLedgerCard providerCard providerCard numbers never leave the vault; everything else sees tokens.Card numbers never leavethe vault; everything elsesees tokens.Audited once a year; changes need a second reviewer.Audited once a year; changesneed a second reviewer.Figures and names are illustrative; the diagram shows the target state.Figures and names areillustrative; the diagramshows the target state.
Payments and what to know about themArchitecture diagram with 7 components and 6 connections in 2 boundaries. Cloud account: API gateway, Ledger, Card data zone. Card data zone (in Cloud account): Payment service, Token vault. Main path: Shopper → Checkout → API gateway → Payment service → Card provider. Most connected: Payment service (4 connections). Nothing leads into Shopper. Nothing leads out of Token vault, Ledger and Card provider. Bottleneck: API gateway; without it the diagram falls apart. Shopper (person): connects to Checkout (pays). Checkout (frontend): connects to API gateway (via HTTPS). API gateway (service): connects to Payment service (charge). Payment service (service): connects to Token vault (tokenizes), Card provider (authorizes, via HTTPS) and Ledger (records, via SQL). Token vault (security): no outgoing connection. Ledger (database): no outgoing connection. Card provider (external system): no outgoing connection. Note on Token vault: Card numbers never leave the vault; everything else sees tokens. Note on Card data zone: Audited once a year; changes need a second reviewer. Note: Figures and names are illustrative; the diagram shows the target state.Cloud accountCard data zoneShopper → Checkout: paysCheckout → API gateway: [HTTPS]API gateway → Payment service: chargePayment service → Token vault: tokenizesPayment service → Card provider: authorizes [HTTPS]Payment service → Ledger: records [SQL]pays[HTTPS]chargetokenizesauthorizes[HTTPS]records[SQL]ShopperShopperCheckoutCheckoutAPI gatewayAPI gatewayPayment servicePaymentserviceToken vaultToken vaultLedgerLedgerCard providerCard providerCard numbers never leave the vault; everything else sees tokens.Card numbersnever leave thevault;everything elsesees tokens.Audited once a year; changes need a second reviewer.Audited once ayear; changesneed a secondreviewer.Figures and names are illustrative; the diagram shows the target state.Figures andnames areillustrative; thediagram showsthe targetstate.

Source: Illustrative reference architecture

Show chart data
Data for Payments and what to know about them. Note on Card data zone: Audited once a year; changes need a second reviewer. Note: Figures and names are illustrative; the diagram shows the target state.
ComponentKindBoundaryConnects toNotes
ShopperpersonCheckout (pays)
CheckoutfrontendAPI gateway (via HTTPS)
API gatewayserviceCloud accountPayment service (charge)
Payment serviceserviceCloud account › Card data zoneToken vault (tokenizes), Card provider (authorizes, via HTTPS), Ledger (records, via SQL)
Token vaultsecurityCloud account › Card data zoneCard numbers never leave the vault; everything else sees tokens.
LedgerdatabaseCloud account
Card providerexternal system
  • Architecture diagram with notes
  • Write down what the boxes do not say