HTML5 Gaming Payment Platforms     Building Scalable Game Payment Systems                                Jonathan LeBlanc ...
What are we going to talk about   Cross Platform   Digital Payments
Demo - JSWars      http://29a.ch/jswars/
Session Breakdown        The Architecture        The Implementation        The Product Webhooks
Session Breakdown        The Architecture        The Implementation        The Product Webhooks
The Players in our Little Game    Client & Server-Side Components    PayPal Digital Goods (Express Checkout)    HTML5 Loca...
How Digital Goods Work          Fetch the token          Display login lightbox          Commit the payment          Verif...
Fetching Identity Information    Client Identity    PayPal        Server         Identity                       Server
Getting the Token and Lightbox                   Client Requests                   Payment Token                   PayPal ...
Fetching Inventory Information                       Within the                       Application                       Fr...
Committing the Payment                   Client Approves                   Transaction                   PayPal Returns   ...
Storing Data               Store Identity               Information               Store Transaction               Informat...
Verifying the Purchase              Client Makes Verification              Call to PayPal              PayPal Returns     ...
Fetching LocalStorage Purchases                     Local Storage                     Client Inventory                    ...
Session Breakdown        The Architecture        The Implementation        The Product Webhooks
Setup Sandbox User Accounts   https://developer.paypal.com/
Library & Toolkit Setup               Attach the script includes<script src="https://www.paypalobjects.com/js/   external/...
Creating a Billing Handler    pptransact.bill({        userId:[USER ID],        itemId:[ITEM ID],        itemQty:[ITEM QUA...
How the Billing Flow Works                    Bill                                  Digital                               ...
Creating a Verification Handler    pptransact.verify({        userId:[USER ID],        itemId:[ITEM ID],        successCal...
How the Verification Flow Works                  Get Data                                        Product                  ...
Opening and Closing the FlowOpening the Modal Window   var dgflow = dg.startFlow(     https://www.sandbox.paypal.com/     ...
Session Breakdown        The Architecture        The Implementation        The Product Webhooks
Identity and Payment Hooks Client Identity        PayPal Identity     Server                Server
Identity: verifyUser function verifyUser($userId = 0){   $YourSessionUserId = 888888;     $returnVal =       ($userId == $...
Identity: getUserId       function getUserId(){         $result = "888888";         return $result;       }
Payment: recordPayment function recordPayment($paymentObj = ""){   $userId = $paymentObj["userId"];   $itemId = $paymentOb...
Payment: verifyPayment function verifyPayment($userId = 0, $itemId = 0){   $result = false;     //INSERT YOUR CODE TO QUER...
Payment: getPaymentfunction getPayment($userId = 0, $itemId = 0){  //INSERT CODE TO QUERY AND RETURN PAYMENT STRUCTURE    ...
Inventory Management Hooks Client Inventory     PayPal Digital      Server             Goods                        Payment
Inventory: getItem     function getItem($itemId){       $items = array(          array(name => "Mega Shields",            ...
A Few Links   The HTML5 Toolkit   https://github.com/paypal/html5-dg   The PayPal Sandbox (Create Test Users)   https://de...
Thank You! Any Questions?        http://www.slideshare.net/jcleblanc                             Jonathan LeBlanc         ...
Upcoming SlideShare
Loading in …5
×

HTML5 Gaming Payment Platforms

9,469 views

Published on

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.

Published in: Technology
1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total views
9,469
On SlideShare
0
From Embeds
0
Number of Embeds
517
Actions
Shares
0
Downloads
106
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide
  • $0.01 USD - $3,000.00 USD2.9% + $0.30 USD (Standard Pricing)5% + $0.05 USD (MicropaymentsPricing)
  • Identitywill come from one of two places, either as a hookinto the client ID server or fromPayPalitself
  • If the user binding is not currently done, we store the information back to the client inventory storeStore inventory information into local storage
  • The URI for startFlow is comprised of static values (Sandbox / live URI &amp; useraction parameter) and a dynamic token. The token is generated by making a server side request, then a setExpressCheckout call. This server side call sets the value of the item, currency, success / fail URIs, etc. and generates a token to pop up the modal window.
  • HTML5 Gaming Payment Platforms

    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 FlowOpening 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: getPaymentfunction 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

    ×