Unity WebGL

To make these instructions concrete, we have created a sample cross-app wallet called Rapidfire ID. To interact with it, you can find its SDK in the NPM package directory: @rapidfire/id.

You can check out the GitHub repository for Rapidfire Wallet to learn how to create your own wallet.

This guide will walk you through adding support for any cross-app wallet into a Unity app by integrating the Mobile Wallet Protocol.

When doing Build And Run from your Unity Build Settings with the target platform WebGL you will notice that no popups are allowed. This is due to the Cross-Origin-Opener-Policy header being set to same-origin-allow-popups by default. This is a security feature to prevent popups from different origins.

Setup#

Follow the setup guide.

Running instructions#

There are two main things to consider when running your Unity WebGL build with cross-app wallet support:

For any cross-app wallet to work, you need to host the build or run it locally with Cross-Origin-Opener-Policy set to same-origin-allow-popups.
Compression Format: Set to Disabled (Player Settings > Publishing Settings) for final builds.

Here's an example setup for testing your cross-app wallet locally using express server. Please note that in this example, the build output is in the build-output directory. Once your build is done, follow these steps:

1. Create a Project Folder and Setup Files#

Create a new folder for your server project and navigate to it:

mkdir unity-webgl-server
cd unity-webgl-server

Create a new subfolder called build-output where you'll place your Unity WebGL build files:

mkdir build-output

Copy all the files from your Unity WebGL build into the build-output folder. This should include files like:

index.html
.unityweb files
Other assets and build files

2. Initialize Your Node.js Project#

Initialize a new Node.js project and install Express:

npm init -y
npm install express

Create a new file called server.js in the root folder with the following content:

server.js

package.json

const express = require("express");
const path = require("path");
const app = express();
const port = 8000;
 
app.use((req, res, next) => {
  res.header(
    "Cross-Origin-Opener-Policy",
    "same-origin-allow-popups",
  );
  next();
});
 
app.use(express.static(path.join(__dirname, "build-output")));
app.listen(port, () =>
  console.log(`Server running on http://localhost:${port}`),
);

3. Run Your Local Server#

Start your Express server by running:

node server.js

You should see the message: Server running on http://localhost:8000

Open your browser and navigate to http://localhost:8000 to see your Unity WebGL build running with cross-app wallet support enabled.

Troubleshooting#

If you encounter any issues:

Make sure your build-output folder contains all the necessary Unity WebGL build files
Confirm that your server is properly setting the Cross-Origin-Opener-Policy header
Check browser console for any errors
Ensure your cross-app wallet is properly configured to work with the Mobile Wallet Protocol

Production Deployment#

For production deployments, you'll need to configure your web server to set the Cross-Origin-Opener-Policy: same-origin-allow-popups header. The implementation depends on your hosting provider.