flow-payments-demo

A Checkout.com Flow Web Component integration in strict TypeScript: an Express server creates a payment session, then a server-rendered page mounts the hosted payment widget.

hijal/flow-payments-demo@ b17502d ↗

Problem

Accept a hosted card / wallet payment through Checkout.com's Flow component, including the Account Funding Transaction fields some processing channels require.

Built with

TypeScript
Express
EJS
Tailwind CSS
Checkout.com Web Components

Architecture

Payment-session flow

Inferred

Browser Requests the payment page
Express server Creates a payment session
Checkout.com API Returns session data
Flow component Mounts the hosted UI

src/server/index.ts src/client/flow.ts

Server-rendered, no bundler

Inferred

Express 5 renders an EJS page that loads the Checkout Web Components CDN global; the client script is compiled with tsc and included via a plain <script> tag, with Tailwind run through its CLI.

src/server/index.ts src/client/flow.ts tsconfig.json

Account Funding Transaction target

Inferred

Type comments state that sender, recipient, and processing.aft must be sent together when the processing channel is configured for AFT, citing Visa decline code 43102. This indicates the demo is aimed at AFT payouts, not only standard card acceptance.

src/server/types.ts

Evidence

The server creates a payment session by POSTing to the Checkout.com payment-sessions endpoint with the secret key as a Bearer token, before the browser renders the Flow widget.

Verified

src/server/index.ts:37-92

The payment-session body includes an Account Funding Transaction shape: an individual sender, a recipient with account_number, and processing.aft set to true.

Verified

src/server/index.ts:40-75

src/server/types.ts models the full create-payment-sessions request as strict TypeScript types (payment methods, 3DS variants, sender/recipient variants, account holders, payment plans, locales), with only amount, currency, billing, success_url and failure_url marked required.

Verified

src/server/types.ts:1-384

Environment variables are validated at startup: requireEnv throws on a missing value and CKO_ENVIRONMENT is constrained to 'sandbox' or 'production'.

Verified

src/server/env.ts:1-25

Responses from the Checkout.com API are parsed defensively: parseJsonSafely returns a structured error object for empty or non-JSON bodies instead of throwing.

Verified

src/server/http.ts:1-13

Contribution

Sole developer

Owner-confirmed sole work

Owner-confirmed: sole, original work; no starter/template used. Checkout.com Flow Web Component integration in strict TypeScript. Server creates a payment session (POST /payment-sessions) including an Account Funding Transaction shape (sender, recipient, processing.aft). No secrets found; .env.example holds placeholder keys; the test card is a public Mastercard test PAN.