The document discusses building scalable game payment systems using HTML5 and PayPal Digital Goods. It describes the architecture involving client and server-side components, PayPal Digital Goods, HTML5 LocalStorage, and jQuery. It then covers implementing the payment and inventory management flows, including fetching tokens, committing payments, verifying purchases, and retrieving local storage purchases. Finally, it discusses setting up product webhooks for functions like user identity, payment recording and verification, and inventory management.

1. HTML5 Gaming Payment Platforms
Building Scalable Game Payment Systems
Jonathan LeBlanc
Developer Evangelist (PayPal)
jleblanc@paypal.com
Twitter: @jcleblanc
Github: github.com/jcleblanc

2. What are we going to talk about
Cross Platform Digital Payments

3. Demo - JSWars
http://29a.ch/jswars/

4. Session Breakdown
The Architecture
The Implementation
The Product Webhooks

5. Session Breakdown
The Architecture
The Implementation
The Product Webhooks

6. The Players in our Little Game
Client & Server-Side Components
PayPal Digital Goods (Express Checkout)
HTML5 LocalStorage
jQuery

7. How Digital Goods Work
Fetch the token
Display login lightbox
Commit the payment
Verify the payment

8. Fetching Identity Information
Client Identity PayPal
Server Identity
Server

9. Getting the Token and Lightbox
Client Requests
Payment Token
PayPal Returns
Token
Payment Lightbox
Displayed to User

10. Fetching Inventory Information
Within the
Application
From Client
Inventory Store

11. Committing the Payment
Client Approves
Transaction
PayPal Returns
Transaction Data
Client Activates
Success State

12. Storing Data
Store Identity
Information
Store Transaction
Information

13. Verifying the Purchase
Client Makes Verification
Call to PayPal
PayPal Returns
Purchase Data for User

14. Fetching LocalStorage Purchases
Local Storage
Client Inventory
System

15. Session Breakdown
The Architecture
The Implementation
The Product Webhooks

16. Setup Sandbox User Accounts
https://developer.paypal.com/

17. Library & Toolkit Setup
Attach the script includes
<script src="https://www.paypalobjects.com/js/
external/dg.js"></script>
<script src="client/jquery-min.js"
type="text/javascript"></script>

18. 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
}
});

19. How the Billing Flow Works
Bill
Digital
Goods
Success / Fail
Billing
Product
Request
Store Details Storage
User
Notify User
Notification

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

21. How the Verification Flow Works
Get Data
Product
Storage
Success / Fail
Verify Purchase
Verification Digital
Request Goods
Success / Fail
User
Notify User
Notification

22. Opening and Closing the Flow
Opening the Modal Window
var dgflow = dg.startFlow(
'https://www.sandbox.paypal.com/
webscr?&useraction=commit&token=###');
Closing the Modal Window
dgflow.closeFlow();

23. Session Breakdown
The Architecture
The Implementation
The Product Webhooks

24. Identity and Payment Hooks
Client Identity PayPal Identity
Server Server

25. Identity: verifyUser
function verifyUser($userId = 0){
$YourSessionUserId = '888888';
$returnVal =
($userId == $YourSessionUserId)
? true : false;
return $returnVal;
}

26. Identity: getUserId
function getUserId(){
$result = "888888";
return $result;
}

27. 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
}

28. 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;
}

29. 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;
}

30. Inventory Management Hooks
Client Inventory PayPal Digital
Server Goods
Payment

31. 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;
}

32. A Few Links
The HTML5 Toolkit
https://github.com/paypal/html5-dg
The PayPal Sandbox (Create Test Users)
https://developer.paypal.com/
JSWars Code and Demo
http://29a.ch/jswars/

33. Thank You! Any Questions?
http://www.slideshare.net/jcleblanc
Jonathan LeBlanc
Developer Evangelist (PayPal)
jleblanc@paypal.com
Twitter: @jcleblanc
Github: github.com/jcleblanc