payment-components
StencilJS web-component library (v2) providing TC's embeddable payment UI — card, Apple Pay, alternative and telephony payment methods across retail, myTC, portal and payment-link wrappers — talking to the payment router API and PSP provider components.
Health score
0 to 100 across seven weighted factors; nothing is hidden. Green is 75 and above, amber 50 to 74, red below 50. How scoring works.
Facts
| Languages | typescript |
| Frameworks | Stencil 4, Tailwind CSS, Jest/Puppeteer |
| Runtimes | nodejs |
| Tests / CI | good / CI in place |
| Last commit | 2026-07-09 |
| Owner | Owner unknown (mapping to be curated) |
| Domain | Payments and finance (system generated; curate in repo-owners.json to override) |
| Product area | Shared platform |
| Hosted | AWS Deployed to AWS
|
| Releases | 0 release pipeline(s): |
| Integration | rest, jwt |
| Source | Open in Azure DevOps |
Dependencies in context
Entanglement
loose No binding mechanisms apply: this system needs no untangling work.
Depends on / used by
Migration playbooks
Generated from this repo's assessment data: what is feasible, what blocks it, and the steps in order. Ratings: green means actionable now, amber means sequence other work first, red means blocked, grey means not applicable.
ZDD adoption
Not applicableNot a deployed service (libraries, database definitions, desktop apps) or a retirement candidate not worth the investment. Ships as a package; ZDD applies to the services that consume it.
SQL Server exit
Not applicableNo SQL Server dependency is recorded for this repo. Nothing to migrate.
Containerisation
Not applicableLibraries ship as packages, not as running services. There is nothing to containerise.
Recommended actions
No specific actions for this repo. It either needs only normal maintenance, or its work is covered by an estate-level action. See the full programme.
Assessment notes
payment-components
Purpose
The current (v2) generation of TC's shared payment web components: a set of standards-based custom elements (built with Stencil) that host payment flows inside retail, myTC/portal and payment-link experiences via retail-payment-wrapper, portal-payment-wrapper and payment-link-wrapper. It renders payment-method pickers, card forms, Apple Pay, alternative payment methods and telephony payments, driving sessions through the TC payments router API and per-PSP provider components (BR-DGE/Comcarde including a PCI Pal iframe, Cybersource microform, Stripe payment links, and a dummy provider for testing).
Tech stack
TypeScript on Stencil 4 (compiled web components with lazy loading), Tailwind CSS with PurgeCSS/cssnano, node-polyglot for en/nl localisation, jwt-decode for parsing Cybersource capture contexts, ESLint/Prettier, and Stencil's Jest + Puppeteer test runner. A Backstage catalog-info.yaml records ownership (finance-team, payments system, consumes tc.payments.router.api).
Deployment
No classic release pipelines (release_count 0); traced via build->yaml-deploy, build pipeline payment-components. build.yml uses the shared InternalOSS/azure-pipelines-templates ci.yml (UIBuild pool, Node 20.x, aws configuration) with custom backup/restore steps around tests, then publishes the built assets to the tc-payments-ui-artifacts S3 bucket behind a cloudfront_spa distribution, Terraform in the aws-payments-tc-apps repo (useTFVarsDeployment: true, functional area payments). Consumers (e.g. payments-portal) load the components at runtime from per-environment payments.travelcounsellors.io URLs.
Dependencies
Internal: the TC payments router REST API (tc-payment-router) for sessions, payment methods, tokens and channel client keys, and the dummy instruments API (paymentprovider-dummy) used by the dummy provider. Runtime script-loading of external PSP SDKs: Comcarde/BR-DGE hosted fields, 3-D Secure, Apple Pay and post-response-action scripts; Cybersource microform SDK (URL taken from the decoded capture-context JWT); Stripe for payment-link payments; PCI Pal via an iframe for telephony payments.
Data stores
None — stateless UI components; session state lives in the payment router.
Integration points
Outbound REST to the payments router and dummy-instruments APIs (AWS-hosted, environment-resolved base URLs); JWT decoding for Cybersource capture contexts; browser-side integration with PSP JavaScript SDKs and wallets.
Code health
Good: ~74 spec/e2e test files colocated with components, per-component generated readmes, lint/format tooling, and active development (last commit 2026-07-09). The top-level README is still largely the Stencil component-starter boilerplate with a few TC-specific styling notes appended.
Modernisation risks
Low — a current, actively developed Stencil 4 codebase on a modern AWS static-hosting pipeline. Watchpoints: it is the single shared payment UI for multiple channels so breaking changes have wide blast radius; heavy reliance on runtime-loaded third-party PSP scripts (Comcarde, Cybersource, Stripe, PCI Pal) means external SDK changes can break payments outside TC's release cycle; and the v1 library (payment-components-v1) still exists in parallel for older consumers.
Data store follow-up (2026-07-28)
Follow-up scan of project files, configuration and the central Terraform repos confirmed the empty data_stores list is correct. Component package repo; no data store packages or configuration found.