Inspiration
Choosing how to pay should be easier than remembering every card’s reward categories and conditions. We built Reward Harbor around one question: What if you could compare your card rewards at the moment you choose a payment method in PayPal?
Our goal was to bring that comparison into checkout while keeping the shopper in control.
What it does
Reward Harbor is a Chrome extension that compares estimated rewards for the funding cards visible in PayPal sandbox checkout. The advisor highlights a recommended card, shows its estimated reward value, and lets shoppers compare alternatives or inspect the official issuer source. Its floating window can be moved, resized, minimized, or closed so payment controls remain accessible. After the backend verifies payment completion, Reward Harbor records estimated savings relative to the initial funding choice. When the available evidence cannot support a calculation, it explains why instead of inventing an amount.
How we built it
We built the extension with JavaScript, HTML, CSS, and Chrome Manifest V3, supported by a Node.js backend.
- PayPal handles sandbox order creation and payment capture.
- Channel3 powers product discovery and merchant offers in Harbor Market, our supporting demo storefront.
- Elastic retrieves sourced issuer reward profiles, with a local snapshot as fallback.
- SQLite stores recommendation snapshots and estimated savings history.
- Render hosts the demo backend. The recommendation engine applies structured reward rules, including category rates, point valuations, and supported restrictions. The current prototype uses explicit demo card mappings and simulated purchase categories.
We created our demonstration with Remotion, ElevenLabs narration, and an animated Mermaid architecture walkthrough.
Challenges we faced
One challenge was preserving purchase context as checkout moved between the storefront, PayPal login, and a payment popup. We tied context to the exact order and added recovery paths when the original browser connection was unavailable. Another was distinguishing a recommendation from the shopper’s actual choice. Recommending a card does not prove that it funded the payment. We track the observed selection and keep uncertain results out of numeric savings totals. We also refined the advisor for small checkout windows: centered controls, matching scrollbars, edge resizing, fixed headers, and compact payment confirmations.
What we learned
We learned that a useful checkout recommendation needs more than a reward percentage. It needs the right purchase context, an applicable rule, an inspectable source, and a clear explanation of uncertainty. We also learned to separate three different things: estimated rewards, incremental estimated savings, and verified payment completion.
What’s next
Our next steps are to validate more PayPal checkout layouts, strengthen issuer-rule freshness and eligibility checks, and complete broader accessibility testing while keeping the experience focused on PayPal.
Built With
- channel3
- chrome
- css
- elasticsearch
- elevenlabs
- extensions
- html
- javascript
- node.js
- paypal
- playwright
- react
- remotion
- render
- sqlite
- typescript