2012 SVCodeCamp: In App Payments with HTML5

In-App Payments with HTML5 Building Scalable Game Payment Systems Jonathan LeBlanc Developer Evangelist (PayPal) jleblanc@paypal.com Twitter: @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 HTML5 Toolkit Payments

What are we not going to talk about Physical Goods

Demo - JSWars http://29a.ch/jswars/

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

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 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

The Project Code Base https://github.com/paypal/html5-dg

File Architectureindex.html: Sample integrationclient/pptransact.js: Core front-endserver/[LANG]/cancel.[EXT]: Display when user cancelsserver/[LANG]/common.[EXT]: Common functions andvariables.server/[LANG]/identity.[EXT]: Client identity hooksserver/[LANG]/inventory.[EXT]: Client inventory hooksserver/[LANG]/success.[EXT]: Display on payment successserver/[LANG]/pptransact.[EXT]: Server-side controller

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><script src="client/pptransact.js"></script>

Picking the Server-Side Language Pick Language and Mobile Support pptransact.init(py, true); //mobile pptransact.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 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

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; }

Is the Toolkit Right for You? HTML5 Support? Need to Accept Payments? Accepting Digital Goods?

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

http://blogs.terrapinn.com	81
http://lanyrd.com	31
http://qa1978.moreix.com	17
http://dev.portalfin.com	7
http://feeds.feedburner.com	2
http://nextlogic.moreix.com	2
https://twitter.com	1
http://tweets.prodmgmttalk.com	1

2012 SVCodeCamp: In App Payments with HTML5

by Jonathan LeBlanc on Oct 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 142

Statistics

2012 SVCodeCamp: In App Payments with HTML5 Presentation Transcript