Skip to content

How to Build Stripe Apps with React: Learning Once, Writing Everywhere

Have you had a chance to check out the newly released Stripe App Marketplace?

In this article, we will learn what Stripe Apps are and how we can build applications using the Stripe App CLI and plugins.

This article is a summary of JavaScript Marathon: Building Stripe Apps with React: Learning Once, Writing Everywhere with Rob Ocel.

You may read this article or watch the above video to learn how to build an app on Stripe.

🔗What Are Stripe Apps?

Stripe Apps allow developers to extend the Stripe platform by building React-based applications that can be embedded directly in the Stripe Dashboard and orchestrate the Stripe API.

To build your app you’ll benefit by having a basic understanding of React, a Stripe account, and the Stripe CLI.

Stripe Apps then adds supporting libraries and tools including:

  • Stripe CLI plugin for Stripe Apps for scaffolding a new app with a manifest,, views, and components
  • Stripe ui-extension-sdk, a utility for accessing Stripe APIs.
  • Stripe App UI Toolkits, which is a component library for building Stripe UI components

The key difference in Stripe Apps vs React apps is that an app on Stripe is rendered in a viewport but hosted inside a sandbox iframe to reduce the connection with the actual Stripe page on a browser.

Stripe Apps uses a set of custom components required to build frontend views as found in the UI toolkit. No traditional HTML elements like h1, span, and div are supported. Some of these custom Stripe components include, Box, Inline, ContextView and more, which we will use as we work with building a demo application. You can check out the Stripe UI components docs for more](https://stripe.com/docs/stripe-apps/components).

In this tutorial, we’ll be building a LeaderBoard of a donor app using the Stripe API. Our Stripe App will…

To start we’ll install the Stripe CLI plugin for building a Stripe App.

To install the Stripe Apps CLI plugin, run:

stripe plugin install apps

To scaffold a new Stripe App, run:

stripe apps create javascript-marathon

The Stripe CLI will prompt the following:

  • ID: auto-generated application ID. A unique name for Stripe to identify your application.
  • Display name: Enter a display name. This is the name your Dashboard displays for your app. For this tutorial. We’ll name it Javascript Marathon.

A directory with the app name will be created.

Run:

cd javascript-marathon

Let’s run the application to preview the default UI:

stripe apps start

You will be prompted to preview the application in the Stripe Dashboard.

The Stripe Dashboard will provide a dropdown of accounts you can choose from.

Best of luck and feel free to [reach out to me]( if you have any further questions!


*This Dot Labs is a modern web consultancy focused on helping companies realize their digital transformation efforts. For expert architectural guidance, training, or consulting in React, Angular, Vue, Web Components, GraphQL, Node, Bazel, or Polymer, visit thisdot.co. *

You might also like

Javascript

Getting Started with RxJS

Javascript

Testing Web Components with Cypress and TypeScript

Javascript

Web Components Integration using LitElement and TypeScript

Javascript

Navigation Lifecycle using Vaadin Router, LitElement and TypeScript