In-App Payments with HTML5  Building Scalable Game Payment Systems                             Jonathan LeBlanc           ...
Background             Developer Evangelist with             PayPal and eBay             Author of Programming            ...
What are we going to talk about   HTML5 Toolkit     Payments
What are we not going to talk about           Physical Goods
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...
Client / Server Side Components  Client Components  Server-Side Components
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
The Project Code Base https://github.com/paypal/html5-dg
File Architectureindex.html: Sample integrationclient/pptransact.js: Core front-endserver/[LANG]/cancel.[EXT]: Display whe...
Setup Sandbox User Accounts   https://developer.paypal.com/
Library & Toolkit Setup               Attach the script includes<script src="https://www.paypalobjects.com/js/   external/...
Picking the Server-Side Language       Pick Language and Mobile Support pptransact.init(py, true);   //mobile pptransact.i...
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                  ...
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",            ...
Is the Toolkit Right for You?            HTML5 Support?            Need to Accept Payments?            Accepting Digital G...
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
×

2012 SVCodeCamp: In App Payments with HTML5

1,566

Published on

Video available at http://www.youtube.com/watch?v=4sQYYCx_CQM&feature=em-share_video_user

Presentation on In-App Payments with HTML5 at Silicon Valley Code Camp (October 7th, 2012)

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,566
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
1
Likes
4
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
  • 2012 SVCodeCamp: In App Payments with HTML5

    1. 1. In-App Payments with HTML5 Building Scalable Game Payment Systems Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc
    2. 2. Background Developer Evangelist with PayPal and eBay Author of Programming Social Applications Emmy award winner for Outstanding Achievement in Advanced Media Technology
    3. 3. What are we going to talk about HTML5 Toolkit Payments
    4. 4. What are we not going to talk about Physical Goods
    5. 5. Demo - JSWars http://29a.ch/jswars/
    6. 6. Session Breakdown The Architecture The Implementation The Product Webhooks
    7. 7. Session Breakdown The Architecture The Implementation The Product Webhooks
    8. 8. The Players in our Little Game Client & Server-Side Components PayPal Digital Goods (Express Checkout) HTML5 LocalStorage jQuery
    9. 9. Client / Server Side Components Client Components Server-Side Components
    10. 10. How Digital Goods Work Fetch the token Display login lightbox Commit the payment Verify the payment
    11. 11. Fetching Identity Information Client Identity PayPal Server Identity Server
    12. 12. Getting the Token and Lightbox Client Requests Payment Token PayPal Returns Token Payment Lightbox Displayed to User
    13. 13. Fetching Inventory Information Within the Application From Client Inventory Store
    14. 14. Committing the Payment Client Approves Transaction PayPal Returns Transaction Data Client Activates Success State
    15. 15. Storing Data Store Identity Information Store Transaction Information
    16. 16. Verifying the Purchase Client Makes Verification Call to PayPal PayPal Returns Purchase Data for User
    17. 17. Fetching LocalStorage Purchases Local Storage Client Inventory System
    18. 18. Session Breakdown The Architecture The Implementation The Product Webhooks
    19. 19. The Project Code Base https://github.com/paypal/html5-dg
    20. 20. File Architectureindex.html: Sample integrationclient/pptransact.js: Core front-endserver/[LANG]/cancel.[EXT]: Display when user cancelsserver/[LANG]/common.[EXT]: Common functions andvariables.server/[LANG]/identity.[EXT]: Client identity hooksserver/[LANG]/inventory.[EXT]: Client inventory hooksserver/[LANG]/success.[EXT]: Display on payment successserver/[LANG]/pptransact.[EXT]: Server-side controller
    21. 21. Setup Sandbox User Accounts https://developer.paypal.com/
    22. 22. 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><script src="client/pptransact.js"></script>
    23. 23. Picking the Server-Side Language Pick Language and Mobile Support pptransact.init(py, true); //mobile pptransact.init(java); //non-mobile
    24. 24. 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 } });
    25. 25. How the Billing Flow Works Bill Digital Goods Success / Fail Billing Product Request Store Details Storage User Notify User Notification
    26. 26. Creating a Verification Handler pptransact.verify({ userId:[USER ID], itemId:[ITEM ID], successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed } });
    27. 27. How the Verification Flow Works Get Data Product Storage Success / Fail Verify Purchase Verification Digital Request Goods Success / Fail User Notify User Notification
    28. 28. Session Breakdown The Architecture The Implementation The Product Webhooks
    29. 29. Identity and Payment Hooks Client Identity PayPal Identity Server Server
    30. 30. Identity: verifyUser function verifyUser($userId = 0){ $YourSessionUserId = 888888; $returnVal = ($userId == $YourSessionUserId) ? true : false; return $returnVal; }
    31. 31. Identity: getUserId function getUserId(){ $result = "888888"; return $result; }
    32. 32. 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 }
    33. 33. 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; }
    34. 34. 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;}
    35. 35. Inventory Management Hooks Client Inventory PayPal Digital Server Goods Payment
    36. 36. 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; }
    37. 37. Is the Toolkit Right for You? HTML5 Support? Need to Accept Payments? Accepting Digital Goods?
    38. 38. 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/
    39. 39. Thank You! Any Questions? http://www.slideshare.net/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×