Your SlideShare is downloading. ×
2012 SVCodeCamp: In App Payments with HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2012 SVCodeCamp: In App Payments with HTML5

1,504
views

Published 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)

Published in: Technology

1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,504
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
21
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