Skip to content

ts-defold/tsd-template-web-monetized

Repository files navigation

Web Monetization

Chat with us!

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.

Web Monetization for Defold

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.

Installation

  1. 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
  1. Initialize
cd my-web-monetized-game
npm install
  1. Generate
npm run build # Transpile the TypeScript files to lua
# or
npm run dev # Watch for changes and regenerate files on save
  1. Code
code .
  1. Open app/game.project in Defold
  • Start making games with TypesScript!

Project dependency

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.

Add payment pointer

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 HERE

Usage

When 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"
}

Awesome

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