With a myriad of B2B eCommerce platforms available on the market today, choosing the best one to use to build your digital store can feel overwhelming.

From SaaS platforms to open-source platforms and open-source frameworks, you have countless options, no matter which functionality or specific technology you are looking for. However, to efficiently review your choices, it’s essential to understand your priorities.

In this guide, we will explore the best B2B eCommerce platforms, highlight their key features, and give you the criteria to use to pick the best one for your needs.

## 5 factors to consider when choosing a B2B eCommerce platform

To select the perfect solution for your eCommerce store, you need to identify your top priorities. The below five factors are crucial for ensuring both your team and your customers have a great experience with your platform.

Use these factors to compare your options and find the B2B eCommerce platform that fits your needs:

### 1. Pricing flexibility

In B2B marketing, you’ll work with diverse price points for your different customers. The best platforms have flexible pricing settings for multiple customer groups.

### 2. B2B payment methods

Choose a B2B eCommerce platform that supports B2B-specific payment methods. These options include payment by invoice, paper checks, ACH transfers, wire transfers, credit cards, and cash.

### 3. Pleasant UI

No matter how brilliant the B2B features of your commerce platform are, if the user interface is clunky and hard to navigate, it’s not a viable option. Go for platforms with an intuitive, user-friendly experience for customers, admins, and developers.

### 4. Robust scalability

You need an eCommerce solution that can grow with you when your B2B sales accelerate. You don’t want to incur costs for re-platforming when your business skyrockets.

### 5. Open source vs. SaaS

Because an [open-source](/blog/open-source-ecommerce) platform gives you full access to the source code, it’s fully customizable and scalable. However, it also comes with a steeper learning curve.

If your biggest concern is support and getting started quickly, then proprietary SaaS software is most likely a better option. SaaS platforms are hosted and run by service providers that charge a recurring fee for using their product.

## Review of 5 top eCommerce platforms

Let’s use the above criteria to examine the five top B2B eCommerce platforms:


### 1. Shopify Plus

