Cross-domain components with React+XComponents at PayPal — Daniel Brain

on YouTube ↗15m

" summary

PayPal uses Node, React and an open‑source XComponent library to expose UI as true cross‑domain components: a single iframe-hosted SVG PayPal button plus a checkout iframe rendered as a popup. Props and callbacks pass natively across frames via React bindings, and perceived load time drops by using pre-rendering (draw initial button UI into the iframe before the real app loads). A/B tests show conversion improvements, and render-to-parent orchestration lets the iframe draw outside its bounds for native-feeling interactions.

AI-written summary · about

" chapters (4)

1. 0:00Introduction
2. 0:40Components
3. 4:54XComponents
4. 10:00IFrame

" related talks

• 06mLightning Talk: Payment Request API in a React Higher-Order ComponentMarco Lanaro · Nordic.js 2017
• 27mMigrating Safely to ReactJamis Charles · React Amsterdam 2016
• 44mThird-Party Banking Lib: Web Components, ReactHerman Smoliar · React+TS fwdays'23
• 21mMigrating critical apps to ReactJamis Charles · React Rally 2015
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 26mFrontend At Scale - Experiences Using React In A Large OrganizationErik Wendel · ReactJS Day 2016
• 23mBest Practices for reusable UI componentsMars Jullian · Nordic.js 2017
• 45mReact Web Components How It Is and How It Could BeDwane Hemmings · Connect.Tech 2022