Post on 28-Jan-2015
description
transcript
Building Scalable Game Payment Systems
HTML5 Gaming Payment Platforms
Jonathan LeBlancDeveloper Evangelist (PayPal)
jleblanc@paypal.comTwitter: @jcleblanc
Github: github.com/jcleblanc
What are we going to talk about
Digital Payments
Cross Platform
Demo - JSWars
http://29a.ch/jswars/
The Architecture
The Implementation
The Product Webhooks
Session Breakdown
The Architecture
The Implementation
The Product Webhooks
Session Breakdown
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 Server
PayPal Identity Server
Getting the Token and Lightbox
Client Requests Payment Token
PayPal Returns Token
Payment Lightbox Displayed to User
Within the Application
From Client Inventory Store
Fetching Inventory Information
Committing the Payment
Client Activates Success State
PayPal Returns Transaction Data
Client Approves Transaction
Store Identity Information
Store Transaction Information
Storing Data
Client Makes Verification Call to PayPal
PayPal Returns Purchase Data for User
Verifying the Purchase
Local Storage
Client Inventory System
Fetching LocalStorage Purchases
The Architecture
The Implementation
The Product Webhooks
Session Breakdown
Setup Sandbox User Accounts
https://developer.paypal.com/
Attach the script includes
Library & Toolkit Setup
<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
BillingRequest
Digital Goods
Bill
Success / Fail
ProductStorageStore Details
User Notificatio
nNotify User
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
VerificationRequest
ProductStorage
Get Data
Success / Fail
User Notificatio
nNotify User
Digital Goods
Verify Purchase
Success / Fail
Opening and Closing the Flow
Opening the Modal Window
Closing the Modal Window
var dgflow = dg.startFlow( 'https://www.sandbox.paypal.com/ webscr?&useraction=commit&token=###');
dgflow.closeFlow();
The Architecture
The Implementation
The Product Webhooks
Session Breakdown
Identity and Payment Hooks
Client Identity Server
PayPal Identity 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: 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;}
Inventory Management Hooks
Client Inventory
Server
PayPal Digital 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 Toolkithttps://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 LeBlancDeveloper Evangelist (PayPal)
jleblanc@paypal.comTwitter: @jcleblanc
Github: github.com/jcleblanc