u/arkanizer

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