Start typing to search...
Tutorials
Creating games on Koji
Adding in-app purchases
Search

Tutorial: Adding in-app purchases to Koji games

In this tutorial, you will add an In-Game Purchase feature to an existing game on Koji.

If you’re new to Koji, here are some tutorials that you might want to check out before continuing.

Objective

The starting point for this tutorial is the Tower Stack game, which was built on top of the p5.js game template.

Tower Stack is a hyper-casual game where the goal is to stack blocks as high as you can without missing any. Each new block swings from the top of the screen and tapping releases it. If you successfully land it on top of a previous block, you get a point. If you miss it, you lose a life.

In the original game, the game ends when the player runs out of lives. In this tutorial, you will add a feature that lets players buy more lives, if they choose to. The best part is that whoever remixes the game gets to choose how much the new lives will cost!

Here’s an example of the game that you will build in this tutorial. You can check out the finished game here.

Sections

game-iap-setting-up-koji-json.html

add the in-app purchase entitlement and define a price value that can be customized when someone remixes your game.

game-iap-payment-menu.html

create the Payment Menu UI component, which provides players the option to purchase more lives when they run out.

game-iap-start-purchase.html

use Koji.iap from the @withkoji/core package to handle the payment logic.

game-iap-updating-game.html

modify the game’s original behavior to reflect the new flow.

game-iap-remix.html

make the price of extra lives customizable for people who remix the game.

Getting help

If you have any questions or feedback about this tutorial, please reach out to @Marko(Svarog) and the Koji community on the Koji Discord server.