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.
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
div are supported. Some of these custom Stripe components include,
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:
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
A directory with the app name will be created.
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. *