Before
Page Speed38/100
Bounce Rate82%
Conversions0.4%
After
Page Speed98/100
Bounce Rate24%
Conversions+340%
L
Logic Layer Solution
logiclayersolution.uk
before
after
We Build Digital Experiences
That Drive Growth.
150+
Projects
98%
Satisfied
8yr
Experience
All work
Fintech SaaS · 2025

Orion — embedded payments platform

Embedded payments platform helping SaaS founders add Stripe Connect, billing, and reconciliation with one component.

Client
Orion Pay
Industry
Fintech · B2B payments
Duration
20 weeks
Year
2025
Next.jsStripeWebhooks
app.orion.io / dashboard
Orion
Overview
Fleets
Alerts
Logs
Team
Settings
Fleet overview
Real-time · all regions
Live
P75 latency
340ms
−92%
Active fleets
1,284
+22%
Uptime
99.99%
Throughput · 24h
By region
Top events
event_1156
event_2290
event_3424
Fig. 01 — Production UI · 2025Orion Pay
Year
2025
Category
Fintech SaaS · 2025
Stack
Next.jsStripeWebhooks
Scope
  • Embed SDK rewrite
  • Webhook reliability layer (idempotency)
  • Reconciliation dashboard
  • Compliance design (PSD2, SCA)
  • Developer documentation
The challenge

What they needed to solve.

Customers were spending 6–8 weeks integrating Stripe Connect themselves and another 4 reconciling payouts. Orion's existing widget had a 31% drop-off during onboarding and didn't support EU 3DS flows reliably.

Our solution

How we approached it.

Re-engineered the embed as a Next.js-hosted React component that handles SCA, payouts, refunds, and ledger reconciliation. Drop-in <OrionCheckout/> for hosts; idempotent webhooks; reconciliation dashboard for finance teams.

Web design

Design decisions.

Palette
#0a0e1a
#10b981
#0ea5e9
#f59e0b
#f8fafc
Typography
  • AaInter — SDK UI
  • AaJetBrains Mono — API + ledger
  • AaSöhne Breit — docs hero
Layout system

Dual-surface system: embedded component (tight) and merchant dashboard (analytical). Every state has a corresponding webhook diagram.

Design highlights
  • Drop-in component with theming tokens
  • Documentation written as runnable Sandpack examples
  • Reconciliation viewer with diff highlighting
Before · After

What changed.

app.orion.io / dashboard
Orion
Overview
Fleets
Alerts
Logs
Team
Settings
Fleet overview
Real-time · all regions
Live
P75 latency
340ms
−92%
Active fleets
1,284
+22%
Uptime
99.99%
Throughput · 24h
By region
Top events
event_1156
event_2290
event_3424
After
app.orion.io / dashboard
Orion
Overview
Fleets
Alerts
Logs
Team
Settings
Dashboard
Last updated 04:12
Refresh
P75 latency
4.2s
Active fleets
412
Uptime
97.1%
Activity
By region
Top events
event_18
event_216
event_324
Before
Drag to compare ←→
Fig. 02 — Drag handle to reveal before / afterOrion Pay
app.orion.io / dashboard
Orion
Overview
Fleets
Alerts
Logs
Team
Settings
Dashboard
Last updated 04:12
Refresh
P75 latency
4.2s
Active fleets
412
Uptime
97.1%
Activity
By region
Top events
event_18
event_216
event_324
Before

Legacy iframe widget, brittle 3DS, manual reconciliation in spreadsheets, 6-8 week integration projects.

Integration time
6–8 wks
3DS success
78%
Onboarding drop
31%
Recon time / mo
9 hrs
app.orion.io / dashboard
Orion
Overview
Fleets
Alerts
Logs
Team
Settings
Fleet overview
Real-time · all regions
Live
P75 latency
340ms
−92%
Active fleets
1,284
+22%
Uptime
99.99%
Throughput · 24h
By region
Top events
event_1156
event_2290
event_3424
After

React component embed, hosted SCA flow, idempotent webhooks, automated reconciliation viewer.

Integration time
2–3 days
3DS success
96%
Onboarding drop
9%
Recon time / mo
30 min
Results

What we measured.

01Onboarding drop-off down from 31% to 9%
02EU 3DS conversion lifted to 96%
03Customer integration time cut to 2–3 days
04$640M processed in first 8 months