Monthly Archives: April 2015

Integrating One Touch for web


Last fall, we launched One Touch™ for native mobile, the industry’s first single touch payment experience on iOS and Android. Since then, we’ve seen tremendous results in how much it has improved the buying experience for consumers and merchants alike. Today we’re launching One Touch for web– enabling consumers to pay without user IDs and passwords on the web after their first login, just like we enabled on mobile devices.

While One Touch™ for native mobile required the user to have either the PayPal or Venmo app installed on their device, One Touch for web will work directly within the browser for users who do not have the app installed. One Touch for web will work on mobile, tablet and desktop (Mac and PC) across all major browsers and platforms.

As a developer, if you have integrated either through Braintree or Express Checkout through PayPal, then you do not need to do anything further. As we roll out this functionality to our consumers, they will begin experiencing One Touch for web on your site.

For a new integration, there are two ways you can serve up the One Touch for web experience to your users.

Firstly, if you have no credit card processing on your site or want to move to a payment solution where you can integrate cards, PayPal, Bitcoin through Coinbase and Apple Pay, then you should integrate Braintree’s This is a very easy integration and to get started you can visit our developer pages here.

However, if you already have credit card processing on your site, and want to integrate One Touch for web directly, then you should do this using PayPal Express Checkout. You can do so by using the PayPal Rest APIs. Our documentation can be found here.

Please note that you will not necessarily experience the One Touch for web experience until it has rolled out to your user account. We will update this post once the PayPal Sandbox has OneTouch functionality enabled so you can begin testing the experience with your own code.

One Touch for web is available today, beginning in the US, and expanding internationally in the coming months.

Isomorphic React Apps with React-Engine


Earlier this year, we started using react in our various apps at PayPal. For existing apps the plans were to bring react in incrementally for new features and start migrating portions of the existing functionality into a pure react solve. Regardless, most implementations were purely client side driven. But most recently, in one of the apps that we had to start from scratch, we decided to take a step forward and use react end to end. Given express based kraken-js as PayPal’s application stack, we wanted to incorporate react Views in JS or JSX to be the default template solution along with routing and isomorphic support.

Thus, a summary of our app’s requirements were

  1. Use react’s JSX (or react’s JS) as the default template engine in our kraken-js stack
  2. Support server side rendering and preserve render state in the browser for fast page initialization
  3. Map app’s visual state in the browser to URLs using react-router to support bookmarking
  4. Finally, support both react-router based UI workflows and simple stand alone react view UI workflows in kraken-js

As we started working towards the above requirements, we realized that there was a lot of boiler plate involved in using react-router along side with simple react views in an express app. react-router requires its own route declaration to be run before a component can be rendered, because it needs to figure out the component based on URL dynamically. But plain react views could be just rendered without any of those intermediate steps.

We wanted to take this boiler plate that happens at the express render time and simplify it using a clean api. Naturally, all things pointed to express’s `res.render`. The question became very clear now on how `res.render` can be used as-is without any api facade changes but support both react-router rendering and regular react view rendering.

Thus react-engine was born to abstract all of the complexities into the res.render!

So in simple terms, react-engine is a Javascript library for express based NodeJS web apps for rendering composite react views. The phrase composite react views reflects react-engine’s ability to handle rendering of both react-router based UI workflows and stand alone react views.

Render Example
// to run and render a react router based component
res.render('/account', {});
// or more generically
res.render(req.url, {});

// to render a react view
res.render('index', {});

Notice how the first render method is called with a `/` prefix in the view name. That is key to the react-engine’s MAGIC. Behind the scenes, react-engine uses a custom express View to intercept view names and if they start with a `/` then it first runs the react-router and then renders the component that react router spits out or if there is no `/` then it just renders the view file.

Setup Example
var express = require('express');
var engine = require(‘react-engine');

var app = express();

// react-engine options
var engineOptions = {
  // optional, if not using react-router

// set `react-engine` as the view engine
app.engine('.jsx', engine.server.create(engineOptions));

// set the view directory
app.set('views', __dirname + '/public/views');

// set js as the view engine
app.set('view engine', 'jsx');

// finally, set the custom react-engine view for express
app.set('view', engine.expressView);

In a nutshell, the code sets react-engine as the render engine with its custom express View for express to render jsx views.

react-engine supports isomorphic react apps by bootstrapping server rendered components onto the client or browser in an easy fashion. It exposes a client api function that can be called whenever the DOM is ready to bootstrap the app.

document.addEventListener('DOMContentLoaded', function onLoad() {
    client.boot(options, function onBoot(renderData) {
The complete options spec can be found here. More detailed examples of using react-engine can be found here

We love react at PayPal and react-engine helps us abstract out the boiler plate in setting up react to be used with react-router in isomorphic express apps and focus on writing the business logic.