1 / 33

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.

jcleblanc
Download Presentation

HTML5 Gaming Payment Platforms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 Server PayPal 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 Request Product Storage Store Details User Notification Notify User

  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 Request Digital Goods Success / Fail User Notification Notify User

  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 Server PayPal Identity 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 Server PayPal Digital 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

More Related