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.
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.
For our project we’re going to use the following views:
- index.jade (Set up payments)
- create.jade (Display the created payment and redirect to PayPal)
- execute.jade (Show all information after executing PayPal payments)
- error.jade (Display error messages)
- cancel.jade (Confirm that the payment got caneled)
Also the application’s logic in
routes.js needs to be modified slightly.
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
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
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.
Each line beginning with a
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 ;).
As the Jade file doesn’t require much logic it really just looks like this:
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.
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:
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
A detailed guide regarding deploying Node.js applications to Heroku can be found here.
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.
- Design Thinking: Out of the Classroom, Into the Fire
- How WooCommerce and Developer Agencies Optimize Payments for Small Businesses with PayPal
- New REST API Feature: Setting a Receiver for Payments
- PayPal is Now Available Through WooCommerce 2.6 Onboarding Wizard
Connect with us!
- April 2017
- March 2017
- January 2017
- December 2016
- October 2016
- September 2016
- July 2016
- May 2016
- March 2016
- November 2015
- September 2015
- August 2015
- June 2015
- April 2015
- March 2015
- November 2014
- October 2014
- August 2014
- July 2014
- March 2014
- February 2014
- January 2014
- December 2013
- October 2013
- September 2013
- August 2013
- July 2013
- June 2013
- May 2013
- April 2013
- March 2013