HTML5 Gaming Payment Platforms
Upcoming SlideShare
Loading in...5
×
 

HTML5 Gaming Payment Platforms

on

  • 7,169 views

While building a payment system into an ecommerce store may be a simple integration, creating those same payment solutions in the context of a cross-platform, real-time HTML5 game is a completely ...

While building a payment system into an ecommerce store may be a simple integration, creating those same payment solutions in the context of a cross-platform, real-time HTML5 game is a completely different story. In this talk we will explore how to integrate a real-time store experience into the context of an HTML5 game.

Statistics

Views

Total Views
7,169
Views on SlideShare
6,641
Embed Views
528

Actions

Likes
17
Downloads
94
Comments
1

22 Embeds 528

http://tle-global.dev 125
http://local-awardsmgmt 79
https://twitter.com 76
http://tle-global.local 41
http://tle-global.stage2.codeenigma.com 38
http://www.scoop.it 31
http://tle-global.dev2.codeenigma.com 27
http://orange.localhost 25
http://qa1978.moreix.com 17
http://lanyrd.com 12
http://localhost 9
http://tle.local 9
http://10.237.169.78 8
http://192.168.1.31 7
http://realyplusawards.eu1.frbit.net 7
http://dev.portalfin.com 7
http://demo.itown.pl 2
http://nextlogic.moreix.com 2
http://clients.tagthelove.com 2
http://farmacologia2014.blogspot.com 2
http://tle-global.enigma6.codeenigma.com 1
https://www.crmzen.com.br 1
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • this a say p7
    Are you sure you want to
    Your message goes here
    Processing…
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
  • 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.

HTML5 Gaming Payment Platforms HTML5 Gaming Payment Platforms Presentation Transcript

  • HTML5 Gaming Payment Platforms Building Scalable Game Payment Systems Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @jcleblanc Github: github.com/jcleblanc
  • What are we going to talk about Cross Platform Digital Payments
  • 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
  • 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
  • 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>
  • 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
  • Opening and Closing the FlowOpening the Modal Window var dgflow = dg.startFlow( https://www.sandbox.paypal.com/ webscr?&useraction=commit&token=###);Closing the Modal Window dgflow.closeFlow();
  • 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; }
  • 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