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