HTML5 Gaming Payment Platforms

Building Scalable Game Payment Systems

HTML5 Gaming Payment Platforms

Jonathan LeBlancDeveloper Evangelist (PayPal)

[email protected]: @jcleblanc

Github: github.com/jcleblanc

What are we going to talk about

Digital Payments

Cross Platform

Demo - JSWars

http://29a.ch/jswars/

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

The Players in our Little Game

Client & Server-Side Components

PayPal Digital Goods (Express Checkout)

HTML5 LocalStorage

jQuery

How Digital Goods Work

Fetch the token

Display login lightbox

Commit the payment

Verify the payment

Fetching Identity Information

Client Identity Server

PayPal Identity Server

Getting the Token and Lightbox

Client Requests Payment Token

PayPal Returns Token

Payment Lightbox Displayed to User

Within the Application

From Client Inventory Store

Fetching Inventory Information

Committing the Payment

Client Activates Success State

PayPal Returns Transaction Data

Client Approves Transaction

Store Identity Information

Store Transaction Information

Storing Data

Client Makes Verification Call to PayPal

PayPal Returns Purchase Data for User

Verifying the Purchase

Local Storage

Client Inventory System

Fetching LocalStorage Purchases

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Setup Sandbox User Accounts

https://developer.paypal.com/

Attach the script includes

Library & Toolkit Setup

<script src="https://www.paypalobjects.com/js/external/dg.js"></script>

<script src="client/jquery-min.js" type="text/javascript"></script>

Creating a Billing Handler

pptransact.bill({ userId:'[USER ID]', itemId:'[ITEM ID]', itemQty:'[ITEM QUANTITY]', successCallback: function(data){ //bill success }, failCallback: function(data){ //bill cancelled }});

How the Billing Flow Works

BillingRequest

Digital Goods

Bill

Success / Fail

ProductStorageStore Details

User Notificatio

nNotify User

Creating a Verification Handler

pptransact.verify({ userId:'[USER ID]', itemId:'[ITEM ID]', successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed }});

How the Verification Flow Works

VerificationRequest

ProductStorage

Get Data

Success / Fail

User Notificatio

nNotify User

Digital Goods

Verify Purchase

Success / Fail

Opening and Closing the Flow

Opening the Modal Window

Closing the Modal Window

var dgflow = dg.startFlow( 'https://www.sandbox.paypal.com/ webscr?&useraction=commit&token=###');

dgflow.closeFlow();

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Identity and Payment Hooks

Client Identity Server

PayPal Identity Server

Identity: verifyUser

function verifyUser($userId = 0){    $YourSessionUserId = '888888';        $returnVal = ($userId == $YourSessionUserId) ? true : false;    

return $returnVal;}

Identity: getUserId

function getUserId(){    $result = "888888";    return $result;}

Payment: recordPayment

function recordPayment($paymentObj = ""){    $userId = $paymentObj["userId"];    $itemId = $paymentObj["itemId"];    $transactionId = $paymentObj["transactionId"];    $paymentStatus = $paymentObj["paymentStatus"];    $orderTime = $paymentObj["orderTime"];            //INSERT YOUR CODE TO SAVE THE PAYMENT DATA}

Payment: verifyPayment

function verifyPayment($userId = 0, $itemId = 0){    $result = false;        //INSERT YOUR CODE TO QUERY PAYMENT DATA AND //RETURN TRUE if MATCH FOUND        return $result;}

Payment: getPayment

function getPayment($userId = 0, $itemId = 0){    //INSERT CODE TO QUERY AND RETURN PAYMENT STRUCTURE        $returnObj = array("success" => true,                       "error" => "",                       "transactionId" => "12345678",                       "orderTime" => "2011-09-29T04:47:51Z",                       "paymentStatus" => "Pending",                       "itemId" => "123",                       "userId" => "888888");        return $returnObj;}

Inventory Management Hooks

Client Inventory

Server

PayPal Digital Goods

Payment

Inventory: getItem

function getItem($itemId){    $items = array(        array(name => "Mega Shields",              number => "123",              qty => "1",              taxamt => "0",              amt => "1.00",              desc => "Unlock the power!",              category => "Digital"),        ...);        $returnObj = array();    for ($i = 0; $i < count($items); $i++){        if ($items[$i]['number'] == $itemId){            $returnObj = $items[$i];        }    }        return $returnObj;}

A Few Links

The HTML5 Toolkithttps://github.com/paypal/html5-dg

The PayPal Sandbox (Create Test Users)https://developer.paypal.com/

JSWars Code and Demo http://29a.ch/jswars/

Thank You! Any Questions?

http://www.slideshare.net/jcleblanc

Jonathan LeBlancDeveloper Evangelist (PayPal)

[email protected]: @jcleblanc

Github: github.com/jcleblanc