ecshop 贝宝
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.
瓦特i个超过100个核心产品和解决方案的能力，贝宝没有的产品，为中小型企业(SMB)缺乏。 我们拥有如此多样化的产品组合，以使商人可以使用PayPal开展业务。 从在他们的网站上设置结帐按钮到生成发票，再到完全在线接收付款。
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.
在成功与我们合作并开始使用商户平台之后，平均而言，SMB商户每天都会使用多种PayPal产品。 但是对于许多商人而言，入职后的体验并没有达到本应的无缝状态。
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.
我们改善了入职后的经验。 我们进行了一些更改，以使客户更清楚哪些PayPal产品或产品适合他们的业务，并且简化了我们的文档。 我们的目标是使客户使用PayPal尽可能容易地启动和运行。
In Commerce Services, we undertook the task to make the merchant experience simple, easy to start, frictionless, seamlessly integrated and personalized.
在Commerce Services中，我们承担了使商人体验简单，易于启动，毫不费力，无缝集成和个性化的任务。
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.
在我们的工程领导者的带领下，我们由出色的工程师和产品经理组成的团队提供了简化和个性化的首页体验，修订的导航以及全新的App Center体验，其中包括几种精选产品，这些都是在PayPal的保护下商务平台。
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.
如果我回溯并谈论我们的旧版仪表板体验，我们将拥有一个整体应用程序，由于紧密耦合的UI组件和服务所涉及的复杂性，要发布任何更改都需要花费很多精力。
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.
为了解决这个问题，我们采用了基于片段的方法，在前端世界中通常被称为Micro Frontend Architecture ，其中页面/路由上的UI组件在团队所有权，开发和部署方面彼此独立。 这些组分，或其片段， 打包在节点模块中 是独立发布的，具有相同的基本外观，以使页面的整体外观保持一致。 这些片段被缝合在一起，并通过业务流程服务进行服务。
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.
这是新主页的概览，其中每个部分或图块都是一个片段，即-快速链接，快速操作，余额图块， Money In，Money Out和Setup卡。
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.
这些片段主要是打包在节点模块中的React组件，但可以使用任何其他JS库(Angular，Vue等)或仅使用普通JS，HTML和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.
这些片段中的每个片段均由独立的团队拥有，开发和维护。 如果您想在PayPal上了解有关Micro Frontend的更多信息，请访问我们以前的文章的链接。
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.
从商家的角度来看，由于这些HTTP请求是并行的并且独立地加载了这些块，因此他们看到了更加敏捷，个性化和简化的体验，具有更快的加载时间和更少的错误。
High-Level Flow Diagram 高级流程图The high-level flow diagram represents the tiers of web communication we have with frontend service being the web UI.
高层流程图表示我们将前端服务作为Web UI进行的Web通信的层次。
App Center 应用中心Let’s move on to the App Center and talk about it briefly.
让我们继续到App Center并简要讨论一下。
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.
App Center是先前“工具页面”的重新定义版本，具有新的，干净的和现代的外观。 该页面由垂直堆叠的部分组成，包括个性化产品推荐以及按功能，合作伙伴和市场划分的产品分组。 它具有前端搜索功能，可帮助商人通过快速文本搜索找到合适的产品。
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.
该体验由内部内容管理服务提供动力，可根据用户的地理位置提供本地化的内容和图像，并且已认证用户和匿名用户均可使用。 我们将此服务称为服务B以供参考。
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.
在服务B的帮助下，应用中心团队能够用37个更相关的产品详细信息页面替换大约147个旧的营销页面，从而提高了产品的可发现性和SEO排名。
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!
而且，这使得团队可以通过更新Service B UI界面中的某些字段来立即进行更改，而无需部署任何代码。 现在，只需不到15分钟即可完成这些更改！
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
在顶部导航面板中，我们对链接进行了分类，并在逻辑上将它们放置在最适合它们的相应父链接下。 我们还根据所需分组创建了一些新的父链接。 例如，“ Pay＆Get Paid”是一个新的父级，其下有所有与付款相关的链接。 这使得商家更容易在一个地方看到所有链接并进行相应导航。 同样，我们添加了其他新组：*营销促进增长*融资*应用中心
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!
考虑到跨不同工程团队及其发布周期进行协调的复杂性，本文概述了我们在短短几个月内如何转变SMB商人体验。 旅程始于2019年10月，进行了一次小型的头脑风暴会议，讨论如何改善商户体验，在这里，我们在美国，英国，法国，意大利，西班牙和以色列的SMB商户帐户实现了100％的增长！
A
一种
Dtwitter!
D twitter ！
翻译自: https://medium.com/paypal-engineering/paypal-commerce-platform-a-simplified-experience-for-smb-merchants-a081248336fd
ecshop 贝宝
相关资源：贝宝支付插件 for ECSHOP UTF8.zip