How to Develop an E-Commerce Website Using Angular 11, Paypal, and Commerce Layer?

These days, it’s necessary to have a digital presence if you are running a business. A lot of people now prefer online shopping in comparison to previous years. Getting an e-commerce site enables store owners to open up other ways of generating revenue that they couldn’t take benefit from with only a brick-and-mortar shop. Other store owners, though, operate their businesses online completely without any physical presence. And this makes having a digital store so necessary.

E-commerce websites such as Shopify, Etsy, and Amazon make it simple and quick to set up a store without worrying about building a website. There may be some cases where store owners may need a personalized experience or maybe save on the charges of having a store on some of these platforms.

Such e-commerce API platforms offer backends that shopping sites can interface with. Headless e-commerce sites manage all procedures and data concerned with the store like potential customers, orders, dispatching, accepting payments, and so forth. All that’s required is a frontend to communicate with this information. Such seamless setup offers shop owners so much flexibility when deciding how their potential customers will experience their online site/store and how they want to run it.

Here, in this blog, we will explore how to develop an e-commerce site with Angular 11. We shall utilize Commerce Layer as the headless e-commerce API (an e-commerce solution that collects, handles, and rolls out content without a front-end delivery layer). Even though there may be thousands of methods to process payments, we’ll let you know how to use only one payment method: Paypal.

Necessary Conditions

Before developing the site, you are required to have Angular CLI booted on your system. We shall utilize it to start and staging the site. However, if you don’t have Angular CLI installed yet, you can find it on npm.

Thereafter, you’ll also require a Commerce Layer developer account and credentials.  With the Commerce Layer developer account, you will have to make a test organization and then feed it with test data. Seeding with test data makes it simpler to build the app first without even thinking about what information you’ll need to use.

At last, you will successfully create a Paypal Sandbox account. Creating this kind of account will enable us to check transactions between users and businesses without risking real money. A Paypal sandbox account comprises a test personal and test business account already created for it.

Commerce Layer and Paypal Configuration

You’ll have to set up API keys in order to make a Paypal Sandbox payment possible on Commerce Layer. Now move on over to the accounts overview of your developer account. First, opt for a business account, and in the API credentials option of the account details, you will get the Default Application in the REST Apps.

To link your Paypal business account with the Commerce Layer organization, you need to visit your organization’s dashboard. Now, you will need to add a Paypal payment gateway, plus a Paypal payment method for your different markets. Under the Settings tab, choose the Payments option, then pick Paypal under the Payment Gateways tab. Now, add the Paypal client Id and secret.

Once created the payment gateway, you will have to make a Paypal payment way for each market you are aiming to make Paypal payment available as an alternative. To do so, click the Settings tab then pick the Payments option. Now locate the New Payment Method and then click on it.

App Architecture

To sort the site, we will divide it into four major categories. A better description of the functionality of each module is mentioned under their respective sections:

  1. The main module,
  2. The data/information module,
  3. Shared module,
  4. Then the feature modules.

The given modules will team together with concerning pages and components. There will be four main modules:

  1. the auth module,
  2. the cart module,
  3. the product module,
  4. the checkout module.

Assets and Styles

We need an alpha-2 country code to use when putting addresses to Commerce Layer. We’ll be required to add a json file that consists of these codes to the assets folder at assets/json/country-codes.json.

The components we’ll make share a few global stylings. We shall put them in styles.css 


The configuration will comprise two fields, one is apiUrl, and the second is clientUrl. The apiUrl should represent the Commerce Layer API. Also, the apiUrl is utilized by the services we will make to export data. Whereas the clientUrl should be the domain on which the site is running. We use clientUrl while setting redirect URLs for the Paypal payment method. 

Shared Module 

In the shared module, you will get services, elements, and pipes shared over the other modules.

It includes three components, two services, and one pipe.

Also, we shall utilize the shared module to fetch some regularly used Angular Material elements. This makes it simpler to utilize them out of the box instead of importing every component across several other modules.

Leave a Reply

Your email address will not be published. Required fields are marked *