class: center, middle, cover # .big[Introducing the new React.js Checkout .red[~~for~~] .green[*by*] Hyvä] ##**.integergreen[@integer_net]** ### Reacticon v4 2021-10-14 --- layout: true .footer[.left[Fabian Schmengler & Rajeev K Tomy /> **Introducing the new React.js Checkout for Hyvä**] .right[@fschmengler @rajKtomy]] --- # This is Luma .center.width50[] --- # This is Luma Checkout .width100[] - Hyvä theme comes without own checkout - *Main options for Hyvä so far:* 1. Default Luma checkout via theme fallback module 2. 3rd party Magento checkout via theme fallback module 3. Custom headless checkout --- # What if...? .width100[] .center[⏬] .width100[] --- .aside-l.width100[] # Hyvä Checkout .new[NEW] ## React Checkout for Magento - Open Source - Independent of theme - Highly customizable - Fun to develop - Faster than Luma checkout --- # A bit of history ## 2019 - Our first React checkout integrated in non-headless Magento frontend 🔗 -- ## 2020 - Willem creates React checkout for the **Hyvä pilot project** 🧑🏻‍💻 -- - Published as Hyvä Checkout at **Reacticon v3** together with Hyvä 🧪 - experimental, not bundled, only virtual products - used as base for some custom checkouts with Hyvä --- # A bit of history ## 2020 - no focus on Hyvä Checkout until Rajeev's christmas holidays 🎅🏾🎄 - started major rewrite on `develop` branch 🧑🏾‍💻 ## 2021 - integer_net hires Rajeev to work full time on Hyvä Checkout 💪🏾 - first client project with the new checkout launched last month 🚀 - **1.0 release candidate** 🥳 https://hyva-demo.elgentos.io/ --- # Now, what is it? ## .red[NOT:] - Your typical checkout extension - Configurable via admin panel - A drop-in replacement for Luma Checkout --- # Now, what is it? ## .green[BUT:] - Working baseline - Easily customized by React JavaScript developer - Extensible with payment provider plugins --- <video preload="auto" controls="true" width="100%" name="Guest Checkout Demo"> <source src="images/Reacticon-V4-Guest-Checkout.mov"> </video> --- <video preload="auto" controls="true" width="100%" name="Guest Checkout Demo"> <source src="images/Reacticon-V4-LoggedIn-Checkout.mov"> </video> --- # Technology .aside.width100[] ## Magento module - needed API additions - integration of React app in Magento template ## React app - standalone app for development, connecting to any Magento instance - built into Magento module for production --- # Technology .icon[] **React.js** with minimal dependencies - in the spirit of Hyvä .icon[] for form handling .icon[] like Hyvä Theme - bundled size < 90KB - Mostly headless --- # But how to customize? .aside[] - We expected it to be used for highly customized checkout - Architecture should still remain simple - So until now we recommended: **Fork and adjust** --- # But how to customize? .aside.width100[] - ~~Fork and adjust~~ **Local overrides!** - Jisse's proof of concept: Yireo_ExampleHyvaCheckout - Made official with Hyvä Checkout 1.0 - Still .red[experimental] - Uses webpack plugin to resolve paths - Only copy what needs to be changed .clear[ https://github.com/hyva-themes/magento2-checkout-example ] --- # Start developing! - in `reactapp` directory: ``` npm install ``` - adjust `.env`, specify Magento URL, store codes etc. - start as standalone app, connected to any Magento instance as backend: ``` npm run start ``` - runs at http://localhost:3000 - change files and see results (hot module replacement) **Documentation:** https://hyva-themes.github.io/magento2-hyva-checkout/ --- # Start developing! One more step: Enter valid **Cart ID** from Magento: .width66[] --- # Payment methods - Payment extensions installable via `package.json` - [PayOne](https://github.com/hyva-themes/magento2-hyva-checkout-payone) *(by webvisum & integer_net)* - [MultiSafepay](https://github.com/MultiSafepay/magento2-hyva-checkout-multisafepay/) *(by MultiSafepay)* - Coming soon: PayPal Express, Amazon Pay *(by webvisum)* - Complements the respective Magento extension ```json { "config": { "paymentMethodsRepo": { "payone": "git@github.com:hyva-themes/magento2-hyva-checkout-payone.git" } } ``` --- # Payment method implementation `renderers.js`: map payment method code to react component ``` import EPS from './src/components/eps'; import Ideal from './src/components/iDEAL'; import Debit from './src/components/debit'; import Sofort from './src/components/sofort'; import PayPal from './src/components/paypal'; import GiroPay from './src/components/giropay'; import Invoice from './src/components/safeInvoice'; import PayDirekt from './src/components/paydirekt'; import CreditCard from './src/components/creditCard'; export default { payone_obt_eps: EPS, payone_debit: Debit, payone_paypal: PayPal, payone_obt_ideal: Ideal, payone_obt_giropay: GiroPay, payone_paydirekt: PayDirekt, payone_safe_invoice: Invoice, payone_creditcard: CreditCard, payone_obt_sofortueberweisung: Sofort, }; ``` --- # Translations - Using Magento translations - Selected via layout XML - Initialized via script in phtml template - for standalone app emulate via `window.CHECKOUT_TRANSLATIONS` if needed --- # Build and test - in `reactapp` directory: ``` NODE_ENV=production npm run build ``` - Compiles and integrates app into the Magento module - Using real store configuration and translations - No npm needed to run --- # Next steps ### Most requested features ❗📝 - Registering customers during checkout - Enter coupon code on checkout page - Easier theming options --- # Next steps ### Contributions and discussions welcome 👤💬👥 - `#hyva-react-checkout` channel in Magento Community Engineering Slack - https://magentocommeng.slack.com/ - Github *discussions* - https://github.com/hyva-themes/magento2-hyva-checkout/discussions - **Bring it on:** Ideas, feature requests, test coverage, ... ### CHECK IT OUT! ➡️ https://github.com/hyva-themes/magento2-hyva-checkout ⬅️ --- .grid2[ .col1.width100[ .quoted[Fabian Schmengler, integer_net]] .col2.width100[ .quoted[Rajeev K Tomy, integer_net]] ] .gifcaption[Questions?]