Donation checkout, server-side payment finalization, recovery infrastructure, and embedded experiences.
My role
Senior Software Engineer
Scope
Frontend, backend & delivery
Status
Ongoing professional work
React
Next.js
TypeScript
Redux Toolkit
Emotion
Overview
Since contributing to the embedded giving launch in 2024, I’ve worked across donation checkout and the systems behind it. My work includes payment finalization, abandoned-donation recovery, and checkout experiments designed to help nonprofits turn donor intent into completed donations.
My part in the work
I built the server-side finalization layer and expanded it across payment methods. For recovery, I worked from backend data models through donor-facing UI and email. I coordinate implementation, validation, and rollout with Product, Design, QA, Data, Commerce, and Messaging.
Technology stack
The tools behind the work, and where I used them.
Interface & state
React
Next.js
TypeScript
Redux Toolkit
Emotion
Donation steps, checkout state and styled components across embedded product experiences.
Embedded integration
TypeScript
Browser postMessage API
Webpack
A browser SDK and typed communication between the host website, donation grid and checkout.
Backend & recovery
Node.js
NestJS
MySQL
TypeORM
Server-side finalization, recovery data models, token handling, and reminder events.
Instrumentation & diagnostics
mParticle
Coralogix
Optimizely
Terraform
Track donation and digital-wallet events, forward host-page activity when analytics is ready, and add context to checkout logs.
Validation & tooling
Jest
React Testing Library
Playwright
Regression tests for checkout data and browser tests for the grid-to-checkout messaging flow.
Selected contributions
Instrumentation improvements
Problem
A donation journey spans the host website, embedded checkout and digital wallets. Events need consistent meaning, and activity can arrive before analytics is ready.
My contribution
I implemented event buffering, wallet tracking, and experiment instrumentation, and built Coralogix rollout dashboards. I also implemented payment-at-end and donor-covered-fee experiments across checkout paths.
Decision
Separate donor actions from technical loading, preserve events until analytics is ready, and compare new checkout behavior with the existing flow.
Value delivered
Teams can compare checkout variants and investigate payment outcomes by flow and method, using instrumentation and dashboards built alongside the product changes.
TypeScript
mParticle
Coralogix
Optimizely
Terraform
Finalize Order
Problem
Checkout coordinated multiple payment and donor-data operations in the browser. Moving that work server-side needed to preserve behavior across payment methods and existing donation options.
My contribution
I built the backend-for-frontend and expanded it across cards, bank payments, PayPal, digital wallets, and donor-advised funds, including consent, fees, dedications, and data parity.
Decision
Introduce the new path incrementally by payment method, with feature flags, regression tests, and rollout monitoring. Preserve valid donor answers, including false and zero.
Value delivered
The integrated server-side layer centralizes finalization across payment methods, with checks against legacy behavior and production visibility to support the migration.
Next.js
Node.js
TypeScript
Redux Toolkit
Abandoned cart recovery
Problem
Recovering an unfinished donation needs more than a reminder: donor opt-in, recoverable checkout state, secure access, and coordination between checkout and messaging.
My contribution
I designed and built recovery data models, token handling, reminder events, donor emails, and opt-in UI, working with Commerce and Messaging across service boundaries.
Decision
Keep recovery consent explicit, enforce token eligibility and expiry, and exclude payment information from recovered checkout state.
Value delivered
The integrated components provide the foundation for donors to resume unfinished donations, connecting recovery state, scheduled reminders, and the checkout experience.
React
TypeScript
NestJS
MySQL
TypeORM
Inline donation grid
In progress
Problem
A new inline donation grid must open the existing checkout with the chosen amount and frequency, across separate browser frames.
My contribution
I implemented the grid-side messaging protocol, including sender and payload validation, and browser tests that verify donation selections reach the embedding integration.
Decision
Keep checkout state in checkout, exclude donor personal data from messages, and reject invalid or incompatible messages at the boundary.
Value delivered
The integrated flow carries grid selections into the existing checkout without moving order state into the SDK. The complete grid experience is still in progress.
Next.js
TypeScript
Browser postMessage API
Engineering decisions
Preserve behavior while changing internals
I used parity checks and regression tests to protect donor answers and fund selections while the checkout integration changed.
Make boundaries explicit
For the grid integration, I kept message validation explicit and checkout state with its existing owner, limiting what crosses the browser boundary.
Make release preparation reusable
I built AI-assisted tooling that gathers changes across repositories and prepares release summaries and checklists for human review.
Outcome
My work connects checkout features with payment orchestration, recovery infrastructure, and the tools to validate and monitor delivery. These contributions are integrated into their codebases; the complete inline grid remains in progress.
Let’s compare notes.
Have a related challenge or a question about the work?