2012 svcodecamp: in app payments with html5
DESCRIPTION
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)TRANSCRIPT
Building Scalable Game Payment Systems
In-App Payments with HTML5
Jonathan LeBlancDeveloper Evangelist (PayPal)
[email protected]: @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
PaymentsHTML5 Toolkit
What are we not going to talk about
Physical Goods
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
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 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
The Project Code Base
https://github.com/paypal/html5-dg
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
File Architecture
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>
<script src="client/pptransact.js"></script>
Pick Language and Mobile Support
Picking the Server-Side Language
pptransact.init('py', true); //mobilepptransact.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
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
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;}
Is the Toolkit Right for You?
Need to Accept Payments?
HTML5 Support?
Accepting Digital Goods?
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)
[email protected]: @jcleblanc
Github: github.com/jcleblanc