After setting up the project and finishing the payments implementation using the PayPal SDK we focus on adding some UI and deploying the app to Heroku.

Part 3 – UI & Deployment

Right now our application uses plain text only to display some basic information to the user. This might be acceptable for testing and playing around with a new framework but now we want to learn how to interact with the UI and how Jade can support us.

Rendering views

Having a look at the views folder you should see 2 files ending with .jade. Your app’s layout is going to be defined in layout.jade – the actual content is being placed in other files that are extend the layout file using the following syntax:

Anything in the content block will be inserted into your layout’s body tag:

If you’re new to Jade you might see that tags don’t need to be closed – this is handled by using indentation. This approach allows to write very minimalistic and clean HTML that’s less error-prone.

Needed views

For our project we’re going to use the following views:

Also the application’s logic in routes.js needs to be modified slightly.

cancel.jade

The easiest view to start with is cancel.jade. Basically we just display a confirmation and allow to navigate back to the index:

This also highlights how attributes are being defined in Jade. To do so just use brackets.

To tell Express to render cancel.jade when navigating over to /cancel we modify the export in routes.js:

index.jade

Right now nothing exciting happens when navigating over to the index. We’re going to change this by putting our forms here that allow to configure PayPal and credit card payments. This is how it would look like for PayPal payments:

I’ve left out the fields for credit cards in this example. Check out the file in my repository to see the complete file.

Instead of having a fixed amount and currency we allow for a dynamic payment. Also an optional description can be passed.

The form is executing a GET request against /create. The hidden value method is passed to tell our route that we handle a PayPal payment – this is necessary because of two forms working with the same route. To handle the passed parameters we need to modify the route in routes.js:

Using req.param('parameterName') allows to access the parameter’s value and dynamically change the payment’s details. Depending on the passed method we either create a PayPal or credit card payment.

The interaction with our Jade files happens at the bottom: If an error occurs we render the error.jade and pass the error object as parameter. When nothing goes wrong we just pass the payment object to the create.jade that we define next.

create.jade

This file needs to have some logic that should be invisible to our user. It should be flexible with receiving either credit card or PayPal payments and should only allow to redirect over to PayPal when a PayPal payment is being passed. Jade allows to do this with JavaScript expressions:

Each line beginning with a - is going to be evaluated as JavaScript and helps to dynamically create your HTML. If a PayPal payment is being passed we retrieve the REDIRECT url by iterating over all HATEOAS links. This is going to be used with a button that uses the hyperlink to redirect.

If expressions need to be displayed they’re being accessed via output buffering using the = sign. An example is h1= header which displays the header variable.

Additionally we display the payment’s information nicely formatted using JSON.stringify and the pre tag that receives our preformatted JSON. This is helpful for debugging and fun to have a look at anyway ;).

execute.jade

As the Jade file doesn’t require much logic it really just looks like this:

In routes.js we just change the callback after execution to:

This is exactely the same we did for the /create route except we don’t need to store any session information anymore.

error.jade

The last file needed is being used to display the HTTP status code and additional information that help with debugging:

Deploying to Heroku

Having elaborated on the interaction between Express and Jade, we’ve setup a very basic UI that can be used as the start of a more refined experience. To finally deploy our project to Heroku we require a few changes to our code.

‘package.json’ needs to be modified to define the versions of node and npm it requires to run on:

We need to created a new file for Foreman called Procfile that defines the required processes of your application using a simple syntax:

Asssuming you have the Git and the Heroku toolbelt installed on your machine we need to initializes an empty Git repository and create a new Heroku app:

I recommend that you ignore node’s node_modules folder by putting it into the project’s .gitignore file or your global .gitignore_global. Also add npm-debug.log to have less clutter in your repository.

Finally scale the application to just use one dyno:

Your app is now (hopefully) successfully deployed to Heroku and can be accessed via heroku open.

A detailed guide regarding deploying Node.js applications to Heroku can be found here.

Summary

We’ve used Express to setup a whole new Node.js project leveraging Jade as templating engine and the PayPal SDK to create payments using the new PayPal REST API.

Having finished this tutorial you should have learned how to setup routes and how the PayPal SDK works. Also you should get the idea about Jade and why it’s that awesome.

The final result can be seen over at pprestnode.herokuapp.com and should be somehow similar to what you have.

Please let me know in the comments if you liked this step-by-step guide and if we should redo the same for other frameworks / languages.

About Tim Messerschmidt

As a long time mobile and web developer specializing in Android, Tim channels his knowledge and experience as Developer Evangelist across Europe for PayPal’s Developer Network. Tim is very passionate about startups, and serves as a mentor of Seedcamp, Wayra, Startup Wise Guys & Rockstart. In his spare time, he leads and creates training classes in all sorts of Android related topics, and is the author of the Android chapter of the Mobile Developer's Guide to the Galaxy, as well as numerous articles published in magazines like web&mobile developer.

Tagged with:
 

2 Responses to Building a web app with Node.js & the PayPal SDK Part 3

  1. Nechtan says:

    `doctype 5` is deprecated in Jade, you must now use `doctype html`
    Nice post!