![Shopify Plus website](https://cdn.sanity.io/images/kqgmf0g2/production/643675828bfbe9b3ccd168987493d879f0b2c156-2560x2140.webp?fit=clip)

[Shopify Plus](https://www.shopify.com/plus) is a market-leading eCommerce platform for enterprise B2C and B2B companies. Shopify powers 10,000+ global brands in 175 countries and can easily facilitate thousands of checkouts per minute. It gives high-volume brands a suite of powerful sales and marketing tools to scale, sell across multiple channels, and enter new markets.

**Features:**

* **Personalization:** Tailor your business to your customers with personalized storefronts, custom settings for different countries, and custom pricing for 133 currencies.

* **Headless architecture:** Enjoy the innovation and flexibility of a headless architecture that adapts to any device or channel, be it a website, wearable, or mobile app.

* **Ease of use:** Shopify takes care of all the backend and frontend intricacies of running an online store, so you can launch quickly and enjoy solid security and great support.

* **Large ecosystem:** Shopify is arguably the largest player in the eCommerce space, which means it has a vast ecosystem of out-of-the-box integrations and service providers.

* **Pricing:** Starts at $2,000 per month with a variable fee for higher volume sales.

* **Best for:** Fast-growing brands that net ~$1 million in revenue.


### 2. BigCommerce

![BigCommerce website](https://cdn.sanity.io/images/kqgmf0g2/production/5ee8bcead777d1bd9e084ca9a418802dbc95d5a1-2560x1866.webp?fit=clip)

[BigCommerce](https://www.bigcommerce.com/) is a renowned B2C and B2B eCommerce platform that boasts endorsements from market research companies like Forrester, Gartner, and IDC.

It’s a SaaS solution that empowers B2B businesses to take charge of their digital storefronts through API-driven flexibility. BigCommerce’s dual approach allows them to serve both B2B and B2C brands.

**Features:**

* **Multi-storefront:** Design unique storefronts for different regions and customer segments via pre-integrated apps and flexible, open architecture design.

* **Wholesale B2B eCommerce:** Offer wholesale B2B customers individualized user experiences, price lists, and a shopping cart with multiple payment options.

* **Omnichannel capabilities:** Use Codisto and Feedonomics to market your products through 150+ channels spanning social media platforms, search engines, and digital marketplaces.

* **API flexibility:** Adapt to changing customer needs and business growth requirements by using the platform’s powerful APIs to connect your CRM, ERP, PIM, and other software to accommodate new customers, product catalogs, and workflows.

* **Pricing:** Starts at $29.95 for the “Essentials” plan and custom pricing for the “Enterprise” plan.

* **Best for:** Small eCommerce businesses and large-scale merchants.


### 3. Swell

![Swell website](https://cdn.sanity.io/images/kqgmf0g2/production/f33ed866f30f6d292b153cedd9fbf4114c2a61b6-2560x1866.webp?fit=clip)

Next up in our B2B eCommerce solution rolodex is Swell, a headless eCommerce platform that provides B2B-specific functionality to cover a wide range of use cases.

With its open and extensible API, Swell is a good middle ground between the flexibility of open-source platforms and the convenience of SaaS platforms. It’s a good option if your brand has complex needs that require custom development, and you’re not afraid to get your hands dirty by coding your own storefront.

**Features:**

* **Flexible pricing:** Swell has a powerful pricing system that allows you to specify customer groups, volume-based discounts, and personalized promotions, all of which are table stakes for B2B brands.

* **Highly customizable:** Swell allows you to extend the core data models with your own attributes and concepts, enabling your dev team to customize your eCommerce experience in ways that wouldn’t be possible with the competition.

* **B2B-friendly payments:** With support for invoicing, multipart, and offline payments, Swell provides all the features you need to support payments for your B2B business.

* **Headless storefront:** Swell is a fully headless B2B platform, which gives you full control over your storefront experience. This allows you to freely and quickly iterate on the UX of your B2B shopping experience, with very few limitations.

* **Pricing:** Community plan starts at 2% of sales.

* **Best for:** Tech-savvy B2B brands with custom needs.


### 4. NetSuite SuiteCommerce

![NetSuite SuiteCommerce website](https://cdn.sanity.io/images/kqgmf0g2/production/a365f03b97983c072c8b620a0de26a48293bdb95-2560x2126.webp?fit=clip)

[NetSuite SuiteCommerce](https://www.netsuite.com/portal/products/ecommerce/products/ecommerce/b2b.shtml) is the cloud-based eCommerce solution by NetSuite, one of the leading providers of ERP software.

With NetSuite SuiteCommerce, you can manage all aspects of your business-to-business eCommerce brand, including quote management, reordering, invoicing, segment-based pricing and product catalogs.

Furthermore, NetSuite’s eCommerce solution natively integrates with NetSuite’s CRM, ERP and inventory management solutions, allowing you to manage large-scale eCommerce operations.

**Features:**

* **Scalability:** With NetSuite’s integrated ecosystem, you will get access to a suite of tools that will help you run your B2B eCommerce business by following industry-proven workflows.

* **Powerful analytics:** NetSuite SuiteCommerce offers powerful analytics capabilities, allowing you to build and save custom reports that help you drive your business forward.

* **Built-in CMS:** NetSuite SuiteCommerce’s built-in, drag-and-drop CMS allows you to make changes to your eCommerce site without development work and even schedule them to be published at a later stage.

* **Self-service account management:** The platform provides self-service account management capabilities: Customers will be able to manage returns themselves or contact your helpdesk if they need assistance with an order.

* **Pricing:** $999 licensing fee and $99 per user

* **Best for:** Mid- to large-size brands making the jump to enterprise.


### 5. Solidus

![Solidus website](https://cdn.sanity.io/images/kqgmf0g2/production/b4a8e4277a65c71ae24b0d363a33a432a4601f53-2560x2126.webp?fit=clip)

[Solidus](https://solidus.io) is an open-source eCommerce platform used by world-class B2C and B2B brands.

Based on the Ruby on Rails framework, Solidus offers eCommerce brands all the flexibility they need to build innovative customer experiences for their business-to-business brand, and provides a robust and scalable architecture that has stood the test of time.

Offering the ability to customize every single aspect of the storefront, admin panel and core business logic, Solidus is the perfect fit for B2B brands that want to offer engaging shopping experiences or need to integrate with an in-house/exotic PIM, ERP system, or other service.

**Features:**

* **Monolithic or headless:** Solidus natively supports monolithic and headless architectural models. Start quickly with a monolithic build, then transition to headless as your brand grows and you need more flexibility on the frontend.

* **Completely customizable:** Solidus offers native customization hooks for every single aspect of the customer and admin experience, as well as its internal business logic. You will be able to customize every bit of your 
eCommerce website however you like.

* **Scalability:** This is a platform that has stood the test of time, and is used by some of the world’s largest B2B and B2C eCommerce brands.

* **Vibrant community:** Solidus has a vibrant and active community of agencies, brands and contributors, all sharing their experience and know-how to help each other achieve their goals.

* **Pricing:** Free.

* **Best for:** Brands that want full control over their digital presence, to innovate and scale intentionally.

## Discover the best B2B eCommerce platform for your brand

There you have it — a curated list of the best B2B eCommerce platforms available on the market today!

To find the right eCommerce solution, look for one that has:

* The eCommerce features you want for your store(s).

* The flexibility to meet your unique business model.

* Good scalability to accommodate future growth and business needs.

Finding the right B2b eCommerce platform is one thing. Developing a seamless user experience that fits your brand is equally important. Nebulab can help you with everything from eCommerce migrations and storefront development to digital commerce strategy. No matter where you are in your brand’s journey, [we have the right service for you.](https://nebulab.com/#services)

[Get in touch today](/contact-us) to see how Nebulab can take your brand to the next level.

Top 5 B2B eCommerce Platforms for Growth-driven Brands

As funding for headless commerce platforms reached a staggering [$1.6 billion](https://www.forbes.com/sites/forbestechcouncil/2021/05/11/why-is-headless-commerce-getting-16-billion-in-funding/?sh=5322b28f513a) in 2021, these systems aren’t to be ignored. But how exactly do they compare to the so-called traditional “monolithic” eCommerce platforms, and when should you pick one over the other?

This guide will explore the headless commerce model, its benefits, how it differs from the all-in-one monolithic commerce system, and when it’s a good option for your brand.

## What is headless commerce and how does it work?

Headless commerce is an eCommerce architecture where the frontend layer, or presentation layer, is decoupled from the backend commerce functionality.

Before we continue, let’s review the key differences between the frontend and backend:

* **Frontend:** This is the user interface. Customers see and interact with the frontend, whether they’re accessing your eCommerce site, shopping app, digital kiosk or other shopping channels.

* **Backend:** The backend is the behind-the-scenes, technical side of an eCommerce store the customer doesn’t see. The backend includes the technologies and tools that run in the background to ensure customers can shop and [have smooth checkouts](/blog/one-page-checkout-with-spree).

In headless commerce, the frontend and backend systems communicate via Application Programming Interfaces (APIs). This approach allows you to update the frontend, the customer-facing part of your site, independently of the backend and even use different development frameworks. This separation of concerns offers several benefits which we’ll explore below.

Examples of headless eCommerce solutions are Commerce Layer, Swell, and Nacelle.


## 4 benefits of headless commerce

![Woman lying on a couch and using a laptop](https://cdn.sanity.io/images/kqgmf0g2/production/96998b94bc1edf8908d27f5af24b1a34e88c56a8-1200x797.jpg?fit=clip)

Platforms that adopt a headless architecture offer several benefits compared to monolithic, or so-called traditional eCommerce platforms. Here are the top four advantages.

### 1. Omnichannel capabilities

In an omnichannel eCommerce experience, customers can start shopping on one channel or device and transition seamlessly to a different channel while the brand retains key information: common examples are a customer completing their purchase online, but selecting in-store pickup, or a customer buying something in-store and having the order show up their online order history.

Headless commerce makes it easy to serve the [74% of shoppers](https://www.salesforce.com/content/dam/web/en_us/www/documents/research/salesforce-state-of-the-connected-customer-4th-ed.pdf) who use multiple channels to shop: because the same backend system can serve multiple storefronts, you can easily adapt customer touchpoints and shopping experiences to serve your eCommerce website, your mobile app, social media pages, and even physical locations. All will be completely integrated and feel seamless for your customers to interact with.

### 2. Technical flexibility

By decoupling backend and frontend, headless platforms allow your development team to pick the frontend stack, including third-party providers, that they’re most productive with. A headless architecture allows you to adopt your favorite content management system (CMS) to create rich editorial experiences, or elevate your storefront through progressive web apps (PWAs). This enables you to create engaging digital experiences that don’t face the limitations of traditional monolithic frontends.

When done right, headless architectures even allow you to refactor or completely replace entire parts of your backend with little to no impact on your frontend experience(s), which allows you to move and experiment much more quickly.

### 3. Superior personalization

Most monolithic eCommerce platforms severely limit your ability to personalize the customer experience by forcing you to work with proprietary templating language and preventing you from accessing customer data. With [80% of customers](https://www.epsilon.com/us/about-us/pressroom/new-epsilon-research-indicates-80-of-consumers-are-more-likely-to-make-a-purchase-when-brands-offer-personalized-experiences) indicating they prefer brands that offer tailored experiences, eCommerce personalization is now table stakes for modern brands.

Headless platforms allow you to not only leverage basic eCommerce data, such as a customer’s profile and order history, but even augment it with brand-specific data points of your own. This allows you to create shopping experiences that feel built for your customer, boosting customer engagement, conversion rates and AOV.

### 4. Blazing fast performance

Storefronts that leverage a headless eCommerce platform can typically be deployed as static sites and put behind a global content delivery network (CDN) such as Cloudflare. In the hands of a capable development team, this can lead to incredible performance that would be hard to achieve with a monolithic platform.

A 2019 study by Portent has found that improving your loading speeds can boost your conversion rates [anywhere from 1.5X to 2.5X](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm)! If your eCommerce site loads slowly, you are leaving lots of money on the table—literally.

## 3 drawbacks of going headless

![Four programmers working at same office's table](https://cdn.sanity.io/images/kqgmf0g2/production/0afcfb4759febba635d79b5004c9a4cf4c8c2242-1200x800.jpg?fit=clip)

In some cases, a headless build can lead to an unnecessarily complex architecture that causes more problems than it solves. Evaluating which eCommerce platform to use for your business needs is a complex process that should take into account both short-term and long-term factors as well as your budget and internal capabilities.

Here are three drawbacks of headless eCommerce platforms.

### 1. Technical capabilities

Launching a headless storefront requires you to create an in-house engineering team or hire an eCommerce agency for the long term. Headless sites require more ongoing maintenance to keep the lights on: Dependencies need to be updated, infrastructure needs to be maintained, and the site needs to be continuously monitored for bugs and performance issues.

In our experience, this additional effort has its upsides: It forces brand operators to get into a continuous optimization mindset, where they’re constantly identifying and capitalizing on new technology and other opportunities that can improve the shopping experience. Monolithic platforms, on the other hand, encourage a less intentional set-and-forget approach, which is definitely easier to execute, but also worse positioned for long-term scalability.

### 2. Time-to-market (and cost!)

Headless builds are typically associated with slightly higher timelines than monolithic builds. Adopting a headless architecture requires a significant investment in an agency or an in-house development team that will build your storefront, and this process can take anywhere between 2 and 4 months, depending on the complexity of the build.

Conversely, launching a store on a monolithic platform can be a much faster process with more competitive pricing, if you’re willing to settle for a more standardized look and purchase experience. This can be an acceptable compromise for smaller mom-and-pop businesses, but certainly not for a direct-to-consumer (DTC) brand with large long-term aspirations.

### 3. Integration effort

Headless eCommerce platforms are very flexible because you have full freedom to implement your storefront however you want. Unfortunately, this also means that many of the integrations and plugins that you can use out of the box with a monolithic platform will require a bit more work to be integrated in a headless architecture.

If you want to add reviews to your headless eCommerce website, for instance, you’ll need to work with your designers and engineers to figure out what the experience should look like, where to place the reviews, when to ask for them etc., and then implement and test the new functionality.

Ultimately, this extra effort is a good thing: A headless system asks you to be more disciplined and intentional in how you modify your storefront. This will force you to approach all initiatives with a critical eye rather than jumping from trend to trend, but it can be frustrating if you’re used to installing a plugin and forgetting about it.


## The verdict: headless or monolithic?

![Woman holding a credit card and using a phone](https://cdn.sanity.io/images/kqgmf0g2/production/cb3e8d957a2c46acdf1eda32e9cecd9c5173bf13-1200x800.jpg?fit=clip)

The answer is: It depends on the use case. There’s no right or wrong answer.

While a headless commerce architecture has myriad benefits over monolithic architectures, it’s not ideal in all contexts. In certain scenarios, a headless commerce approach is the best way to build your vision and drive superior brand performance, while in others, you’re better off with a monolithic architecture that saves you time and money.

Headless commerce solutions might be right for:

1. **Brands that want to offer a consistent customer experience across channels:** Any brand that wants to deliver consistent customer experiences regardless of channels or devices should consider adopting this architecture.

2. **Brands that feel their current platform is too rigid and restrictive:** If you’ve ever felt your platform is limiting on the backend or frontend, it’s time to switch to a flexible headless setup.

3. **Brands that put personalization front and center:** If personalizing the shopping experience is critical for your brand’s strategy, then you should explore the capabilities that a headless build will unlock for your development team.

4. **Online stores that have slow-loading pages:** If sluggish pages have been a pain point for your eCommerce store, a headless architecture may be able to help by allowing you to leverage a more robust frontend ecosystem.

On the other hand, monolithic builds are a good solution for:

1. **Brands with limited technical know-how:** Headless commerce requires stronger technical capabilities which might not be everyone’s cup of tea. If you want to launch a commerce website without dealing with the underlying technicalities, headless is not for you.

2. **Brands with time-to-market or financial constraints:** If you’re on a tight timeline or a limited budget, a monolithic build will very often prove cheaper and quicker to launch than a headless counterpart.

3. **Brands that want ready-made functionality:** If you want to leverage ready-made features and integrations without thinking too deeply about how to integrate them in your shopping experience, a monolithic platform will give you more peace of mind.


## Need help picking the right platform?

![Entrepreneur using his phone and laptop](https://cdn.sanity.io/images/kqgmf0g2/production/97e367e0de824649a05070d381052e44e0ca20e4-1200x801.jpg?fit=clip)

Headless architectures allow teams to move faster, address changing consumer needs, improve the user experience, and capitalize on omnichannel opportunities, but they’re not ideal for all brands.

Nebulab can help your new digital brand pick the right eCommerce platform for a greenfield build, or help your established brand design the right tech stack for its next growth spurt. We offer full-service consulting throughout all stages of your eCommerce project.

[Reach out](/contact-us) to see how we can help you create a vision for your eCommerce experience.

Headless Commerce: The Good, the Bad and the Ugly

### Intro

**3D illustrations are a trend of web design in 2021:** reality and virtual reality are getting closer and closer. The combination of 3D shapes and effects in the 2D space is a great example of this trend in action. This is the right time to start learning something new, then!

At Nebulab, every employee has a bunch of hours to spend on personal projects, trying new tools, or studying to improve their skills and professionalism, so I decided to spend some hours of my [Investment Time](https://playbook.nebulab.com/personal-growth/investment-time/) developing a new skill that is useful for creating trendy illustrations and animations. I want to share my design process and what I’ve learned along the way.

### Spline 3D, nice to meet you!

I’ve always been fascinated by 3D design. Several years ago I tried Blender but I found it very complicated: the environment was very far from the applications that designers like me use, and since it wasn’t a must-to-have skill at that time, I gave up very soon.

This time I approached again to the three-dimensional design by using a brand new tool that makes 3D easier for a not-3D designer like me. This tool is [Spline](https://spline.design/): its interface is very similar to the majority of other design apps like **Figma**, for example. On the left side, there’s the layers panel while the tools used more frequently are on the top of the window. On the right side, you can find all the other options like Global Settings, Shape options, Camera Settings, etc.

### Initial phase: copy, try, repeat

When I start to develop a new skill, my approach is: learning the foundation, seeing how others do it, and playing with features and effects. Mostly, **having fun.**

Since Spline 3D was launched quite recently, you won’t find tons of tutorials on YouTube but there is a useful [documentation](https://docs.spline.design/) that gives you an overview of what (and how) you can do with Spline. Moreover, there’s a library where you can find illustrations and animations for playing with all the features.

![iPhone 12 3D mock-up, by Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/025512f4b8e8134e5685c24024004f3f5c314035-1680x1027.jpg?fit=clip)
*This is the original mock-up of the Spline library.*

![iPhone 12 3D mock-up, customized with the Nebulab website and brand color](https://cdn.sanity.io/images/kqgmf0g2/production/35badac7709f3f9ec8613d94bbd9e1a112b21fcf-1680x1027.jpg?fit=clip)
*This is the customized version I did, starting with the mock-up above.*


##### Camera operations

One of the first things I’ve learned is how to change views by using camera controls.

* **[Option / Alt] + drag** to rotate the screen (camera).

* **Press [Space] + drag** to move the camera around the canvas.

These controls allow you to simulate different views of your canvas and let you understand how three-dimensionality works.

##### Materials

In Spline, there’re **7 types of Material** thus the Lighting layer: initially, I was wondering about having more options for creating awesome 3D color effects, but then I sooner understood that mixing just two or three material layers thus the Lighting one, lets you create a lot of combinations and you can easily find yourself spending two hours or more on it because you can’t decide which one you like most! That’s why I think is better to complete the illustration as the first thing, adding some animations eventually, and then focus on the colors and lights. The simplest three-dimensional effect is given by the **Lighting** layer (try to fill your object with a color and move the Lighting layer above).

![Spline 3D, lighting material](https://cdn.sanity.io/images/kqgmf0g2/production/26e42163d282f174007aa0b35014236c9a350ca1-1680x896.jpg?fit=clip)

Adding a gradient by the **Gradient** layer seems a bit flat to me; a more precise method for adding gradient (or depth) to your objects is the **Depth** layer.

![Spline 3D, gradient vs depth material](https://cdn.sanity.io/images/kqgmf0g2/production/4f53e9f9ce19327d998a4750da1fd08003197cd6-1680x997.jpg?fit=clip)
*Gradient material vs Depth.*

### Playing with Material for creating something cool

Another design trend in 2021 is **holographic and reflective elements.** You can create these two effects using the **Texture** material: import your holographic background (stock images or created using Photoshop), and edit the texture properties until the result satisfies you.

[![alt](https://cdn.loom.com/sessions/thumbnails/b987486fc5ec4739982150c9e97e13d8-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/b987486fc5ec4739982150c9e97e13d8-00001.mp4)

*An example of how to use the Texture tool for creating the holographic effect.*

Use **Fresnel** for creating a reflective effect like this ring I did:

[![alt](https://cdn.loom.com/sessions/thumbnails/360368ebe5fd40e8b46bab7bc5a2f322-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/360368ebe5fd40e8b46bab7bc5a2f322-00001.mp4)

For each Material layer, you can set the mode property and the layer opacity as you’d in Photoshop (normal, multiply, screen, overlay).

##### Tricks that can save your time

* You can **copy/paste material** from an object to another. **(▲)**

* With the **Cloner** tool, it’s possible to clone an object and you can set the number of clones you want, the *Type* (how the clones are placed on the canvas - radial, linear, grid), and you can adjust the position, rotation, and scale them.

* With the **Visibility** mode, you can display the wireframe of a 3D object (and that might be a cool effect for your artwork!).

**(▲)** While I was writing this article, Spline has released the Alpha II version that introduces the web app and the **Material Assets** feature: now is possible to save Materials as assets on your project!

[![alt](https://cdn.loom.com/sessions/thumbnails/f99dd970a5574e93a80cb4cfa5362576-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/f99dd970a5574e93a80cb4cfa5362576-00001.mp4)
*The new feature, Material Assets, works like Figma.*

### Starting from a blank canvas

After the discovery phase, I felt ready to start with something simple like an infinite rotation of the Nebulab logo as if it was an app icon. Spline 3D lets you **import SVG** files and after the Alpha II version was released, you can use the **Extrusion** tool to transform flat shapes into 3D objects.

![Spline 3D, extrusion](https://cdn.sanity.io/images/kqgmf0g2/production/d36903c4141a571eaaefb59987465a70673f8418-1680x1291.png?fit=clip)

![Nebulab 3D logo](https://cdn.sanity.io/images/kqgmf0g2/production/f23079e867385dba280f291061465ae64d65e9d1-3584x2240.jpg?fit=clip)

### Let’s move it!

Now that I have the Nebulab logo as a shiny bold blue cookie, I want to add a simple animation. I browsed on Dribbble looking for some inspiration and then I opted for a rotating animation with a final ease-out motion.

##### Understanding States and Events

At the top of the right menu, you can find States and Events. Playing with animations with Spline is pretty simple (like everything else 😃) also because you can see the preview whenever you want, by clicking the Play button on the topbar tools.

![Spline 3D, the animation preview is always available](https://cdn.sanity.io/images/kqgmf0g2/production/330dcd7d5bf7cd1ff5585d336e2be6a5d1e32fb0-906x198.png?fit=clip)

To make my first animation, I need two states:

* *Base State*, is the initial position or style of an object.

* *State 1*, which changes the previous state values.

You can change the position and/or the aspect of your object. In this example, I rotated the entire logo on its axis.

[![alt](https://cdn.loom.com/sessions/thumbnails/ed27166d1b6d43ba8a1b1f7fc589c3f6-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/ed27166d1b6d43ba8a1b1f7fc589c3f6-00001.mp4)

Now, these two states need a trigger that you can add by the **Event** panel. (**Be sure to have selected Base State** and then add a new event). **Select the type of trigger for the event**:

* *Mouse up, down, hover*, that you can use to create a button and you can even link to an external URL.

* *Key up, down*, that is the same as the mouse types but it requires adding the key you want that triggers.

* *Start*, the animation will start by itself.

* *Look at*, this reply the cool effect of moving objects when the user pointer passes over the active area.

* *Follow*, the object is linked to your user pointer as a magnet.

I wanted my animation fired automatically, so I selected the *Start type*. I’ve previously grouped all the shapes that compose the logo, so I had one object to select for the event that I was creating. While the state to select, is *State 1*.

![Spline 3D, states and events](https://cdn.sanity.io/images/kqgmf0g2/production/f094307692892d64a34817160faa61abc5ba65ae-1680x1050.png?fit=clip)

You can decide to repeat the animation infinitely, or just once. Then you can select the **Transition** type; if you know a bit of CSS these names should sound familiar to you: linear, ease-in, ease-out, ease-in-out, cubic (which is like the CSS *cubic-bezier*). I’ve played with these all but in the end, I opted for the Spring transition because I like damping effect on this kind of animation. About the Spring transition, you can play with its values since you won’t find the combination that satisfies you.

[![A video showing 3D animation configuration](https://cdn.loom.com/sessions/thumbnails/4adb76bc402d4b558d099dae004a6a2f-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/4adb76bc402d4b558d099dae004a6a2f-00001.mp4)

And that’s it! You can apply different effects to every single object by adding *State 1* on it and then add the object to the main event by the ***“Add a new object to event”* button.**

[![A short video of the Nebulab logo 3D-animated](https://cdn.loom.com/sessions/thumbnails/ba16d29395e2458aa393761f06939fef-with-play.gif")](https://cdn.loom.com/sessions/thumbnails/ba16d29395e2458aa393761f06939fef-00001.mp4)
*This is the final animation*

### Don’t limit yourself

As I said before, what matters is having fun! Having the freedom to create whatever you like lets you experiment with a greater variety of features, and makes you more confident with the tool.

![3D artwork done with Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/eefd0a35280995051e73c67e691e681383f8a038-1680x1260.jpg?fit=clip)
*This is my first 3D artwork in which I played with materials, colors, and shapes.*

Even if it seemed simple (not a “WOW” illustration), I didn’t want to limit my experiments to what is trendy at the moment. I just wanted to create something for myself, as an artist draws to express their feelings. Ok, well, maybe I’m exaggerating, but what drove me when I designed that artwork was just creativity, nothing more. I’m pretty sure that looking at it in a month, I’ll say to myself something like *“How could I be so proud of that illustrationMouse up, down, hover,”* and then I’ll be back to revisit it, trying to push my boundaries a bit more.

![The Nebulab Solar System in a 3D version](https://cdn.sanity.io/images/kqgmf0g2/production/6d1e6fabee08ed85aaa418b928d34822fae9785a-1680x1260.jpg?fit=clip)
*I’ve redesigned all the planets of the Nebulab website with Spline. In this illustration, I included them in the Solar System.*

![3D character done with Spline 3D](https://cdn.sanity.io/images/kqgmf0g2/production/7519216a0df3a358ebba7d983ede50e569d51b7b-1680x1150.jpg?fit=clip)
*My first 3D character, a tribute for the running Olympic games.*

### How 3D design supports your workflow

Even if you’re not a 3D artist (and if you’re reading this article I suppose you aren’t) knowing how to create 3D objects or scenes can be very useful. You can create tailored mock-ups for a mobile app, for example, or adding some catchy objects that interact with the user pointer on your website.

![The Blog page hero with some 3D objects](https://cdn.sanity.io/images/kqgmf0g2/production/abc58349dae18f451b8da3506d386b92cd952481-1680x1260.jpg?fit=clip)
*I’ve tried a white version of the Blog hero with some 3D objects that interact with the pointer.*
[See the sample in action.](https://www.loom.com/share/0192deb8d73b41fdb55ed361f0b1c3a8)

[![Final animation videoclip](https://cdn.loom.com/sessions/thumbnails/0384abffdff0454c9b94eda02ccc272e-with-play.gif)](https://cdn.loom.com/sessions/thumbnails/0384abffdff0454c9b94eda02ccc272e-00001.mp4)
*You can even use this to show off a new website or mobile app, with a trendy minimalistic animation like this one.*

Surely, there’re tons of mock-ups you can download and use but having the flexibility to create your own is extremely better, even in terms of marketing.

### Outro

I’m happy to have spent some hours of my *Investment Time* learning Spline 3D! Truthfully, I’m still experimenting with it, but what I have done so far has given me an incentive to continue learning this modern, trendy tool and to go deeper into the 3D world.

Trying 3D design for the first time

As a designer, you might be scared to handle data, dredge through (horrible) data charts, or decipher complicated formulas on an XLS file. But, if you want to achieve the goals you defined before starting a new project and measure your success, these tools are a necessity!

First, you have to define Key Performance Indicators (or KPIs). For example, what is your desired outcome? How are you going to measure progress? **A KPI is a measure you would use strategically to track the performance of your project.**

As an example, our primary goal on the Nebulab website is to increase lead generation. So we placed a major call to action (CTA), “Get in touch!” always visible and easy to find: one in the header, one in the hero, and one in the footer. To figure out which one performs better (and on which page), we’ve been tracking each CTA with **Google Tag Manager** and collecting data from **Google Analytics**.

The results from tracking this goal found that the CTA which performs better is the one in the header, even though we’ve repeated the same CTA with a bright background color (yellow) on the left side of the hero. In this instance, the bright color doesn’t matter, but the position of an element is more relevant.

![Heatmap on Nebulab home page](https://cdn.sanity.io/images/kqgmf0g2/production/9097ae5ee7a95b9ee360a3b3bf73e41f6eec4cc2-1680x790.jpg?fit=clip)
*A detail of the heatmap on our website: it’s clear that the CTA in the header wins over the one in the hero.*

Many tools such as HotJar can provide information on which CTA is performing better than another. However, utilizing Google Tag Manager (**GTM**) with Google Analitycs (**GA**) lets you measure the number of clicks on every single CTAs per page, and **it also helps you understand if the design provides the best user experience.** Plus, it gives you an idea about WHAT to improve and HOW. For example:

![Google Analytics - Detail of the total clicks on the main CTAs](https://cdn.sanity.io/images/kqgmf0g2/production/980f7cd28abe626ca08720dc72276ae2b6cedb2d-1680x353.jpg?fit=clip)
*The Events Overview on Google Analytics: see the difference between the two main CTAs (Header and Hero)*

The ***Total Events*** are the number of clicks done. You can notice the difference between the *CTA - Header and the CTA - Hero*. To determine the effectiveness of the design, we will measure KPIs at the end of the month so we can do an A/B test with the hero’s CTA and see what happens if changing the color, for example, increase the leads number. We can continue to repeat the process and modify parameters until we maximize our monthly clicks.

**This is a basic ready-to-use guide** to enable event tracking on a simple CTA. Sign in to Google Tag Manager and follow the steps below. Let’s start!

### Create a new TAG

![Google Tag Manager, configuration of a Tag](https://cdn.sanity.io/images/kqgmf0g2/production/28c6654e6aa2d510f683011ed1f4bedbe421fb69-1680x1589.jpg?fit=clip)

* **Tag type: GA: Universal Analytics**

* **Track type: Event**

* **Category**: the name you choose to create here will be shown on GA on the Events section as Main Event. This is the macro category that helps you to identify the event type, so calling it CTA Clicks, for example, it’s fine.
Action: you’ll find this name on GA as well. This refers to the action related to the CTA, try to be specif here, for example: ***Click on demo***, or Click on contact us, and so on.

* **Label**: the Label will help you later identify, on GA, the total number of clicks on a specific button. It could be custom or built-in: the ***Click Text*** one is useful if you don’t want to specify it in the Trigger - also because the CTA’s text could change in the future. I usually use the ***Page Path*** label to have a better overview (on GA) of which pages have the higher number of clicks.

* **Non-Interaction Hit: leave it the default value** *(False)*. This because the tag will be interpreted as a user interaction by GA (and therefore will prevent a single-page session from being recorded as a bounce).

* **Google Analytics settings**: select the custom variable that includes your Google Analytics tracking ID (if you haven’t already created it you can [jump at the end of this article](#test-it) and follow the steps described.

### Create a new TRIGGER

![Google Tag Manager, configuration of a Trigger](https://cdn.sanity.io/images/kqgmf0g2/production/d914ea3c108a66875d50a86bd32bd3cab873c931-1680x768.jpg?fit=clip)

Now you need a trigger that fires the event when some specific conditions occur.

* **Name**: find a name that explains the action (Click) of the CTA you want to track (Demo CTA). For example: ***Click on Demo CTA.***

* **Trigger type**: select **Click - All elements**

* **Fires on**: select **Some Clicks**

* **Set up conditions**: you can activate it when the variable *Click-classes* contains the class “button” or other specific classes. If you think the *Click-text* is very specific and it doesn’t change (if the action remains the same, for example: ”View the demo”) you can use the condition: *Click-text contains demo*. You can be more specific by adding further conditions.

### Test it

Done! Now you can test if everything is working on the **Google Tag Manager preview**. When your work area is published you can do a **double-check with Google Analytics**: open the *Realtime* section on GA and click on a CTA (in another browser tab). If the event has been fired correctly you should see it under the *Events* subsection.

![Google Tag Manager, preview of tags not yet fired](https://cdn.sanity.io/images/kqgmf0g2/production/515776922416e908e20c4bc2add81546baab60fb-1681x557.jpg?fit=clip)
*Tag not yet fired on Google Tag Manager Preview*

![Google Tag Manager, preview of tags fired](https://cdn.sanity.io/images/kqgmf0g2/production/75d1dd86a707ad683ba1886a687323b9dee185b7-1680x307.jpg?fit=clip)
*Tag fired on Google Tag Manager Preview*

![Google Analytics, realtime preview](https://cdn.sanity.io/images/kqgmf0g2/production/68ea0be24d8f204a19a86ca79ced0babaf490308-1680x567.webp?fit=clip)
*Tag fired on Google Analytics - realtime*

### Tips to track it on Google Analytics

Now that you have set up the events, let’s take a look at the results you’ll get on GA.

On the **Behavior > Events** page you can get an overview of all your Events Type (if you’ve followed this article here you should see the macro category *CTA Clicks*).

The most important category is the **Events Action** where you have all the CTAs you’re tracking. On the **Events Label** category you can view at the first glance which pages have the higher number of clicked CTAs (if you’ve set up the label as *Page Path*).

To view how many clicks a CTA got on which page, open the **Events Action** tab and select the Secondary Dimension in the search options. In the **Commonly Used** you can find filters like *Events Label* and *Page* (which is basically the same if you’ve set up the Events label as the *Page Path*).

![Google Analytics, Events search detail](https://cdn.sanity.io/images/kqgmf0g2/production/6c4a13987883e4a49e55688f10528160cd5412ba-1634x720.jpg?fit=clip)

### How to include Google Analytics on GTM

#### Create a new constant variable of your tracking ID

![Google Tag Manager, creating a new constant variable](https://cdn.sanity.io/images/kqgmf0g2/production/a47a109df84641c4927df2eb9ae1d0669faa91c9-1680x654.webp?fit=clip)

* Create a **new Variable**, calling it ***GA-Tracking ID*** for example

* **Variable type**: Constant

* Add your **Google Analytics Tracking ID** *(UA-XXXXXXX)* as the value

#### Create the custom variable of GA

![Google Tag Manager, creating the custom variable for Google Analytics](https://cdn.sanity.io/images/kqgmf0g2/production/5da64df16a3252cb559aaf71f0027621e3b9d9a7-1680x757.webp?fit=clip)

* Create a **new Variable**: you can call it ***GA-Settings***

* **Variable type**: *Google Analytics Settings*

* **Tracking ID**: you can select the constant variable you’ve added before ***GA-Tracking ID***

* **Cookie domain**: leave the default ***Auto***


The aim of this article is to give an overview of how you can set up and work with Google Tag Manager along with Google Analytics. These are powerful tools that every designer can use to collect some data and help them making functional designs that drive users through their journey on a website.

Measure goals with Google Tag Manager & Google Analytics

In this article, we are going to show how you can create a [NextJs](https://nextjs.org/) project with [Storybook](https://storybook.js.org/) and [TailwindCSS](https://tailwindcss.com/).

Before starting, I want to explain who are the actors and why it should be better adding them to our frontend application.

### NextJS

[NextJS](https://nextjs.org/) doesn’t need a lot of presentation. If you are here, you probably already know what NextJs is and why we should use it to build robust applications.

NextJs is a great [React](https://it.reactjs.org/) frontend framework, and it’s mainly used to build SEO-friendly applications since you can use three different types of rendering/pre-rendering methods:

* SSG (Static-site generation) the HTML is generated at build time and will be reused on each request,

* SSR (Server-side rendering) the HTML is generated on each request using a node server, so the response is SEO-friendly.

* CSR (Client-side rendering) the normale React behavior, the response is simply Javascript run by the client.

### TailwindCSS

Tailwind is one of the most powerful libraries to build your application style using HTML classes. [TailwindCSS](https://tailwindcss.com/) implements a ton of dynamic classes which apply different style rules to your application, and it is fully customizable using the configuration file!

Initially it will take time to understand which are the correct classes you need to use to build your interface, but one of the coolest thing in Tailwind is its super documentation.

By the way, the 2.0 version has recently been released with a lot of new features.

### Storybook

[Storybook](https://storybook.js.org/) is a great library that is mainly used to render our application components outside the NextJs environment. This means that you can check your components UI without making real queries or fetching data. You can also figure out how the application components change based on the passed props.

Storybook is more powerful when used with well-organized components, for example, using [Atomic Design(https://bradfrost.com/blog/post/atomic-web-design/).

**Example**

You will probably create your custom `Button` component in your project that will be rendered differently based on the passed props or the fetched data. With Storybook, you can check all the UI changes applying custom props from the Storybook panel or stubbing all your requests.

### TL;DR

Here you can find the fully configurated [project](https://github.com/nebulab/nextjs-storybook-tailwindcss)

## Let’s start!

For this article, I won’t split the application into components to be more direct. It would be best to do it in a real application to avoid using the `index.js` page directly.

The best practice is writing components splitting them by context using a great file structure:

* React documentation about components: [link](https://it.reactjs.org/docs/components-and-props.html#extracting-components)
* Atomic Design pattern about components structure: [link](https://bradfrost.com/blog/post/atomic-web-design/)

### Create the NextJS app

First of all, run this command to create your NextJs project:

```
npx create-next-app --use-npm nextjs-storybook-tailwindcss
```

and navigate inside the project directory with `cd nextjs-storybook-tailwindcss`.

### Run your application

```
npm run dev
```

### Refactor the default code

The `create-next-app` command creates the project with some unnecessary configuration since we’ll use **TailwindCSS** to build our style.

Replace the content in `pages/index.js` with:

```
const Home = ({ article, showImage }) => {
  if (!article) return "The article wasn't found!"

  const {author, company, image_url, content} = article

  const Image = showImage ? (<img className="w-24 h-24 rounded-full mx-auto md:flex md:self-center"
    src={image_url} alt="A beautiful cat" width="200" height="200" />) : ''

  return (
    <div className="w-96 mx-auto">
      <div className="h-screen flex items-center">
        <figure className="lg:flex bg-gray-200 rounded-xl p-8 lg:p-4">
          {Image}
          <div className="pt-6 lg:p-4 text-center lg:text-left space-y-4">
            <p className="text-lg font-semibold">{content}</p>
            <figcaption className="font-medium">
              <div className="text-blue-600">{author}</div>
              <div className="text-gray-500">{company}</div>
            </figcaption>
          </div>
        </figure>
      </div>
    </div>
  )
}

Home.defaultProps = {
  showImage: true
}

export const getServerSideProps = async () => {
  const response = await fetch('http://localhost:3000/api/article')
  const data = await response.json()

  if (!data) return { props: {}}

  return {
    props: {
      article: data
    }
  }
}

export default Home
```

Add your first API:

```
touch pages/api/article.js
```
```
const Article = (_, res) => {
  res.statusCode = 200
  res.json({
    id: 1,
    author: 'Andrea Vassallo',
    company: 'Nebulab',
    image_url: 'http://placekitten.com/200/200',
    content: 'The cat is a domestic species of small carnivorous mammal.'
  })
}

export default Article
```

Remove the CSS file: `styles/Home.module.css`:

```
rm styles/Home.module.css
```

![Nextjs without style result](https://cdn.sanity.io/images/kqgmf0g2/production/cf125dfe5106852987ebfd778e133fe4566ef324-537x357.png?fit=clip)

![Man pointing thumb down](https://cdn.sanity.io/images/kqgmf0g2/production/f804d6533a925773c96bc9055cd7aae96d76c578-640x480.gif?fit=clip)

The result is an ugly and boring HTML page.

**Let’s go applying our awesome style.**

### Install TailwindCSS

*Why the documentation isn’t enough in this case?*

Because NextJS came up with a bunch of pre-configured services like Babel and [PostCSS](https://postcss.org/) and we have to TailwindCSS with them.*

Reading the [TailwindCSS documentation](https://tailwindcss.com/docs/installation), you’ll see that we need three different libraries to complete the installation:

* tailwindcss

* postcss

* autoprefixer

We don’t need to install postcss and the autoprefixer libraries since they are already installed in NextJs.

Run these commands to install TailwindCSS:

```
npm install --save-dev tailwindcss
```

Unfortunately, we can’t use `npx tailwind init` to create the configuration file since it’ll check if you have installed the `autoprefixer` library.

Let’s create the configuration file adding the `tailwind.config.js` file:

```
touch tailwind.config.js
```

with the default configuration:

```
module.exports = {
  purge: [
    // This is not present inside the default configuration
    // but it's good to build your production application
    // Read more about this here: https://tailwindcss.com/docs/installation#building-your-css
    './pages/**/*.js',
  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

### Configure PostCSS

To configure PostCSS we have to override the [NextJs default one](https://nextjs.org/docs/advanced-features/customizing-postcss-config):

Install the dependencies:

```
npm install --save-dev postcss-flexbugs-fixes postcss-preset-env
```

Create the `postcss.config.js` file:

```
touch postcss.config.js
```

and fill it with the default configuration as well:

```
module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}
```

Add the `tailwindcss` plugin to the top of the plugin list:

```
module.exports = {
  plugins: {
    tailwindcss: {},
    ...
  },
}
```

### Include Tailwind in your CSS

Add these three lines of code to the top of this file: `styles/globals.css`:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### We made it

Check your application homepage; the result should be similar to this one:

![Tailwind result](https://cdn.sanity.io/images/kqgmf0g2/production/8610b447fdcea90e798a8e33440326e498f8cbba-485x292.png?fit=clip)

![](https://cdn.sanity.io/images/kqgmf0g2/production/ef653b4c8ced24daaf9d3b865d207d11b7b905bb-700x394.gif?fit=clip)

## State of mind

From here on, it’ll be a breeze building beautiful component with Tailwind, but we need to answer a couple of questions about testing:

1. How is this component rendered when the article data isn’t found?

2. How can we check all the component variants at any moment without changing the code?

[Storybook](https://storybook.js.org/) will help us to accomplish both.

### Install Storybook

The default `npx sb init` command that is used inside the official documentation installs libraries that we don’t need and adds a bunch of files that we don’t use.

For that reason, I usually prefer to use the `from scratch` configuration.

```
npm install --save-dev @storybook/addon-actions @storybook/addon-essentials @storybook/addon-links @storybook/react
```

Add the Storybook commands inside the `package.json` scripts:


```
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "storybook": "start-storybook -p 6006",
  "storybook:build": "build-storybook"
}
```

Copy this piece of code inside the `.storybook/main.js` file

```
module.exports = {
  "stories": [
    // Paths to the story files
    "../pages/*.stories.mdx",
    "../pages/*.stories.js",
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}
```

Copy this piece of code inside the `.storybook/preview.js` file

```
// Import the global style enabling tailwind classes
import '../styles/globals.css'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}
```

### Add a story

For each page or component that we want to tell using a `story`, we need to create a file called `component-name.stories.js`.

In this case, we want to create the `index.stories.js` inside the `pages` dir:

```
import Article from './index';

const articleMock = {
  id: 3,
  author: 'Dave Canterbury',
  company: 'Bushcraft 101',
  image_url: 'https://via.placeholder.com/200/200',
  content: 'David Michael Canterbury born September 19, 1963 is a survival expert'
}

const Story = (props) => <Article {...props} />

// Here we export a variant of the default template passing props
export const ArticleStory = Story.bind({})
ArticleStory.args = {
  article: articleMock,
};

// Here we export a variant of the default template passing props
export const EmptyArticleStory = Story.bind({})
EmptyArticleStory.args = {
  article: null,
};

// Here we export the default component that
// will be used by Storybook to show it inside the sidebar
export default {
  title: 'Article',
  component: Article,
  argTypes: {
    showImage: { control: 'boolean' },
  },
};
```

### Run the Storybook server

```
npm run storybook
```

![Storybook result with style](https://cdn.sanity.io/images/kqgmf0g2/production/6b98a19deccff277aaa00d736aff13aa969a23ac-846x906.png?fit=clip)

At the time of writing there is a chance you might run into this [bug](https://github.com/storybookjs/storybook/issues/12668). You can fix it with this [solution](https://tailwindcss.com/docs/installation#post-css-7-compatibility-build).

## That's all

Your project is ready to be built using a robust framework and beautiful style with an easy way to check component behavior in isolation!

I hope that you found this article helpful and easy to read.

Do you need the [Typescript](https://www.typescriptlang.org/) version? Let us know with a comment.

### Follow up story - use TailwindCSS and Storybook with SCSS

NextJS side this isn’t a problem, you need just to install the `scss` library using `npm`.

```
npm install sass
```

Rename the `styles/globals.css` to `styles/globals.scss` and fix the `_app.js` and `.storybook/preview.js` style imports.

and replace the TailwindCSS style import from this:

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

to this:

```
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

**And Storybook?**

![Storybook SCSS error](https://cdn.sanity.io/images/kqgmf0g2/production/59838f648762570d289c5201a0bf7848015ae22e-1042x410.png?fit=clip)

It seems that Storybook doesn’t recognize the SCSS syntax, and for this reason we need to extend the library [Webpack](https://webpack.js.org/) configuration adding the `sass loader`.

The Webpack loader is used starting from the end, and this means that the `sass-loader` should be added at the end of the loader list.

Here you can find the `.storybook/main.js` file with the correct configuration:

```
module.exports = {
  stories: [
    // Paths to the story files
    "../pages/*.stories.mdx",
    "../pages/*.stories.js",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        "style-loader",
        "css-loader",
        "postcss-loader",
        // Add the sass loader to process scss files
        "sass-loader",
      ],
    })

    return config
  },
};
```

Configure NextJS with Storybook and TailwindCSS

Let’s consider two engineering managers, John and Jane. They have the same seniority, they both work on similar projects in similar conditions and their teams are both terribly smart.

John insists on personally reviewing and approving every change, no matter how small. This doesn’t just concern the codebase: if an engineer wants to try a new productivity tool with the team, they have to go through John. If the team wants to move an internal meeting to a time that better suits everyone, she has to go through John. Every little detail is scrutinized and torn apart to make sure John’s team don’t waste their time on “useless” initiatives.

Jane, on the other hand, is more comfortable with experimenting. She doesn’t require the team to ask her approval for everything, but she is there to support them when they want to try something new, and helps them validate initiatives by setting clear goals and metrics that make sense for them. Then, she takes successful experiments and acts as the team’s champion in the larger organization, implementing these initiatives at a higher level.

Which team do you think will be happier, more productive and more innovative — John’s or Jane’s?

## Bottleneck Managers Create Permission-Centric Organizations

John is the typical example of a **Bottleneck Manager**. We all know at least a few Bottleneck Managers: they hoard information and authority and require teammates to go to them for every little thing. Want to try a new tool? Ask your manager. Want to move a meeting? Ask your manager. Want to change the name of a Slack channel? Ask your manager.

Put enough Bottleneck Managers together and you have an alienating workplace where there’s a process for everything and no way to change that process, until one day you realize you’ve just been doing the same thing for the past five years and you’ve become irrelevant two years ago anyway, but no one has told you because they were too busy writing code. You have, to put it briefly, a **Permission-Centric Organization**.

Permission-Centric Organizations are the natural result of one or more of the following factors:

* **Lack of trust**: his goes both ways. Managers may not trust their teams to make sensible decisions, or teams may not trust their managers to make good use of the results of their decision-making. If a teammate wants to try a new technology but knows their manager will scoff at it, they may not even propose it, to avoid the uncomfortable feeling of rejection.

* **Lack of time**: managers want to make sure everyone on their team is using their time in an optimal way. In doing so, they may overly centralize the decision-making process, to the point where the team is not free to do anything but write code. In some companies, managers will allocate all of the engineers’ time to “busywork”, leaving no room for anything else.

* **High cost of error**: if you have a proven process and battle-tested tools in place, it’s scary to try something new. Sure, the new tool/methodology may improve your work by an order of magnitude, but what if it doesn’t work and you end up alienating your stakeholders? The more successful you get, the more this becomes a problem.

* **Lack of competency**: when team members are not competent enough to experiment in a safe, productive way, management may create constraints around experimentation and take the reins of the engineering process. This may also come from the team members themselves: if they are not (or don’t feel like they are) competent enough, they may avoid trying new ideas for fear of making a mistake.

These are all valid problems. If you’re running a successful company, you want to make sure innovators are competent, you want to trust them and you want them to trust you, you want to dedicate time to the things that really matter, and you want to eliminate or minimize any room for mistake.

However, there’s a way to have your cake and eat it too. You can have all of the above, without hindering your team’s ability to come up with new ideas and validate them. The way to do it is to stop being a Bottleneck Manager and start being a **Multiplier Manager**.

## Multiplier Managers Create Feedback-Centric Organizations

Unlike John, Jane is a Multiplier Manager. A Multiplier Manager supports their team, but also allows them to make their own decisions. They’re proactive in identifying opportunities, but let the team capitalize on opportunities in their own way. They create processes and boundaries for safe innovation and encourage the team to pursue their ideas. They are — by far — the best kind of manager you’ll ever work with.

Multiplier Managers are the bread and butter of **Feedback-Centric Organizations**. These are workplaces where you can — and are strongly encouraged to — run an initiative by your manager to get feedback on it, without first having to ask permission. They are workplaces where ideas move freely from one desk to the other, in continuous evolution.

Just like a Bottleneck Manager and a Permission-Centric Organization are identified by a particular set of dysfunctions, Multiplier Managers and Feedback-Centric organizations exhibit and promote most (preferably all) of the following virtuous traits.

### Provide context about the business

Lack of transparency about the business context and business goals of their organization is one of the most common reasons why people don’t feel like they’re empowered to change their surroundings — withholding information may save your team some time, but it also prevents them from providing their perspective and putting their own twist to what you’re doing.

Multiplier Managers make sure to share all relevant information with their team. Not just what they’re doing, but why they’re doing it and whom they’re doing it for; any decisions that are made, and why they’re being made; who’s responsible for what; any processes the team follows and the rationale behind them, and anything else that might be of interest to other people.

Once the amount of information is too much to be pushed to all teammates all the time, they start publishing it instead and give their teammates an easy, clear way to access it, so that they don’t risk wasting the team’s time with anything they don’t find interesting. This may take different forms: a shared Google Doc, an entire shared folder, a company playbook, meeting recordings or a bunch of those — whatever works for the company and how people communicate.

## Define what “good” innovation looks like

This is where bureaucracy and innovation meet: the best approach to innovating is by doing it within clear constraints and with a streamlined process. Constraints give your team members a way to frame their ideas in a way that makes sense for everyone, and process lets them validate and execute their ideas in a controlled way.

Here’s the stuff that Multiplier Managers are concerned with:

* What kind of innovation is good innovation? Is it okay to propose rewriting a perfectly working project in a new, shinier technology? Is it completely forbidden, or should it just be a time-boxed endeavor?

* How do we determine if an idea is successful? Do we need to set clear business metrics in advance, or do we use more qualitative metrics? Does it depend on the context?

* What’s the process for collecting feedback? Even more important, what’s the process for understanding whom to collect feedback from in the first place? What kind of feedback should be asked for at what points during the process?
Your mileage may vary, but the mere act of creating a process will be beneficial to your team and make it known that not only is it okay to experiment, it’s encouraged and codified.

### Use automation to create safeguards

If your organization is run by humans, someone is bound to screw up at some point. While Bottleneck Managers run from mistakes and pretend everything can be perfect all the time, Multiplier Managers embrace chaos and try to minimize the ways in which things could go wrong, the cost of things going wrong, or both.

Multiplier Managers use automation to their advantage: they know that systems are dumb and infallible while people are smart and fallible. This leads them to give their team ample freedom to innovate and move quickly *without* having to ask permission. At the same time, they create automated safeguards around the critical aspects of the company’s infrastructure to protect them from human error.

The most obvious example of this is creating a CI pipeline and setting up the proper telemetry to ensure developers can iterate on the codebase as quickly as they can think, *without* running the risk of breaking the app with a bad deployment. Removing the human element from the approval process is key to boosting speed and creativity in the organization.

### Promote technical excellence and innovation

As you create more room for experimenting and taking ownership, you should also make sure you’re promoting technical excellence at all levels of the organization. Having the right skillset empowers individual contributors to spot and seize opportunities for improvement, and it empowers managers to recognize and support innovators.

Before you start firing people, though, make sure those “code monkeys” on your team are not monsters of your creation. Even the most proactive engineer in the world will stop coming up with new ideas when there’s no room for execution. Consider each team member’s history and their aspirations and, most importantly, *talk* to them about the kind of change you want to create to see how they react: are they excited, worried or indifferent?

If you’re trying to revive a stagnating team, a useful icebreaker may be to allocate time for intentional brainstorming and innovation. Try to put aside 20% or 10% of each iteration for the team to try their craziest ideas, and see how that pans out. This will give you time to get aligned on what innovation means to you, and how you want to go about it.

However, remember that this is still not ideal: “thinking time” is still you giving your team permission. Instead, you want to get to a point where they come to you spontaneously with their ideas, without waiting for you to tell them it’s okay to think. If you can get there and maintain that momentum, you’ll have a real Feedback-Centric Organization.

The Feedback-Centric Organization

This post explores how to deploy your first [Solidus](https://github.com/solidusio/solidus) application ( the best eCommerce framework available in Ruby land) to [DigitalOcean](https://www.digitalocean.com/) (one of the top Infrastructure as a service provider that puts the developers at the center). You will use the services provided by DigitalOcean, like [Droplets](https://www.digitalocean.com/products/droplets/) and [Managed Databases](https://www.digitalocean.com/products/managed-databases/). This post is entry-level, you don’t need to be an experienced software developer to follow this. We are going to follow a step by step approach with lots of screenshots, and code snippets. So without further ado, let’s get started!

## Solidus

The first step is to create a Solidus application, to do that you can use the Solidus guide as reference.

If you prefer to just get started we have created a repository on Github ready to use, you can find it here.

On your local machine the application should look like this:

![Solidus homepage on localhost](https://cdn.sanity.io/images/kqgmf0g2/production/0b961debfd291b1bd0e38ac5abfc3d677cc760b7-2872x2104.jpg?fit=clip)

By the end of this post, you’ll be able to see this very same page online.

## DigitalOcean

Now it’s time to prepare the deployment environment on [DigitalOcean](https://www.digitalocean.com/). DigitalOcean is an Infrastructure as a service provider, this means that you can rent the infrastructure we need for our application from DigitalOcean with just a click.

To be more specific we are going to need two main components for our application:

* A server to host our code.

* A database to keep our data safe.

DigitalOcean has two services that are perfect for our needs:

* [Droplet](https://www.digitalocean.com/products/droplets/): an easy, fast, and flexible compute unit. You can imagine this to be a small server that you can use as you want.

* [Managed Databases](https://www.digitalocean.com/products/managed-databases/): a worry-free database hosting. You can imagine this to be a database ready to use, you don’t have to worry about installation and maintenance.

## Create the infrastructure

We are now going to create all the infrastructure we need on DigitalOcean.

First of all, you need to go to the [DigitalOcean homepage](https://www.digitalocean.com/) and sign in, or sign up if you don’t already have an account.

## Create the Database

Now that you are logged in, you are going to create the database.

We are doing this first because it’s your new database it’s going to take a while to become available, so we can work on other stuff while we wait for this to be ready.

From the homepage, you have to go to the `Databases` section (arrow 1). On the `Databases` sections, you need to click on `Create a Database Cluster` (arrow 2).

![Solidus dashboard on database section](https://cdn.sanity.io/images/kqgmf0g2/production/1c7c3e536b8901b4ca74b9c61aa62d9efb8bb5a2-2978x2072.jpg?fit=clip)

You can leave all the default values on the creation form, just scroll to the bottom of the page and click on `Create a Database Cluster`.

Note that DigitalOcean will create a default database inside your installation with a default admin user inside it. For this tutorial, we are going to use this database and user. In a real-world scenario I would suggest the creation of a custom database with its own admin user to improve the security of the system. You can do that through the database management UI.

Once created you will see the database management UI, you can skip the getting started section.

![Solidus dashboard on database section, created database](https://cdn.sanity.io/images/kqgmf0g2/production/15d7d19abed14c5dd50f5da0156e408b0498c569-2978x2072.jpg?fit=clip)

In the image, you can see the database management UI. Please note 2 things, pointed by the arrows in the image:

* Arrow 1: The credentials for your database, we are going to need them to configure our application.

* Arrow 2: At the moment your database can receive connections from all the internet, this is not ideal from a security point of view. We are going to fix this later.

Now your database is provisioning, while we wait for it to be ready we can create our server.

### Small note on DigitalOcean Managed Databases

The service [Managed Databases](https://www.digitalocean.com/products/managed-databases/) creates a cluster of databases for you. For this tutorial, you don’t need more than 1 database, but for a production application maybe you can consider creating a cluster with more than 1 database to be protected against outage, and to improve your disaster recovery capabilities.

You can read more about this on their [documentation](https://www.digitalocean.com/docs/databases/).

Create the Server
Now we are going to create our server, to do this you will use the [DigitalOcean Droplet](https://www.digitalocean.com/products/droplets/) service.

From the homepage, you have to go to the `Droplets` section inside it click on the `Create Droplet` button.

You can leave all the default values selected inside the form, you are going to use an Ubuntu image for the server. You need to add an ssh key during this process, the UI will guide you through the steps needed to do that.

Once created you will see the Droplet management UI.

![Solidus dashboard on droplet section, with a droplet created](https://cdn.sanity.io/images/kqgmf0g2/production/5dbd2fc47b45df83cba156f7da4e1a4bb4621aac-2978x2072.jpg?fit=clip)

## Let’s secure our database access

Now that you have created the server we can secure our database. We want the database to accept connections only from your newly created Droplet.

You have to take note of your Droplet’s name, it will look something like this `ubuntu-s-1vcpu-1gb-fra1-01`, you can find this on the Droplet management UI.

Now head back to the database management UI, from there:

* Click on `Settings`. (Arrow 1)

* Under `Trusted sources` put the name of your Droplet inside the autocomplete field. (Arrow 2)

* Click on `Save`. (Arrow 3)

![Solidus dashboard on database section, under the settings tab](https://cdn.sanity.io/images/kqgmf0g2/production/58d5001849f4d14ce44390b51887a6fefbcba122-3036x2072.jpg?fit=clip)

Now the only connections accepted by your database are the ones coming from your Droplet.

## Configure the Droplet

Now that the infrastructure is up and running we have to install the application on the server.

Your [Droplet](https://www.digitalocean.com/products/droplets/) is just a plain server running Ubuntu, to run your application on it you need to:

* Make sure that all the packages installed on the Droplet are updated.

* Install all the dependencies needed to run the application.

* Clone the application repo on the server.

* Configure the environment variables needed by the application.

* Setup the application’s server and database.

* And finally run the application.

It’s sound like a lot to do, but you’ll see that it’s easier that it looks like.

### Login inside the Droplet

To work on the Droplet you need to connect to it, that’s exactly why you added an ssh key during the configuration.

To login inside the droplet you can run the following command:

```
ssh root@<YOUR DROPLET IP ADDRESS>
```

You can find your Droplet IP address on the Droplets management UI section of the [DigitalOcean](https://www.digitalocean.com/) dashboard.

### Updating Droplet packages

The Droplet is just a plain server with an Ubuntu distribution installed on it, to update all the packages on it you can launch the following command:

```
apt update && apt upgrade -y
```

This will make sure that the system is updated, keeping you server updated it’s a good practice, and can help your system to stay secure.

### Install all the packages needed

You now have to install all the packages necessary to run Ruby and Ruby on Rails on the system.

There are quite a bit of packages needed, you can copy and paste the command below to install all of them:

```
apt-get install git-core zlib1g-dev build-essential libssl-dev libreadline-dev libyaml-dev libsqlite3-dev sqlite3 libxml2-dev libxslt1-dev libcurl4-openssl-dev software-properties-common libffi-dev imagemagick nodejs ruby npm ruby-dev libpq-dev -y && npm install -g yarn
```

Now that all the packaged are installed you can install [Bundler](https://bundler.io/) and [Rails](https://rubyonrails.org/), to do that run:

```
gem install bundler rails
```

To check if everything is been installed correctly you can run the commands bellow, you should see a version number for every tool installed:

```
ruby -v
bundle -v
rails -v
node -v
yarn --version
```

### Clone the application repository

Now you are ready to clone the application inside the server. If the repo is public you can clone it using HTTPS. If it’s private you have to generate an ssh key for the Droplet, and add it to GitHub (or the repository provider that you are using).

For a production application, I’ll suggest configuring a dedicated ssh key for your Droplet, and use it to clone the repository.

For example, if you are using our public repository you can run this command:

```
git clone https://github.com/nebulab/digitalocean-solidus-demo.git
```

### Set the environment variables

We configured our example application to use environment variables to connect with the database, you can see the configuration on the [repository](https://github.com/nebulab/digitalocean-solidus-demo/blob/master/config/database.yml).

As you can see from the configuration file we need to set 5 environment variables:

```
 DATABASE_HOST
 DATABASE_PORT
 DATABASE_NAME
 DATABASE_USERNAME
 DATABASE_PASSWORD
```

Do you remember when earlier I talked about database credentials created by DigitalOcean? Now it’s time to use them.

You can add all the variables to our Droplet environment running the following command, remember to replace the placeholder with the information provided to you by DigitalOcean:

```
echo 'export DATABASE_HOST="<your_digitalocean_database_host>"' >> ~/.bashrc
echo 'export DATABASE_PORT=<your_digitalocean_database_port>' >> ~/.bashrc
echo 'export DATABASE_NAME="<your_digitalocean_database_database>"' >> ~/.bashrc
echo 'export DATABASE_USERNAME="<your_digitalocean_database_username>"' >> ~/.bashrc
echo 'export DATABASE_PASSWORD="<your_digitalocean_database_password>"' >> ~/.bashrc
```

You also have to set the variables to tell Ruby on Rails to treat this server as a production environment, and Puma to expose the application using the default HTTP port:

```
echo 'export RAILS_ENV="production"' >> ~/.bashrc
echo 'export PORT=80' >> ~/.bashrc
```

After this we have to reload our shell, you can logout and login again inside the Droplet, or you can run:

```
source ~/.bashrc
```

To verify that the variables are set correctly run:

```
echo $DATABASE_HOST
echo $DATABASE_PORT
echo $DATABASE_NAME
echo $DATABASE_USERNAME
echo $DATABASE_PASSWORD
```

You should see all you database information.

Setup our application
We have almost done, now you have to go inside the directory where your repository is cloned.

From there you should install all the gems needed, to do that just run:

```
bundle && yarn install --check-files
```

This can take a while, you can go and grab yourself something to drink because you have done a lot of work and you deserve it.

Last, but not least, you have to compile the assets. To do that you can run the command:

```
bundle exec rake assets:clobber && bundle exec rake assets:precompile
```

### Adding security and setting up the database

Our application needs a secret key to run. How to manage the secret key correctly, and secrets in general, is outside the scope of this article. You can find more on the official [Ruby on Rails Guide](https://guides.rubyonrails.org/security.html).

To generate a secret key for your application you can run:

```
EDITOR="nano --wait" bin/rails credentials:edit
```

Now you need to load the database schema of the application, and setup the seed data inside it. To do that run the following command:

```
bundle exec rails db:schema:load db:seed
```

Don’t worry if it takes a while, you are loading a lot of data inside the database, and you are using the cheapest option offered by DigitalOcean it’s normal. Just relax and get ready for the last step.

### Launch the application

Everything is finally ready, you can launch you application with the command:

```
bundle exec rails s
````

This will launch [Puma](https://github.com/puma/puma), and expose your application to the internet. From the Droplet management UI copy your Droplet IP address, use your browser to navigate to it, and you should see your application up and running!

![Solidus homepage online](https://cdn.sanity.io/images/kqgmf0g2/production/dd129e0140f09b2c7cd80eafe1166749bd3715cc-2872x2104.jpg?fit=clip)

### Road to production

Your application is finally online, congratulations! Take a moment to appreciate all the things you have done to accomplish this:

* You started from a local working application.

* Bootstrapped your server and database.

* Configured your server.

* Configured your app.

* Launched the app and made it available to the internet.

This is great, but it’s just a starting point. To be used in a real production environment our deployment needs some more work.

In the following sections we introduce the improvements needed to make our deployment production-ready.

### Improving the Droplet configuration

If you want to use your Droplet for production you need to improve the configuration to make it secure and stable for a real-world scenario. You have to:

* Setup a firewall.

* Setup a reverse proxy, using tools like [NGINX](https://www.nginx.com/).

* Create a user for the deploy, instead of using the root user.

* Add SSL certificate to enable HTTPS for the application, using tools like [Certbot](https://certbot.eff.org/).

* Isolate the installation of Ruby, and the bundle gems with tools like [Rbenv](https://github.com/rbenv/rbenv)

* Use a proper key to store the secrets.

* Set proper credentials for the Solidus store’s admin user.

### Automate all the things

Doing all these installation steps by hand is boring, and error-prone. You can avoid it using a combination of tools to automate the creation, provisioning of the server, and deployment of your application.

One tool that you can look at for deploy automation is [Capistrano](https://capistranorb.com/), it’s quite popular inside the Ruby on Rails community.

You can integrate Capistrano with a CI/CD tool like [CircleCI](https://circleci.com/) to enable the continuous deployment of your code.

For more advanced use cases you can use [Terraform](https://registry.terraform.io/providers/digitalocean/digitalocean/latest/docs) to implement your infrastructure as code, and [Ansible](https://www.ansible.com/) to automate the configuration of your server.

With Terraform you can automate the creation of the infrastructure needed by your application, the Droplet and database. With Ansible you can automatically install all the packages you need on your Droplet.

### Uploading files to an external storage

Right now the application is storing all the static files of the Solidus store on the local hard disk, this is not ideal because if the Droplet goes down you risk losing all the data.

To avoid this you can use external static file storage services, for example DigitalOcean provides [Spaces](https://www.digitalocean.com/products/spaces/) an S3-compatible object storage with a built-in CDN that makes scaling easy, reliable, and affordable.

## That’s all

I hope you liked this tutorial, and that it was useful to kick-off your journey with [Solidus](https://github.com/solidusio/solidus) and [DigitalOcean](https://www.digitalocean.com/).

If you enjoyed this tutorial please share it with the world, if you want to know more leave a comment and start a conversation.

Deploy your first Solidus application to Digital Ocean

A few weeks ago, a moment before pushing upstream a glorious bug-fix, I ran the test suite locally, just to discover that I broke it!

Having lost all confidence in the commit history, I was out for blood, looking for the piece of code that ruined the whole PR!

![](https://cdn.sanity.io/images/kqgmf0g2/production/ea604b184a38f8c019f7319af3a16fd26c8c4487-640x418.gif?fit=clip)

With more than a hundred git aliases I consider myself quite a git nerd, so I reached out for a tool I knew: `git rebase`.

My plan was:

1. mark each commit with `edit`

2. run the test suite with `bin/rake` at each stop

3. identify the offending commit and fix whatever bugs I encountered

4. amend the commit and call it a day

That didn’t feel right tho, it was too clunky, I had a hunch that I could have done better than this! So, after reading once again the `git rebase` documentation, this little option popped out: `git rebase --exec`!

## What `--exec` does to `git rebase`

The magic of `--exec` is that it will execute a command after each commit in your interactive rebase. If the command fails, it will stop the rebase, allow you to fix whatever needs to be fixed, and move along with `git rebase --continue`.

This means that I was able to swiftly run this command after each commit and ensure that I had a green suite at every step of the PR.

```
git rebase --interactive --exec "bin/rake" origin/master
```

Don’t forget that this neat trick can be used for all kinds of problems, like, for example, running a linter for every commit of a PR.

The git-rebase option no-one knows that will shock your coworkers!

Strong Customer Authentication (SCA) is a relatively new security requirement that came in into force in Europe during September 2019. In order to comply with the law, a store located in Europe must now accept payments only through an SCA-ready payment method.

Stripe, one of the major players in the online payment business, has been offering a set of modern API that comply with these requirements for a while and these API are now available also to Solidus’ stores via the gem Solidus Stripe.

Currently, Solidus Stripe supports Elements, Payment Intents, and the payment request button API; let’s briefly discuss the features offered by each of them.

## Stripe Elements

Elements was the first API provided with the third version (V3) of Stripe JS library that got implemented in the gem. Elements allows stores to build their payment pages by using pre-defined HTML elements packed with JS functionality for a secure and easy payment flow: everything is handled via javascript in the frontend without any need to communicate with the store backend.

If you don’t need SCA, this is by far the simplest and effective solution made available by the gem: setup is very easy and your store will be ready to accept credit card payments in a jiffy.

## Stripe Payment Intents

The Payment Intents API is based on Elements, so it maintains the very same checkout UX and the ease of use when it comes to creating HTML elements, but it includes the new SCA features that make it much more complex to implement in regads to interactions with Stripe servers and the app backend:

> this API tracks a payment, from initial creation through the entire checkout process, and triggers additional authentication steps when required.

The good news is that the complexity has already been packed inside the code of the gem, so you can relax and concentrate only on the setup procedure described in the README.

Still, you may be interested in a general overview of what happens under the hood when a 3D-Secure verification is required. The video shows the payment process in the browser, a description follows below:

[VIDEO](https://drive.google.com/file/d/1ZuAddZwtJEsLbhXINDPcS5vK2tR9Wz03/view?usp=share_link)

1. the Stripe Elements markup is added to the page by creating the card number, card expire date and card CVC inputs;

2. after the customer enters the payment data and clicks the button, a new payment method is created on Stripe servers for the given credit card number;

3. some data is added to the HTML form elements that will be used later at submission time;

4. a JS asynchronous request sends the payment method token to the backend in order to create a Payment Intents object that, depending on the credit card type may require the customer to pass the additional SCA verification. The payment intent has automatic confirmation method but requires manual capture and can be used later for off session usage (in other words, the customer will be able to reuse the card that they just entered in the system);

5. the frontend receives from the backend the payment intent client secret token to be used for the 3D-Secure verification;

6. a 3D-Secure modal completely managed by Stripe pops up in the browser;

7. after successful code verification with the Stripe API, the store backend tries to create the payment on the DB by using all the data provided by the frontend, including the customer address, credit card information and the Payment Intent ID;

8. if all goes well, the frontend finalizes the payment and completes the form submission, so Solidus can resume the usual checkout flow by taking the customer to the last checkout step (confirmation).

You can take a look at the gem source code, especially the javascript part, if you are interested in getting a deeper understanding of this process.

Be aware of an important *caveat*: the initial Payment Intents charge is created *uncaptured* on the payment step; it cannot be captured at that time, otherwise if the customer leaves the checkout before confirming the purchase, it would not be possible to revert the charge. For this reason, capture must happen later in the Solidus backend, after the order is finalized.

## Payment Request Button

The payment request button is based on Payment Intents and the official W3C [payment request API](https://www.w3.org/TR/payment-request/). Just like Payment Intents, it’s SCA-ready so it can be safely used also on a European eCommerce.

Instead of leveraging the usual HTML elements, the payment is made in a native environment specific for each browser. This payment API is currently the only one from Stripe that supports **Apple Pay** and **Google Pay**.

The payment request button can be mounted directly on the cart page, allowing customers to entirely skip the usual Solidus checkout process. This makes the guest checkout easier, faster and more convenient, increasing conversions.

The most notable requirement for the button to work is that the store must be on HTTPS, but setting up Apple Pay requires the extra step of creating a verification file specific for the store domain and make it available at a specific URL. Of course, more details can be found on the gem README and on Stripe documentation.

Here’s a video demonstrating the guest checkout with the payment button on the cart page:

[VIDEO](https://drive.google.com/file/d/1uc02KSWz6MTRIr1jPa_r-g080zrIJ_DE/view?usp=share_link)

When the customer clicks the button, the browser dialog window pops up requesting them to choose the shipping address among the ones saved in the browser, or enter a new one. After that, all the available shipping methods with their costs are retrieved from the backend and the customer can pick their preference.

The customer must have at least one credit card registered in their browser, failing that the button will not show. If more than one card exists, the customer will be able to choose among all of them.

![Web page of the shopping cart of a website using Solidus and Stripe](https://cdn.sanity.io/images/kqgmf0g2/production/8fcba37be1986f990d9fcb6fcacd134e2ca10b24-1800x1724.png?fit=clip)

## Customizations

Customization is done by following the standard Rails/Solidus procedures when it comes to ruby code (`Module#prepend` and `Deface` are your friends) while the JS can be customized easily by overriding the existing payment method prototypes.

One frequent customization may consist in overriding the default locale for Stripe Elements. If you want to switch from English to the Spanish language, you can simply redefine the method `elementsBaseOptions` on the prototype of the constructor `SolidusStripe.Payment`:

```
SolidusStripe.Payment.prototype.elementsBaseOptions = function () {
  return {
    locale: 'es'
  };
```

Some level of visual customization can be achieved directly with CSS, but sometimes, when using Elements and Payment Intents, your best option may be to override the method `baseStyle` on `SolidusStripe.Elements.prototype`.

Enough talk, I hope this post helped in presenting all the possible payment flows enabled by Solidus Stripe, it’s now your turn to pick the one more suitable for your store… happy coding!

SCA payments with Solidus Stripe gem

Everyone keeps telling us to be gentle when reviewing Pull Requests, and that’s the right thing to do, but are we nice with who reviews ours?

A Pull Request is a way to communicate with other individuals who are responsible for the project’s maintenance, so we should do a good job improving our Pull Requests code and documentation to make their work straightforward. It’s also in our best interest to do that since the easier the review is the faster we’ll get our code merged.

## Who reads our Pull Requests?

Creating a reasonable Pull Request is a matter of walking in the shoes of people that will open it later, who fall into the following categories:

* **Code Owners**: who are in charge of reviewing and merging the code.

* **Developers implementing new features**: who are changing previously merged code and need to understand why that code is there.

* **Developers fixing bugs**: who encounter a bug and need to go deep in the git history to understand where the regression has been introduced and why.

We should be respectful of each of them while creating a Pull Request since facilitating their work both in the present and in the future is what makes software development honest and practical. “Time is running out” kind of excuses here are not valid, every moment that we don’t spend improving Pull Requests that we leave in our project is a lot of time wasted for who will interact with them later.

> A Pull Request is created one time but evaluated multiple times.

Do the math!

![](https://cdn.sanity.io/images/kqgmf0g2/production/61e451b8aa097487f4e8e20ab17f3ac713117f8c-560x240.gif?fit=clip)

## What reviewers dream to see

Let’s take a look together at what makes a Pull Request easy to review.

### Well organized code

Code is the soul of the Pull Request, but it won’t be my focus here. You can find a lot of resources about this on the Internet. I’ll only mention some general rules to apply code side:

* Make it small, try to break it into multiple Pull Requests.

* Write well-separated and well-documented commits, the why is the most important thing.

* Add tests, they’ll help reviewers understanding the context of the Pull Request.

* Take a look at the contribution guidelines usually at CONTRIBUTING.md; it may have important information.

### Meaningful title

It needs to clearly and exactly describe what has changed. For example:

![The preview of a wrong-formatter Pull-request title](https://cdn.sanity.io/images/kqgmf0g2/production/2c23d7ca307eba19629a23417b8c92525c59f42f-1340x200.png?fit=clip)
🔴 Bad: This one is too generic and doesn’t provide any value.

![The preview of a well-formatter Pull-request title](https://cdn.sanity.io/images/kqgmf0g2/production/e51f25dbd3166b9566efd0606c4f264866d63a64-1340x200.png?fit=clip)
✅ Good: This one is specific and explain what changed.

If you can only come up with a generic title, that’s probably a first signal that we could split the Pull Request into multiple ones.

A rule that I apply to determine if a title is good is to ask myself this:

> Could this title fit a CHANGELOG entry?

This soft-rule comes from my experience maintaining [Solidus](https://solidus.io/), the open-source project I mostly work on. On Solidus, before each release, we run a script that auto-generates entries for the CHANGELOG.md file using Pull Request’s titles. When they are self-explanatory, there’s much less manual work to do for maintainers.

### A description that really helps

Here’s the core of the Pull Request documentation. It’s quite common to assume that the Pull Request title and commits are enough for people to understand the context, but that’s not always true. For example, let’s consider this Pull Request title:

![](https://cdn.sanity.io/images/kqgmf0g2/production/2a55753537b7c1d02daf6a0746efd6d2e744bd47-1340x200.png?fit=clip)

I’m sure that when reading the Pull Request title today, with all the team focused on this specific change, everyone will immediately get what’s going on and **it could be tempting to leave the Pull Request’s description empty**. But what happens if you have to come back to this Pull Request in 1 year? Will you immediately remember how this switch has been done, and why?

Luckily, the “how” could still be read by commits description, even if it would be more time and energy-consuming to scan all the commits to get the sense of what’s happening. The real problem is that it’s tough to see the “why” of the change.

Let’s see what makes a good Pull Request description:

* It contains a **quick recap of the changes introduced**. It doesn’t have to be a lot of text, just something to quickly understand what changed without opening every single associated commit.

* It describes **why things changed**, try not to take for granted that the reader has a clear picture of the state of the system when the change happened. If the Pull Request comes from a change request done via an issues tracker, it could be handy to link that issue here.

* It describes the **steps to reproduce the changes introduced** with the Pull Request. It could be calling a method from a console, or make some interactions in a UI. It will drastically help reviewers to touch with hands the code they are seeing. It allows them to figure out any doubts that could arise in autonomy, without the need to ask for clarification and extra back and forth with the author.

* It includes **screenshots**: if the change has an impact on how the website looks or on any other visual part of the system, it’s a good idea to attach some screenshots. It will be super easy for those who look at the Pull Request to identify what changed and how.

With GitHub, you can guide the Pull Request author into providing all these things by using **Pull Request templates**. It’s a feature that allows to specify a template that will populate the Pull Request description for any new Pull Request. It’s just a matter of adding a markdown file into `.github/PULL_REQUEST_TEMPLATE.md`. Here’s a collection of [ready-to-grab Pull Request templates](https://github.com/stevemao/github-issue-templates) and the [GitHub documentation page for Pull Request Templates](https://help.github.com/en/github/building-a-strong-community/creating-a-pull-request-template-for-your-repository).

There’s also another hidden, not well-documented GitHub feature, that allows having multiple templates for Pull Requests. You can get them by just reflecting this filesystem structure:

```
.github/
  - PULL_REQUEST_TEMPLATE.md .       # The Default Template
  - PULL_REQUEST_TEMPLATE/extra.md   # Additional templates
```

When you create the Pull Request, you can use the infrastructure template by adding the `&template=extra.md` in the URL’s query params.

### The right reviewers

The policy about asking specific persons to review our code could change depending on the project. For this reason, GitHub offers a [Code Owners](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners) functionality that allows us to specify rules that automatically trigger review-requests from the right people. Here’s an example of a CODEOWNERS file:

```
*                   @project/backend-team
/app/javascript/    @project/frontend-team
/docs/              @project/documentation-team
```

This will ask for a review to the `project/backend-team` for all changes in the project excluding those that are located in `app/javascript` and docs, which will ask for a review to their respective teams.

I suggest integrating the usage of this feature with a clear team policy on how much time and how often developers are expected to review others’ code.

## Preview App linked to each Pull Request

Reviewers’ work is way smoother when they can test what a Pull Request changes before merging, and it’s a good practice to have a preview environment, very similar to staging, generated for each Pull Request open.

If you are deploying on Heroku, you can just use their [Review Apps](https://devcenter.heroku.com/articles/github-integration-review-apps), whose setup is quite simple. It’s also possible to build something very similar by yourself: GitHub offers a Deployments API to create a Deployment section in the Pull Request page. By calling something like:

```
curl -X POST -H "Content-Type: application/json" \
-H "Accept: application/vnd.github.ant-man-preview+json" \
"https://api.github.com/repos/nebulab/project/deployments/42/statuses?access_token=XXX" \
-d '{ "state": "success", "environment_url": "https://your-custom-url/", "environment": "preview"'
```

You’ll see the deployment link in your Pull Request.

![The deployment button in GitHub](https://cdn.sanity.io/images/kqgmf0g2/production/bfe079861626b276e4e2cf4a47eb55f201bf93e7-1564x784.png?fit=clip)

At Nebulab, we use CircleCI and we’ve created a [CircleCI Orb](https://github.com/nebulab/circleci-orbs-feature-branch-preview) that allows us to have this functionality ready in minutes in all our projects by adding the following lines to the `.circleci/config.yml`:

```
version: 2.1

orbs:
  feature-branch: nebulab/feature-branch-preview

workflows:
  cool-workflow:
    jobs:
    - do-cool-things
    - run-specs
    - feature-branch/preview:
        domain: <domain-for-preview-apps>
        github_repo: <your-github-repository>
        github_token: <your-gh-auth-token>
        letsencrypt_email: <email-for-ssl-cert>
        server: <docker-server-to-run-containers>
        user: <docker-server-user>
```

### I bet you now want to be nice too!

After reading this post, you should! Being nice with reviewers gives you better and contextualized quality checks for your code, which should help you **grow as a developer**. It decreases **time-to-merge** for your code and will increases the **velocity to implement new features** that depend on existing ones. **Debugging is also faster** since you don’t have to read all the code to understand how and why a specific thing has been done. Helping reviewers means helping your team and your future self!

The Nebulab