React library that provides quick, customizable UI components for common Web Monetization use cases, such as displaying monetization status and displaying a paywall with a description and a call-to-action.
This CodeSandbox shows examples of components without custom styling and props, with common styling methods (CSS modules, Styled Components, Theme UI), and with customized content through props.
Handy UI components to use with the Web Monetization API in React
This package provides quick customizable UI components for implementing the Web Monetization API on your React web app/site.
This package uses functionalities from the react-web-monetization package, which you also need to install as a peer dependency. If you have created your UI components using the react-web-monetization hook or need specific functionalities (for example passing further props with the monetization state as boolean value), this package may not be of use to you.
# with npm npm install --save react-web-monetization-ui react-web-monetization # ...or with yarn yarn add react-web-monetization-ui react-web-monetization
Run example with create-react-app:
git clone https://github.com/ekafyi/react-web-monetization-ui cd react-web-monetization-ui/example npm install # or yarn npm start # or yarn start # The web app will run at http://localhost:3000
To enable Web Monetization, you have to add meta tag containing your payment pointer to the HTML
head of your app template. Example from Web…
I described it in detail in yesterday’s post.
- Gatsby demo site using Gatsby's official blog theme starter: https://github.com/ekafyi/gatsby-blog-react-web-monetization-ui