2012 SVCodeCamp: In App Payments with HTML5

  • 1,435 views
Uploaded on

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

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)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,435
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
16
Comments
1
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 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. Background Developer Evangelist with PayPal and eBay Author of Programming Social Applications Emmy award winner for Outstanding Achievement in Advanced Media Technology
  • 3. What are we going to talk about HTML5 Toolkit Payments
  • 4. What are we not going to talk about Physical Goods
  • 5. Demo - JSWars http://29a.ch/jswars/
  • 6. Session Breakdown The Architecture The Implementation The Product Webhooks
  • 7. Session Breakdown The Architecture The Implementation The Product Webhooks
  • 8. The Players in our Little Game Client & Server-Side Components PayPal Digital Goods (Express Checkout) HTML5 LocalStorage jQuery
  • 9. Client / Server Side Components Client Components Server-Side Components
  • 10. How Digital Goods Work Fetch the token Display login lightbox Commit the payment Verify the payment
  • 11. Fetching Identity Information Client Identity PayPal Server Identity Server
  • 12. Getting the Token and Lightbox Client Requests Payment Token PayPal Returns Token Payment Lightbox Displayed to User
  • 13. Fetching Inventory Information Within the Application From Client Inventory Store
  • 14. Committing the Payment Client Approves Transaction PayPal Returns Transaction Data Client Activates Success State
  • 15. Storing Data Store Identity Information Store Transaction Information
  • 16. Verifying the Purchase Client Makes Verification Call to PayPal PayPal Returns Purchase Data for User
  • 17. Fetching LocalStorage Purchases Local Storage Client Inventory System
  • 18. Session Breakdown The Architecture The Implementation The Product Webhooks
  • 19. The Project Code Base https://github.com/paypal/html5-dg
  • 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. Setup Sandbox User Accounts https://developer.paypal.com/
  • 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. Picking the Server-Side Language Pick Language and Mobile Support pptransact.init(py, true); //mobile pptransact.init(java); //non-mobile
  • 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. How the Billing Flow Works Bill Digital Goods Success / Fail Billing Product Request Store Details Storage User Notify User Notification
  • 26. Creating a Verification Handler pptransact.verify({ userId:[USER ID], itemId:[ITEM ID], successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed } });
  • 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. Session Breakdown The Architecture The Implementation The Product Webhooks
  • 29. Identity and Payment Hooks Client Identity PayPal Identity Server Server
  • 30. Identity: verifyUser function verifyUser($userId = 0){ $YourSessionUserId = 888888; $returnVal = ($userId == $YourSessionUserId) ? true : false; return $returnVal; }
  • 31. Identity: getUserId function getUserId(){ $result = "888888"; return $result; }
  • 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. 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. 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. Inventory Management Hooks Client Inventory PayPal Digital Server Goods Payment
  • 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. Is the Toolkit Right for You? HTML5 Support? Need to Accept Payments? Accepting Digital Goods?
  • 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. Thank You! Any Questions? http://www.slideshare.net/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc