loading...

react-web-monetization-ui for the GftW Hackathon

ekafyi profile image Eka Updated on ・1 min read

Learning the Web Monetization API (3 Part Series)

1) Published my first React component library, react-web-monetization-ui! 2) react-web-monetization-ui for the GftW Hackathon 3) gatsby-theme-web-monetization for the GftW Hackathon

What I built

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.

Submission Category:

Foundational Technology

Demo

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.

Link to Code

GitHub logo ekafyi / react-web-monetization-ui

Handy UI components to use with the Web Monetization API in React

react-web-monetization-ui

NPM JavaScript Style Guide

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.

Install

# 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

Usage

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

How I built it

I described it in detail in yesterday’s post.

Additional Resources/Info

Learning the Web Monetization API (3 Part Series)

1) Published my first React component library, react-web-monetization-ui! 2) react-web-monetization-ui for the GftW Hackathon 3) gatsby-theme-web-monetization for the GftW Hackathon

Posted on by:

ekafyi profile

Eka

@ekafyi

Web developer, late bloomer. Can center an element with grace and style (pun intended). Mostly sensible (citation needed).

Discussion

markdown guide