[Instructions]:

In this Hackathon, it can learn about how to develop some popular web service with Web Monetization features and PHP binding.

What I built

Here are some stuffs I build for this dead simple web service:

Using Bootstrap to develop all required templates.
Using PHP 7.2+ version with Slim 4 Framework to build a web service.
Using the Twig view template to be back-end rendering exclusive contents.
Using PHP session to record current Web Monetization status event.
In development mode, using mkcert command to create self-signed certificate easily.
In development mode, using the stunnel command to create SSL tunnel and make local PHP web bulit-in server can be served on HTTPS. (It's important for Web Monetization because this only supports over HTTP.)
In production mode, using the certbot to create HTTPS easily.
Both development mode and production mode are on Ubuntu 18.04.

Submission Category:

Here are some categories included in this Hackathon:

Foundational Technology: using the PHP to be back-end binding.
Experiment stuffs: let all some stuffs and put them together to be a development environment.
Production stuffs: After completing this service in development environment, I also provide the deployment steps to publish in production mode.
Automatic Building Steps: I want to save my life, so I develop a simple Bash script to build my development environment easily.

Demo

Firstly, visiting the following website via web-monetization.peterli.website, and it will present following captured picture:

Second, the Home and Introduction don't have the web-monetized feature, they're the simple page.

Third, click the Blog link. By default, this page with web-monetized is disabled. And it will only look at the warning message about "This is the locked section one, You've to enable and pay with Web Monetization to unlock it :)!".

And the danger message says: "The Web Monetization has been disabled!".

To enable the web-monetized, we can just click the "Enable Web Monetization".

Once click this button, it will refresh this page and it will look at these exclusive contents:

If people thinks this is enough to do web monetization, they can click "Disable Web Monetization" button.

If people want to do web monetization for about whiles, they don't have to click disabled button.

They can enable web-monetization and leave this page directly.

The web service will use PHP session to remember this until the session has been expired.

If people want to know how much amounts are sent to this author, they can use the "Calculate Web Monetization" to present total amounts:

If people want to stop knowing the amount information, just click "Stop Calculating Web Monetization".

Then visiting the donation page:

It's alternative way to do donation.

Sometimes most of developers have the PayPal donation button or other payment donation buttons to let sponsor pay some dollars.

Every payment donation buttons need to have the minimum dollars to let sponsor pay. For example, 1, 5 or 10 USD dollars at least.

This is not very convenient for every sponsor and it's up to sponsor determine how much amounts paid for developer.

The donation page are developed for these sponsors.

If some sponsors want to pay small amounts to developers, it can just click "Enable Donation Page".

And this donation page will enable the web monetization page.

Once enabling web monetization page, it will start paying some amounts and present current amount they pay for this developer.

Once the sponsor thinks it's good enough to do this payment, they can click "Disable Donation Page" at any moments!

Finally, visiting History page. In this page, it can show how much amounts that this website owner has made.

I think amounts should be public and it can let every user and sponsor know the total amounts of this website.

Link to Code

All codes are located on web-monetization-demo. Feel free to fork and use them :).
It also provides a completed README for every back-end developers to develop a awesome web-based application services steps by steps.

How I built it

I think these exclusive contents should be hidden. And I use the Twig view to complete this issue.
To sync transaction history for every micro payment sent to Coil , I still use the AJAX to do POST method to store every amount detail.
To let developers decide to enable/disable web monetization, every page I develop has the enable and disable button.

Additional Resources/Info

Here are some useful references I look at:

Let's build a Web Service with Web Monetization X PHP Binding!