HTML5 Gaming Payment Platforms

While building a payment system into an ecommerce store may be a simple integration, creating those same payment solutions in the context of a cross-platform, real-time HTML5 game is a completely different story. In this talk we will explore how to integrate a real-time store experience into the context of an HTML5 game.

Transcript

1. Building Scalable Game Payment Systems HTML5 Gaming Payment Platforms Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc
2. What are we going to talk about Digital Payments Cross Platform
3. Demo - JSWars http://29a.ch/jswars/
4. The Architecture The Implementation The Product Webhooks Session Breakdown
5. The Architecture The Implementation The Product Webhooks Session Breakdown
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 Server   PayPal Identity Server  
9. Getting the Token and Lightbox Client Requests Payment Token   PayPal Returns Token   Payment Lightbox Displayed to User  
10. Within the Application   From Client Inventory Store   Fetching Inventory Information
11. Committing the Payment Client Activates Success State   PayPal Returns Transaction Data   Client Approves Transaction  
12. Store Identity Information   Store Transaction Information   Storing Data
13. Client Makes Verification Call to PayPal   PayPal Returns Purchase Data for User   Verifying the Purchase
14. Local Storage   Client Inventory System   Fetching LocalStorage Purchases
15. The Architecture The Implementation The Product Webhooks Session Breakdown
16. The Project Code Base https://github.com/paypal/html5-dg
17. Setup Sandbox User Accounts https://developer.paypal.com/
18. 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>!
19. Pick Language and Mobile Support Picking the Server-Side Language pptransact.init('py', true); !//mobile! pptransact.init('java');! ! !//non-mobile!
20. 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 ! }! });!
21. How the Billing Flow Works Billing Request Digital Goods Bill Success / Fail Product Storage Store Details User Notification Notify User
22. Creating a Verification Handler pptransact.verify({! userId:'[USER ID]',! itemId:'[ITEM ID]',! successCallback: function(data){! //verify success! },! failCallback: function(data){! //verify failed ! }! });!
23. How the Verification Flow Works Verification Request Product Storage Get Data Success / Fail User Notification Notify User Digital Goods Verify Purchase Success / Fail
24. 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();  
25. The Architecture The Implementation The Product Webhooks Session Breakdown
26. Identity and Payment Hooks Client Identity Server PayPal Identity Server
27. Identity: verifyUser function verifyUser($userId = 0){! $YourSessionUserId = '888888';! ! $returnVal = ! ($userId == $YourSessionUserId) ! ? true : false;! ! ! return $returnVal;! }!
28. Identity: getUserId function getUserId(){! $result = "888888";! return $result;! }!
29. 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! }!
30. 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;! }!
31. 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;! }!
32. Inventory Management Hooks Client Inventory Server PayPal Digital Goods Payment
33. 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;! }!
34. Is the Toolkit Right for You? Need to Accept Payments? HTML5 Support? Accepting Digital Goods?
35. 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/
36. Thank You! Any Questions? http://www.slideshare.net/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc