API for Playable Browser Version

Before you start reading into the API documentation, I would like to briefly explain, why your game needs a playable browser version, even if it is an AAA title or hypercasual game. The answer is Marketing! Instant experience is already popular on Google Play and many messengers, and is the reason why browser games still retain popularity. While mobile games with their low size builds can make a full browser version for their apps, PC and Console games can successfully develop playable browser demo-versions, to attract potential customers. Screenshots and videos will not have as big impact on decision nowadays as playable demo could. This might be a single playable level, or even an entire game.

Besides that, you can and should use our authorization and payment API, to detect internal user id and save his progress and to sell your content from inside your browser version. As you can see in the iframe above, you can sell in-app currency, access to full content, extra levels, or even physical items, it depends on your creativity and goals.

Integrity guideline

First of all, we would like to keep Play Best Games clean and beautiful and retain similar user experience across all the apps. This means your playable version:

• Should NOT have 3rd party website attributes, e.g. header/footer/login or payment system.
• Should NOT have any ads, concentrate on promoting your own content.
• Should correctly authorize logged in users, while still remain playable for guests as well.
• Should be hosted on your own domain with a unique path containing PBG build.
• Should only use our payment solution.
• Should be adaptive to PBG container sizes.

Authorization process

Authorization is done purely on client-side. We are using javascript to communicate between iframe and parent. Your app should send a postmessage to parent, and expect a repsonse with a “message” event listener. If a user is not logged-in, this function will open a login window.

//javascript
//request current user id from play-best-games.com website:

function requestUser() {
	parent.postMessage(
	{
		method: 'request_user_id',
	},
	document.referrer);	
};

//javascript
//listen for incoming messages and the callback function to receive user ID or other data


if (window.addEventListener) {
	window.addEventListener("message", yourCallback);
} else {
	window.attachEvent("onmessage", yourCallback);
};


//filter incoming messages by sources, and make sure to validate that event.origin belongs to play-best-games.com.


function yourCallback(event) {
	var m = event.data;	
	if(event.origin == getHostName(document.referrer)) {

           if( m.hasOwnProperty('user')) 
           console.log(m.user);

	}
}


//helper function to extract domain name with scheme from current document.referrer url.


function getHostName(url) {
    var match = url.match(/http(s|):\/\/[a-z0-9.\-]+/i);
    if (match != null) {
	m = match[0];
    return m;
    }
    else {
        return null;
    }
}

After you receive the user id, code your own solution to load user progress from your database or save the user profile id to your base, if it is not there yet.
If user wasn’t logged in, authorization screen will popup and a page will be reloaded upon login or authorization.

Payment Processing

Payment processing involves both server-side and client-side code. Again you start with a postmessage to parent, parent page will open a new iframe with a payment page and pass the data you sent to it. End user, will see his balance, the item he is purchasing and options to buy additional currency if he needs it to complete purchase.

//  javascript
//  similar to requesting user ID, to process a purchase send a postMessage with amount and title 
//
//  arguments
//  (int) amount
//  (string) title


function startPayment() {
	parent.postMessage(
	{
                method: 'process_purchase',
		amount: 100,
		title: 'My In-App Purchase',
	},
	document.referrer);
}

We will send a POST request to your callback url, which you set up on game page, if you respond with a code 200, user’s currency will be transfered to game authors account. Besides, you should validate our POST request by calculating sha1 hash from a string explained below, here is how:

//php
//add a secret word to your user profile and use it to validate our POST request on your server.


$secret = 'XXXXXXXXXX';

//Build a string which will contain userid, game, title, amount and secret separated by & and calculate sha1 hash of that string.

$validity  = strip_tags($request['userid']);
$validity .= '&'.strip_tags($request['game']);
$validity .= '&'.strip_tags($request['title']);
$validity .= '&'.strip_tags($request['amount']);
$validity .= '&'.$secret;
$shalocal = sha1($validity);

//if your calculated string is equal to sha from request - the request is valid, add purchased item to user account.

if ($shalocal === $request['sha']) {
//your code
} else {
//your code
};

If a purchase button is clicked, there are few scenarios:

• User gets error if he doesn’t have enough currency to complete purchase
• User gets error if the payment page was called not from the game page on this site.
• User gets error if your server response code is not 200, balance not affected.
• User gets a success message if your response code is 200, currency transferred, purchased item should be added.

Container Details

There are few notes, that you should consider before creating a playable browser version about the container.

• If your frame link ends with an .swf, embed will be created instead of iframe.
• If exists – Iframe/Embed replaces screenshots container.
• The above only happens on desktop, mobile users will still see video and screenshots always.
• Iframe/Embed maximum dimensions might be 1600×740 px, minimum dimensions might be 1024×530 px.
• Iframe/Embed will have fixed 530px height at screens with up to 1649px width.
• Iframe/Embed will have fixed 740px height at screens starting from 1650px width.

Revenue Share

At this point to keep website running, we are offering an exchange rate of 140G into 1$, payouts starting from 14000G, which are 100$. Payouts currently done to Yandex Money Wallets.
Exchange rate might change when website reaches notable scale, also we will eventually add more payment methods.

You can contact me in any social network or via email at [email protected]