HTML5 Gaming Payment Platforms
Download as PPTX, PDF•17 likes•8,318 views
The document discusses building scalable game payment systems using HTML5 and PayPal Digital Goods. It describes the architecture involving client and server-side components, PayPal Digital Goods, HTML5 LocalStorage, and jQuery. It then covers implementing the payment and inventory management flows, including fetching tokens, committing payments, verifying purchases, and retrieving local storage purchases. Finally, it discusses setting up product webhooks for functions like user identity, payment recording and verification, and inventory management.
![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
}
});](https://image.slidesharecdn.com/2013febconfoohtml5gaming-130226140221-phpapp01/85/HTML5-Gaming-Payment-Platforms-18-320.jpg)
![Creating a Verification Handler
pptransact.verify({
userId:'[USER ID]',
itemId:'[ITEM ID]',
successCallback: function(data){
//verify success
},
failCallback: function(data){
//verify failed
}
});](https://image.slidesharecdn.com/2013febconfoohtml5gaming-130226140221-phpapp01/85/HTML5-Gaming-Payment-Platforms-20-320.jpg)
![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
}](https://image.slidesharecdn.com/2013febconfoohtml5gaming-130226140221-phpapp01/85/HTML5-Gaming-Payment-Platforms-27-320.jpg)
![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;
}](https://image.slidesharecdn.com/2013febconfoohtml5gaming-130226140221-phpapp01/85/HTML5-Gaming-Payment-Platforms-31-320.jpg)
HTML5 Gaming Payment Platforms
- 1. HTML5 Gaming Payment Platforms Building Scalable Game Payment Systems Jonathan LeBlanc Developer Evangelist (PayPal) [email protected] Twitter: @jcleblanc Github: github.com/jcleblanc
- 2. What are we going to talk about Cross Platform Digital Payments
- 3. Demo - JSWars http://29a.ch/jswars/
- 4. Session Breakdown The Architecture The Implementation The Product Webhooks
- 5. Session Breakdown The Architecture The Implementation The Product Webhooks
- 6. The Players in our Little Game Client & Server-Side Components PayPal Digital Goods (Express Checkout) HTML5 LocalStorage jQuery
- 7. How Digital Goods Work Fetch the token Display login lightbox Commit the payment Verify the payment
- 8. Fetching Identity Information Client Identity PayPal Server Identity Server
- 9. Getting the Token and Lightbox Client Requests Payment Token PayPal Returns Token Payment Lightbox Displayed to User
- 10. Fetching Inventory Information Within the Application From Client Inventory Store
- 11. Committing the Payment Client Approves Transaction PayPal Returns Transaction Data Client Activates Success State
- 12. Storing Data Store Identity Information Store Transaction Information
- 13. Verifying the Purchase Client Makes Verification Call to PayPal PayPal Returns Purchase Data for User
- 14. Fetching LocalStorage Purchases Local Storage Client Inventory System
- 15. Session Breakdown The Architecture The Implementation The Product Webhooks
- 16. Setup Sandbox User Accounts https://developer.paypal.com/
- 17. 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>
- 18. 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 } });
- 19. How the Billing Flow Works Bill Digital Goods Success / Fail Billing Product Request Store Details Storage User Notify User Notification
- 20. Creating a Verification Handler pptransact.verify({ userId:'[USER ID]', itemId:'[ITEM ID]', successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed } });
- 21. How the Verification Flow Works Get Data Product Storage Success / Fail Verify Purchase Verification Digital Request Goods Success / Fail User Notify User Notification
- 22. Opening and Closing the Flow Opening the Modal Window var dgflow = dg.startFlow( 'https://www.sandbox.paypal.com/ webscr?&useraction=commit&token=###'); Closing the Modal Window dgflow.closeFlow();
- 23. Session Breakdown The Architecture The Implementation The Product Webhooks
- 24. Identity and Payment Hooks Client Identity PayPal Identity Server Server
- 25. Identity: verifyUser function verifyUser($userId = 0){ $YourSessionUserId = '888888'; $returnVal = ($userId == $YourSessionUserId) ? true : false; return $returnVal; }
- 26. Identity: getUserId function getUserId(){ $result = "888888"; return $result; }
- 27. 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 }
- 28. 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; }
- 29. 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; }
- 30. Inventory Management Hooks Client Inventory PayPal Digital Server Goods Payment
- 31. 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; }
- 32. 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/
- 33. Thank You! Any Questions? http://www.slideshare.net/jcleblanc Jonathan LeBlanc Developer Evangelist (PayPal) [email protected] Twitter: @jcleblanc Github: github.com/jcleblanc
Editor's Notes
- #8: $0.01 USD - $3,000.00 USD2.9% + $0.30 USD (Standard Pricing)5% + $0.05 USD (MicropaymentsPricing)
- #9: Identitywill come from one of two places, either as a hookinto the client ID server or fromPayPalitself
- #13: If the user binding is not currently done, we store the information back to the client inventory storeStore inventory information into local storage
- #25: The URI for startFlow is comprised of static values (Sandbox / live URI & useraction parameter) and a dynamic token. The token is generated by making a server side request, then a setExpressCheckout call. This server side call sets the value of the item, currency, success / fail URIs, etc. and generates a token to pop up the modal window.