2012 svcodecamp: in app payments with html5

39
Building Scalable Game Payment Systems In-App Payments with HTML5 Jonathan LeBlanc Developer Evangelist (PayPal) [email protected] Twitter: @jcleblanc Github: github.com/jcleblanc

Upload: jonathan-leblanc

Post on 28-Jan-2015

103 views

Category:

Technology


0 download

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

Page 1: 2012 SVCodeCamp: In App Payments with HTML5

Building Scalable Game Payment Systems

In-App Payments with HTML5

Jonathan LeBlancDeveloper Evangelist (PayPal)

[email protected]: @jcleblanc

Github: github.com/jcleblanc

Page 2: 2012 SVCodeCamp: In App Payments with HTML5

Background

Developer Evangelist with PayPal and eBay

Author of Programming Social Applications

Emmy award winner for Outstanding Achievement in Advanced Media Technology

Page 3: 2012 SVCodeCamp: In App Payments with HTML5

What are we going to talk about

PaymentsHTML5 Toolkit

Page 4: 2012 SVCodeCamp: In App Payments with HTML5

What are we not going to talk about

Physical Goods

Page 5: 2012 SVCodeCamp: In App Payments with HTML5

Demo - JSWars

http://29a.ch/jswars/

Page 6: 2012 SVCodeCamp: In App Payments with HTML5

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Page 7: 2012 SVCodeCamp: In App Payments with HTML5

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Page 8: 2012 SVCodeCamp: In App Payments with HTML5

The Players in our Little Game

Client & Server-Side Components

PayPal Digital Goods (Express Checkout)

HTML5 LocalStorage

jQuery

Page 9: 2012 SVCodeCamp: In App Payments with HTML5

Client / Server Side Components

Client Components

Server-Side Components

Page 10: 2012 SVCodeCamp: In App Payments with HTML5

How Digital Goods Work

Fetch the token

Display login lightbox

Commit the payment

Verify the payment

Page 11: 2012 SVCodeCamp: In App Payments with HTML5

Fetching Identity Information

Client Identity Server

PayPal Identity Server

Page 12: 2012 SVCodeCamp: In App Payments with HTML5

Getting the Token and Lightbox

Client Requests Payment Token

PayPal Returns Token

Payment Lightbox Displayed to User

Page 13: 2012 SVCodeCamp: In App Payments with HTML5

Within the Application

From Client Inventory Store

Fetching Inventory Information

Page 14: 2012 SVCodeCamp: In App Payments with HTML5

Committing the Payment

Client Activates Success State

PayPal Returns Transaction Data

Client Approves Transaction

Page 15: 2012 SVCodeCamp: In App Payments with HTML5

Store Identity Information

Store Transaction Information

Storing Data

Page 16: 2012 SVCodeCamp: In App Payments with HTML5

Client Makes Verification Call to PayPal

PayPal Returns Purchase Data for User

Verifying the Purchase

Page 17: 2012 SVCodeCamp: In App Payments with HTML5

Local Storage

Client Inventory System

Fetching LocalStorage Purchases

Page 18: 2012 SVCodeCamp: In App Payments with HTML5

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Page 19: 2012 SVCodeCamp: In App Payments with HTML5

The Project Code Base

https://github.com/paypal/html5-dg

Page 20: 2012 SVCodeCamp: In App Payments with HTML5

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

Page 21: 2012 SVCodeCamp: In App Payments with HTML5

Setup Sandbox User Accounts

https://developer.paypal.com/

Page 22: 2012 SVCodeCamp: In App Payments with HTML5

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>

Page 23: 2012 SVCodeCamp: In App Payments with HTML5

Pick Language and Mobile Support

Picking the Server-Side Language

pptransact.init('py', true); //mobilepptransact.init('java'); //non-mobile

Page 24: 2012 SVCodeCamp: In App Payments with HTML5

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

Page 25: 2012 SVCodeCamp: In App Payments with HTML5

How the Billing Flow Works

BillingRequest

Digital Goods

Bill

Success / Fail

ProductStorageStore Details

User Notificatio

nNotify User

Page 26: 2012 SVCodeCamp: In App Payments with HTML5

Creating a Verification Handler

pptransact.verify({ userId:'[USER ID]', itemId:'[ITEM ID]', successCallback: function(data){ //verify success }, failCallback: function(data){ //verify failed }});

Page 27: 2012 SVCodeCamp: In App Payments with HTML5

How the Verification Flow Works

VerificationRequest

ProductStorage

Get Data

Success / Fail

User Notificatio

nNotify User

Digital Goods

Verify Purchase

Success / Fail

Page 28: 2012 SVCodeCamp: In App Payments with HTML5

The Architecture

The Implementation

The Product Webhooks

Session Breakdown

Page 29: 2012 SVCodeCamp: In App Payments with HTML5

Identity and Payment Hooks

Client Identity Server

PayPal Identity Server

Page 30: 2012 SVCodeCamp: In App Payments with HTML5

Identity: verifyUser

function verifyUser($userId = 0){    $YourSessionUserId = '888888';        $returnVal = ($userId == $YourSessionUserId) ? true : false;    

return $returnVal;}

Page 31: 2012 SVCodeCamp: In App Payments with HTML5

Identity: getUserId

function getUserId(){    $result = "888888";    return $result;}

Page 32: 2012 SVCodeCamp: In App Payments with HTML5

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}

Page 33: 2012 SVCodeCamp: In App Payments with HTML5

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

Page 34: 2012 SVCodeCamp: In App Payments with HTML5

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

Page 35: 2012 SVCodeCamp: In App Payments with HTML5

Inventory Management Hooks

Client Inventory

Server

PayPal Digital Goods

Payment

Page 36: 2012 SVCodeCamp: In App Payments with HTML5

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

Page 37: 2012 SVCodeCamp: In App Payments with HTML5

Is the Toolkit Right for You?

Need to Accept Payments?

HTML5 Support?

Accepting Digital Goods?

Page 38: 2012 SVCodeCamp: In App Payments with HTML5

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/

Page 39: 2012 SVCodeCamp: In App Payments with HTML5

Thank You! Any Questions?

http://www.slideshare.net/jcleblanc

Jonathan LeBlancDeveloper Evangelist (PayPal)

[email protected]: @jcleblanc

Github: github.com/jcleblanc