Inspiration
Making a payment should feel clear and predictable. A customer should be able to identify the merchant, understand every fee, review the total, and know whether the payment actually completed.
For people who use screen readers, keyboards, or braille input, changing layouts and unclear status messages can make that confidence harder to achieve. Voice alone does not solve the problem: some people cannot speak, cannot hear, or simply prefer text.
AccessPay grew from a simple idea: make accessible checkout a reusable merchant capability, while giving customers control over how they interact.
What it does
AccessPay provides a consistent, text-first payment review across participating merchants.
Customers can:
- Review the merchant, items, quantities, shipping, tax, and exact total.
- Change quantities and confirm the updated order before payment.
- Ask typed questions about fees, delivery, and returns.
- Move an unpaid draft to another signed-in device using a short-lived, one-time code.
- Return to saved checkouts and view persistent payment status and verified receipts.
Our two demo stores, Northstar Goods and Fieldwork Supply, use the same React checkout SDK. They demonstrate integration reuse with one sandbox seller.
The payment integration keeps buyer approval with PayPal. AccessPay’s server checks the provider’s result before displaying completion. An uncertain outcome stays explicitly pending.
How we built it
We built a TypeScript monorepo with Next.js 16 and React 19, separating the checkout SDK, shared financial logic, merchant adapter, PayPal integration, explanation service, and accessibility helpers.
The backend calculates prices from its own catalog using integer minor units. Every review is tied to a checkout version; changing the cart invalidates the previous confirmation.
Payment safeguards include persisted request identifiers, database transactions, uniqueness constraints, and recorded payment intents before provider requests. These help the application recover from retries and uncertain network responses.
We use Drizzle ORM, with managed PostgreSQL as the hosted database target and durable PGlite for local development. The PayPal integration uses the official React SDK v6 and server SDK.
The explanation layer supports Claude-based question routing into an allowlist of merchant facts. Financial answers come from deterministic templates. Common questions also work without an AI connection.
The interface uses semantic HTML, native forms, visible focus indicators, structured summaries, persistent statuses, and reading preferences. Review, typed help, and handoff also work without JavaScript; PayPal’s official payment button requires it.
Challenges we faced
One major challenge was handling uncertainty around payments. A closed window or network timeout does not establish whether money moved. We designed recovery around checking the existing order and preserving its identity.
Cross-device handoff introduced another challenge: transferring a draft safely while preventing competing actions. Redemption changes device ownership, invalidates the previous review, and makes the original device view-only.
Accessibility required attention to the complete interaction. We corrected focus behavior, aligned mobile visual order with document order, and fixed a security-header interaction that initially blocked native form submissions without JavaScript.
What we learned
Accessibility and payment correctness reinforce each other. Clear review steps, predictable controls, and persistent outcomes help customers understand consequential actions.
We also learned to keep AI’s role narrow. It can help customers find and understand information, while deterministic code and PayPal enforce financial decisions.
Progress and next steps
The local application passes 34 unit/integration tests and 22 browser tests across Chromium and iPhone-sized WebKit. The tested accessibility scans reported no axe violations; these results do not establish WCAG conformance.
Our remaining validation includes actual PayPal sandbox transactions and webhooks, live AI calls, hosted deployment, and testing with real screen-reader users and physical devices. Braille hardware compatibility remains unverified.
AccessPay: Every payment. Every ability. Every device.
Built With
- axe-core
- claude
- css3
- drizzle-orm
- github
- html5
- next.js
- node.js
- paypal
- pglite
- playwright
- pnpm
- postgresql
- pwa
- react
- typescript
- vitest
- zod
