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)

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 Architecture
index.html: Sample integration
client/pptransact.js: Core front-end
server/[LANG]/cancel.[EXT]: Display when user cancels
server/[LANG]/common.[EXT]: Common functions and
variables.
server/[LANG]/identity.[EXT]: Client identity hooks
server/[LANG]/inventory.[EXT]: Client inventory hooks
server/[LANG]/success.[EXT]: Display on payment success
server/[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: getPayment
function 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