External Data Use

Finally, the last unit in this course. It has been fun building a website from scratch and watching it evolve to something I never thought it would be possible. The step by step process works perfectly.

Now, at this stage my website is working as predicted, the only thing I need to finish the project is a functional checkout button and some social media buttons. And this is achievable by using APIs of third-party applications. The ones that will work for me are PayPal Checkout and Facebook social plugins.

PayPal API

Documentation

The only source that I was able to find was from the PayPal developer website. It was not easy for a beginner to figure out how to implement the checkout button. The document does not go in detail how to create an order and send it. It only show basic information and the rest you have to find out the hard way. Other sources that explain the process also shows only the basics, it was actually the same thing.

create Order

The first thing to do with the checkout API is to create the order that will be sent as a JSON object. This object holds information about the order, such as the total price, quantity, buyer's name address, email. This information has to come from somewhere. In my case, some data is saved in the user's browser's localStorage object. And other data will be read from a form that the user has to fill after he/she clicks on the checkout button.

The data in the form asks the user to enter his/her name, email, and shipping address. Because the API only accepts country codes I have used a list of countries with there codes. And depending on what the user chooses as a country a list of cities of that country is loaded and then the user can choose one of those cities. This task was achieved using AJAX calls and the lists were made as JSON files. In case the country chosen was Canada or the United States a province /state list is also loaded for the user to choose from.

The form is validated using HTML5 form validation only, which was enough for the moment. When server scripts are involved I will make the validation on the server side.

I have encountered some difficulties using the PayPal API when creating an order. The problem was to create the JSON object that holds the order's data. The problem was which data to include and how because the API documentation didn't have enough information, only the basics. After a long period of frustration, I got it figured out using trial and failure method also I log every error and try to understand how the object is formatted.

Facebook Social Plugins

The Facebook plugin is straightforward I only had to copy and paste the code provided on the developer page, change the attributes to my needs and that's it. The problem I had was on the mobile devices the CSS text shows at the beginning of the page and what I had to do is add a selector for the style element and make its display attribute as none.

You can visit my website by clicking here.

My website zipped version is here. 

The files used for this unit are here: