2012 SVCodeCamp: In App Payments with HTML5
Upcoming SlideShare
Loading in...5

2012 SVCodeCamp: In App Payments with HTML5



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)



Total Views
Views on SlideShare
Embed Views



8 Embeds 152

http://blogs.terrapinn.com 87
http://lanyrd.com 35
http://qa1978.moreix.com 17
http://dev.portalfin.com 7
http://feeds.feedburner.com 2
http://nextlogic.moreix.com 2
https://twitter.com 1
http://tweets.prodmgmttalk.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • $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 2012 SVCodeCamp: In App Payments with HTML5 Presentation Transcript

  • In-App Payments with HTML5 Building Scalable Game Payment Systems Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc
  • Background Developer Evangelist with PayPal and eBay Author of Programming Social Applications Emmy award winner for Outstanding Achievement in Advanced Media Technology
  • 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 LocalStorage jQuery
  • Client / Server Side Components Client Components Server-Side Components
  • How Digital Goods Work Fetch the token Display login lightbox Commit the payment Verify the payment
  • Fetching Identity Information Client Identity PayPal Server Identity Server
  • Getting the Token and Lightbox Client Requests Payment Token PayPal Returns Token Payment Lightbox Displayed to User
  • Fetching Inventory Information Within the Application From Client Inventory Store
  • Committing the Payment Client Approves Transaction PayPal Returns Transaction Data Client Activates Success State
  • Storing Data Store Identity Information Store Transaction Information
  • Verifying the Purchase Client Makes Verification Call to PayPal PayPal Returns Purchase Data for User
  • Fetching LocalStorage Purchases Local Storage Client Inventory System
  • 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 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
  • Setup Sandbox User Accounts https://developer.paypal.com/
  • 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>
  • Picking the Server-Side Language Pick Language and Mobile Support pptransact.init(py, true); //mobile pptransact.init(java); //non-mobile
  • 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 } });
  • How the Billing Flow Works Bill Digital Goods Success / Fail Billing Product Request Store Details Storage User Notify User Notification
  • Creating a Verification Handler pptransact.verify({ userId:[USER ID], itemId:[ITEM ID], successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed } });
  • How the Verification Flow Works Get Data Product Storage Success / Fail Verify Purchase Verification Digital Request Goods Success / Fail User Notify User Notification
  • 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 == $YourSessionUserId) ? true : false; return $returnVal; }
  • Identity: getUserId function getUserId(){ $result = "888888"; return $result; }
  • 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 }
  • 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; }
  • 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;}
  • Inventory Management Hooks Client Inventory PayPal Digital Server Goods Payment
  • 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; }
  • Is the Toolkit Right for You? HTML5 Support? Need to Accept Payments? Accepting Digital Goods?
  • 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/
  • Thank You! Any Questions? http://www.slideshare.net/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc