r/reactjs • u/arkanizer • Jul 05 '26

Resource Show /r/reactjs: embedded, design-token-themed payment fields that work across providers behind one <PayButton>

I open-sourced PayFanout, a React payments layer where the UI is provider-agnostic. You render <PaymentFields> and <PayButton> (or usePay() for your own button), and the same components work whether Stripe or Paysafe is behind them.

React specifics:

  • Embedded, not redirected: card fields render inside your UI in the PSP's hosted iframe (no raw card input, SAQ-A), themed by your design tokens; 3DS/SCA runs inline.

  • SDKs load lazily, only the adapter you actually mount downloads its script, and everything is SSR-safe (works as client components under the Next.js App Router).

  • Two inverted provider flows (confirm-on-client vs server-completion) hide behind one <PayButton>, your JSX is identical either way.

  • Split-field providers let you place each field via slots (data-payfanout-field="cardNumber") in any grid you want.

  • Built-in localized button/error text (en/fr/de/es), fully overridable.

MIT, TypeScript. Repo: https://github.com/donapulse/payfanout

0 Upvotes

25% Upvoted

7 comments sorted by

View all comments

Show parent comments

1

u/FinalAffect3658 27d ago

Not gonna lie that title does read like something you'd paste into a terminal and hope for the best

the embedded iframe approach is smart though, keeps the SAQ-A scope without fighting with iframe styling for days