2012 svcodecamp: in app payments with html5

Building Scalable Game Payment Systems

In-App Payments with HTML5

Jonathan LeBlancDeveloper Evangelist (PayPal)

jleblanc@paypal.comTwitter: @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)

jleblanc@paypal.comTwitter: @jcleblanc

Github: github.com/jcleblanc