Web Monetization is a JavaScript browser API which allows the creation of a payment stream from the user agent to the website. Web Monetization is being proposed as a W3C standard at the Web Platform Incubator Community Group.
This repository contains a native extension which integrates the Web Monetization JavaScript API with the Defold game engine. This allows game developers to detect if a player has an active payment stream or not and offer additional content or perks to paying players.
- Fork this template or use degit to download the template locally
npx degit ts-defold/tsd-template-web-monetized my-web-monetized-game # or git clone https://github.com/ts-defold/tsd-template-web-monetized.git my-web-monetized-game- Initialize
cd my-web-monetized-game npm install- Generate
npm run build # Transpile the TypeScript files to lua # or npm run dev # Watch for changes and regenerate files on save- Code
code . - Open
app/game.projectin Defold
- Start making games with TypesScript!
To use Web Monetization in a Defold project this project has to be added as a Defold library dependency. Open the game.project file and in the Dependencies field in the Project section add:
https://github.com/defold/extension-webmonetization/archive/master.zip
Or point to the ZIP file of a specific release.
The Web Monetization JavaScript API also requires a payment pointer to create a payment stream. The payment pointer must be added as a <meta> tag in the <head> section of the website. The extension will automatically add the <meta> tag when building or bundling a project but the payment pointer must be added to the game.project file. Payment pointers are provided by a number of different companies offering digital wallets (Web Monetization Wallets). Open the game.project file using a text editor and add a new section with the payment pointer:
[webmonetization] payment_pointer = ADD PAYMENT POINTER HEREWhen the extension and a payment pointer has been added to the game.project file it is possible to interact with the Web Monetization API from Defold:
if (webmonetization !== undefined) { const monetized = webmonetization.is_monetized(); if (monetized) { print('The user has an active payment stream'); } webmonetization.set_listener(function ( this: unknown, event: webmonetization.Event, details?: webmonetization.EventDetails, ) { if (event == webmonetization.EVENT_PENDING) { print('The user is trying to make a first payment'); } else if (event == webmonetization.EVENT_START) { print('The user has started paying'); } else if (event == webmonetization.EVENT_PROGRESS) { print('The user is still paying'); } else if (event == webmonetization.EVENT_STOP) { print('The user has stopped paying'); } print(details?.requestId); }); }The details table contains additional information about the event. Example:
{ paymentPointer: "$ilp.uphold.com/QkG86UgXzKq8", assetScale: 9, amount: "26009", requestId: "a1f728aa-21e0-4376-ae99-0ccb22642956", assetCode: "XRP" }Checkout Awesome Web Monetization for more tools, packages, tutorials, etc.
Install Akita to explore how Web Monetization works.
Sign-up for Coil to start sending micro-payments now!
TypeScript ❤️ Defold