PayPal Commerce Platform — PayPal simplified for small and medium businesses

Ankur Tiwari
Sep 15, 2020 · 5 min read
A laptop and a mouse on a desk
A laptop and a mouse on a desk

With over 100 core product offerings and solution capabilities, PayPal has no dearth of products for small and medium businesses (SMB). We have such a diverse portfolio that a merchant can run their business with PayPal; from setting up the checkout button on their website, to generating invoices, to receiving payouts completely online.

On average, an SMB merchant uses several PayPal products on a daily basis after they successfully onboard with us and start using the merchant platform. But for many merchants, the post-onboarding experience wasn’t as seamless as it could have been.

We improved our post-onboarding experience. We made some changes to make it clearer to the customer which PayPal products or offerings are right for their business, and streamlined our documentation. We aim to make it as easy as possible for customers to get up and running with PayPal.

In Commerce Services, we undertook the task to make the merchant experience simple, easy to start, frictionless, seamlessly integrated and personalized.

Our team of awesome engineers and product managers, guided by our engineering leadership, have come up with a simplified and personalized home page experience, revised navigation and a brand new App Center experience with a few curated products to start with under the umbrella of the PayPal Commerce Platform.

How did we make the merchant experience more seamless?

If I backtrack and talk about our legacy dashboard experience, we had a monolith app where any change would take a lot of effort to release because of the complexity involved with tightly coupled UI components and services.

To solve this, we adopted a fragments-based approach popularly known as Micro Frontend Architecture in the Frontend world, in which the UI components on a page/route are independent of each other in terms of team ownership, development and deployment. These components, or fragments, packaged in a node module, are independently published and come with the same base look and feel to keep the overall look and feel of the page consistent. These fragments are stitched together and served through an orchestration service.

New homepage experience with callouts for each section
New homepage experience with callouts for each section
Homepage

Here’s a glimpse of the new homepage where each section or tile is a fragment, namely- Quick Links, Quick Actions, Balance tile, Money In, Money Out, and Setup cards.

These fragments are predominantly React components packaged in a node module but can be built by using any other JS lib (Angular, Vue, etc.) or just vanilla JS, HTML and CSS.

Each of these fragments is owned, developed and maintained by separate teams. If you want to learn more about Micro Frontend at PayPal, here’s a link to our previous post.

From the merchant’s perspective, they see a snappier, personalized, and simplified experience with faster load time and fewer errors as these HTTP requests are parallel and load these chunks independently.

Frontend serv > fragments orchestration serv > named-fragment > downstream serv
Frontend serv > fragments orchestration serv > named-fragment > downstream serv
High-Level Flow Diagram

The high-level flow diagram represents the tiers of web communication we have with frontend service being the web UI.

The app center dashboard with callouts
The app center dashboard with callouts
App Center

Let’s move on to the App Center and talk about it briefly.

The App Center is a redefined version of the previous “Tools Page” with a new, clean, and modern look and feel. This page constitutes vertically stacked sections that include personalized product recommendations and product grouping by capability, partners, and marketplaces. It has a front-end search feature to help merchants find the right product with a quick text search.

The experience is powered by an internal content management service to serve localized content and images based on the user’s geolocation and is available to both authenticated and anonymous users. Let’s call this service Service B for reference.

With the help of Service B, the app center team was able to replace about 147 old marketing pages with 37 more relevant product detail pages, which resulted in enhanced product discoverability and SEO ranking.

Also, this enabled the team to push the changes live without any code deployment, just by updating certain fields in the Service B UI interface. Now, it takes less than 15 minutes to push these changes live!

Personalized product recommendation is powered by another node service which talks to a recommendation model and qualified business rules to recommend products/apps based on merchant profile, browsing history, and app usage.

Top Navigation Panel

In the top navigation panel, we categorized the links and logically placed them under the corresponding parent link where they fit best. We’ve also created some new parent links based on the grouping we needed. For example, “Pay & Get Paid” is a new parent with all the payment-related links under it. This makes it easier for the merchants to see all the links in one place and navigate accordingly. Similarly, we added other new groups:
* Marketing For Growth
* Financing
* App Center

To conclude

This is a broad overview of how we transformed the SMB merchant experience in a matter of few months considering the complexity involved in coordinating across various different engineering teams and their release cycles. The journey started in October 2019 with a small brainstorming session about how to make the merchant experience better, and here we are with 100% ramp with our SMB merchant accounts in the US, UK, France, Italy, Spain and Israel!

A big shout-out to the entire PayPal Commerce Platform engineering team for making this happen! 🙌

Don’t forget to give a 👏 if you like the post and follow me on twitter!

Technology at PayPal

The PayPal Technology Blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store