Paul Asjes: Hello and welcome! I’m Paul Asjes, a software engineer at Stripe.

Tayler Aitken: And I’m Tayler Aitken, product design manager. We’re here to introduce Stripe Apps, which allows you to bring together all the software you use to run your business. In this session, we’ll roll up our sleeves and get into the code of Stripe Apps. We’ll cover what Stripe Apps are and why you might want to build an app, either for yourself or for any business using Stripe. Next, we’ll go under the hood to show you how to start building your app. We’ll look at design considerations about how a great app looks and behaves. Finally, we’ll preview the product roadmap.

Paul Asjes: If you watched the Sessions Keynote, you might have heard that Stripe Apps has been released in beta for anyone to build with. So let’s start with a quick primer. We’ll give you an early look at what we’re initially launching with and a sneak peek at what’s coming up soon.

Stripe Apps are a new way to extend Stripe, and they help people bring together all the tools they use to run their business. The App Marketplace already includes a set of apps for popular software, like the customer engagement platform Intercom, the marketing and commerce platform Mailchimp, the accounting platform Xero, and dozens of others. You can start using these apps over the coming weeks, by going directly to the new App Marketplace.

And you can build your own app, for your own company, to solve unique cases or for the millions of businesses on Stripe to use. Besides being discoverable in the new App Marketplace, apps can also be embedded in Stripe where users can discover and interact with them. Apps can also bring useful context from Stripe into your other tools so important information is always in sync. This is the first time we’ve opened up Stripe to developers like this, starting with the Stripe Dashboard.

Tayler Aitken: There are a lot of reasons we decided to build Stripe Apps. Over the last few years, Stripe has grown and evolved to serve more countries, more businesses, and more users—each with their own specific needs and use cases. In addition to that, we saw users working across a lot of different software to run their companies. They were constantly having to context switch from one tool to the next, and those tools aren’t always in sync. By opening up Stripe to developers to build on, we know we’ll see exciting new ways of doing business. We can’t wait to see new apps that unlock diverse use cases beyond what Stripe alone could build.

Paul Asjes: Now, let’s look at some real-life problems that apps can solve for you or your users. For starters, Stripe Apps help businesses streamline their operations and save time, by integrating tools they’re already using with Stripe.

Tayler Aitken: Like the Mailchimp app, which lets people create behavior-based email journeys based on customer interactions that happen within Stripe. Let’s say a marketer wanted to automate a targeted message when a customer makes a purchase, sending them a specific discount offer to encourage repeat customers.

The app automatically syncs this customer’s information between Stripe and Mailchimp. The marketer can choose which customer interaction moments to sync with Mailchimp, like subscriptions, refunds, or, in this case, payments.

From there, they can build personalized journeys around those tags, knowing the Mailchimp app is automatically synced with the latest data from Stripe. Or take the eSignature solution DocuSign. The DocuSign app allows users to create and manage agreements that need to be signed pre-populated with Stripe customer data. Let’s say a small business owner wanted to see whether customers in Stripe have signed an agreement. They could use the DocuSign app to check the status of those agreements and easily link those DocuSign eSignature envelopes to Stripe invoices, without navigating away from the Stripe Dashboard.

Paul Asjes: And Stripe Apps also help users make sure that context is shared across all their important tools. Like the digital commerce platform, SendOwl. SendOwl lets businesses and creators sell digital goods like e-books, photography, memberships, and podcasts. With SendOwl’s Stripe app, Stripe users can upload and link a digital good—such as an online course—with a product in Stripe, then automatically deliver it to their buyer after checkout.

Tayler Aitken: This app has a ton of very cool functionality, but let’s look at how they handle subscriptions. Imagine you’re a creator who makes money by selling an online course. With SendOwl, a creator can see all the payments linked to their course on the payments page. They can drill into a specific subscription and manage the subscriber’s access to the online course, all in the dashboard.

And here they can set download restrictions like number of attempts or time limits, or give someone more download attempts to protect the creator’s work and prevent people from sharing it for free. Here’s another example of how apps can help share important context, wherever you are. Let’s look at Intercom’s app. It allows users to easily check up on a customer’s support history on the Stripe customer detail page. So a customer support agent could see that a customer is requesting a refund.

They could issue the refund within Stripe and even reply directly, letting them know the refund has been completed. And Xero’s app shows you relevant transaction data from inside Stripe, unifying information in one place. Rather than manually jumping between Xero and Stripe to reconcile invoices owed or outstanding bills, users can save time and know the information they’re working with is accurate.

Paul Asjes: Those are just a few examples of what apps can do. Now, let’s take a look at the building blocks you can use in your own app to power use cases like these. As you can see, we’ve opened up the ability to add interactive features directly into Stripe.

We’re calling these UI extensions. UI extensions open up Stripe surfaces, making it possible for users to interact with your app right inside Stripe. You’ll build UI extensions that look and feel just like the Stripe Dashboard. This means that users can discover and interact with your product directly within Stripe, without switching context or hopping from tool to tool. What’s cool about UI extensions is that they can display customized information depending on where the user is within the dashboard.

For instance, your UI extension could dynamically change its content based on the customer detail page that the app user is viewing. It could show specific emails or tickets associated with that customer, like Intercom’s app is showing here.

Tayler Aitken: UI extensions are built with popular industry standards, like TypeScript and React. We’ve created a toolkit of components like buttons, inputs, graphs, and lists that will allow you to build an experience that is seamless to Stripe and get you up and running as quickly as possible.

You can also access a UI library for Figma, the popular design platform, to help you build beautiful and engaging app experiences. It includes the UI components I mentioned before, the app drawer, which is the new space for apps on the dashboard, and sample dashboard UI pages to give you a jumping-off point for prototyping and testing your app ideas.

Paul Asjes: That’s a quick look at your apps frontend of UI extensions, but what about the backend? It’s just as straightforward as any other Stripe integration. You can use the full power of Stripe’s API to do pretty much anything a user can do in Stripe. That includes listening for webhooks and reading and writing data.

And the backend is self-hosted. So you can use any coding language and architect it in any way you want, which includes using third-party APIs. And there’s a lot more you can do with our APIs in your app’s backend.

First, you can simplify or even automate workflows. Your app can take action in Stripe when something happens in your own system or vice versa. You can kick something off in another tool, based on events from Stripe. So you could build an app that automatically kicks off billing as soon as a customer signs an agreement.

Tayler Aitken: Second, apps are a useful way to integrate important data between Stripe and your other systems. For example, you can connect your customer help desk tool or your product inventory with Stripe, giving users peace of mind to know that their important systems of record are always in sync.

Paul Asjes: Plus, Stripe Apps come with granular permissions right out of the box. This enables you to request only the information you need from your customers. And, for prospective users, it clarifies what your app can and cannot access.

Tayler Aitken: So, that’s Stripe Apps! Now, let’s pull back the curtain and actually build one.

Paul Asjes: We’ll show you how easy it is to get started and create a new boilerplate app. Then, we’ll look at a community management use case. Tayler’s going to give you some design tips and spotlight considerations to keep in mind for a great user experience. And finally, we’ll code it together! Now, let’s start with the very basics, developing locally with the Stripe CLI, which you may already be familiar with.

It’s a command line interface that we developed to help you build your integrations, including Stripe Apps. Let’s start at the beginning, creating a new app. I’ll run the simple command stripe apps create and the name of the demo that we’re going to be building. We’ll just call it sessions-demo here. Now the CLI is going to ask for an app ID, which is a unique namespace. We’ll leave that as the default. And it’s going to ask for a display name, which I’ll leave here as Sessions Demo.

Next, the CLI is going to download and install all the dependencies required to run your Stripe app. It’s also going to create a new Git repo and a new directory. Okay, now that’s done, I’m going to CD into the demo and run the command stripe apps start. This is going to spin up a local server on port 4242 (if you know, you know). All I’ll have to do now is hit enter, which will open up a new tab in a browser, and it’ll ask me which Stripe account I wish to use.

So I’m going to use ShoeCrew, click continue, and there we have it—on the right is our Stripe App. Now, the hello world app that we built specifically looks for the customer view page. So we’re going to navigate over to customers, click on this customer, and then on your right you see the app here. So let’s see what this looks like in the code. I’m going to open up VS Code, and here you can see what looks like a very simple React component.

You might notice that some of the names of the components here are not what you’d normally see. This is because these are part of Stripe’s UI SDK, where we have specific components pre-built to make sure that your app looks and feels like it belongs in the Stripe Dashboard. Let’s make some code changes to see how this works. I’m going to take everything that’s inside this context view… and delete this at the bottom. I’m going to create a new component; I’m going to use a button; I’m going to give it the type of primary so that it stands out, and we’ll just give it the label Hi Sessions. Now I’ll save, go back to my browser, and then we have a nice little button on the right within our Stripe app. Stripe Apps incorporates hot module reloading, which is what you’d come to expect from any frontend system these days.

So now that I’ve finished making a code change, the next thing is that I have to make sure the tests are all running and complete. Luckily, Stripe Apps comes with a full testing framework ready for you to use, powered by Jest. So what I’m going to do here is, I’m going to take this existing test; I’m going to say we’re going to be looking for a button to contain the text Hi Sessions, like this. I’ll save, and I’ll click the button here to run the tests. Great, that passed!

Now that I’ve finished making the code change and I’ve added the new test, next up is going to be to quit our development server, and I’m going to upload the app. I’m going to type in the command Stripe Apps upload, and this is going to prompt me. If I wish to upload this particular app to my Stripe account, I’m going to say yes, and this is now going to package up all the files and upload them to Stripe’s test servers. Great, that’s finished. Now, I just hit enter to open up the browser, and it’ll show me the installed app. This triggers the CLI to package up your app, upload to the Stripe servers, and install it to your Stripe test account. So only those who have access to your dashboard can see your application.

Tayler Aitken: You can upload your app right now for you and your team to use privately on your Stripe account. And in the coming weeks, you’ll be able to submit your app to the Stripe App Marketplace. After a review, your app’s listing will be live for anyone to discover.

Paul Asjes: So there you have it! We’ve made some updates to our app, tested them out, and then uploaded the new version. Tayler, I’ll let you take it from here to show some use cases and design aspects.

Tayler Aitken: Sure! Now that we understand how to get started, let’s build a deeper use case together. We’ll show off some app capabilities and talk you through some design considerations to keep in mind. Let’s imagine we want to build an app for Orbit, a community growth platform that helps people manage and grow their online followings. Orbit tracks community activity across all the places people gather online, like GitHub, Discord, Twitter, and more.

It allows you to layer on product events so you can see how community members engage with your product over time. In this example, we’ll reference an imaginary Stripe user called ShoeCrew. ShoeCrew is an online store that sells the hottest limited-edition sneakers. They work with a network of product champions—super fans—who help hype up their sneaker drops. And they use Orbit to track and manage their community. They’re always looking for opportunities to expand their network of product champions to spread the word about ShoeCrew and grow their brand awareness, but they don’t have an easy way to identify and source new champions.

ShoeCrew wants to use Orbit with Stripe to help identify potential super fans based on customer purchase data from the dashboard. This will allow their customer support agents to add tags on high value customers within Stripe. From there, their community team will automatically see this person flagged as a prospective champion in Orbit. That way they can work with that person over time and treat them with special swag, discounts, or even event invitations. So, we’ll build out an app that lets me sync Stripe data with Orbit.

Before we build out the functionality to find new champions, I’m going to walk you through a journey that I built using the UI library and point out some important design considerations. Then Paul will walk us through how to build out the creating a tag feature. So let’s start building. The flow begins once a user has installed the Orbit app to Stripe. After installation, they’ll be prompted to go to the dashboard. Here, the user can see the Orbit app in the right-hand app doc.

To start, the user can either sign in or sign up to create a new account. It’s important to remember to account for both of these experiences, as you have brand new users and existing users installing your app. Once they sign in, they’ll be prompted to accept permissions around what information Orbit and Stripe share with each other. Now this person is ready to use the app.
They can see their community member stats here. This is one of two core experiences for the Orbit app. Once you design these core experiences, it’s also important to account for edge cases. This means making sure you’re thinking through the experience for all types of users. For this app, we need to include loading states for those with slower connections and empty states for users who don’t have any data to pull in yet from the Orbit dashboard.

Now, before we move on, I’m seeing an opportunity here to improve this screen. In Stripe Apps, all content, including images, need to be functional and purposeful, helping your user with the job they’re trying to achieve. It’s not the space to promote your own app or do marketing. Since this illustration here is only decorative, we’re going to remove it.

Alright, that’s better. Next, we’ll see how Orbit gives me specific information about customers on my Stripe account. When the user clicks on a specific customer, they’re brought to the second core workflow of this app. Here, Orbit will display information collected from across the web about the selected customer, Louise Rose. You can see we’re accounting for less frequent workflows—like additional tabs, adding a note, and settings—which are used for important but infrequent actions, such as the ability to link or unlink your Orbit account with Stripe.

So those are a few things to think about when designing your end-to-end flow. To recap, remember to design for new and existing users, include edge cases for unhappy paths, and make sure all the content in your app is functional. Paul, can you walk us through building the tags feature?

Paul Asjes: Of course, I’ve gone ahead and scaffolded out our tag UI based on Tayler’s designs. As you can see, we have a tags tab in our app that shows the existing tags this member has, plus some controls for adding and deleting tags. Let’s open up the code and see what this looks like. As you can see here, I have a fairly standard React app. I have two variables, fetchBackendAPI and loadOrbitMember, which we’re going to be using to interface with the Orbit API.

Next up, I’ve got member tags, which is going to be the list of tags already associated with this member. And I have two bits of states using the React useState hooks, which we’re going to be using for capturing the new tag data and for setting the new data. You see here, I’ve got two functions, add tags and delete tag, which I’ve stubbed out for now—we’re going to build that together in a moment. First, I want to show you some of the JSX that we have here. If I scroll down into our tab section, I want to show you what we’re using here to actually list out the member tags. Here I’m simply looping over every member tag and returning a ListItem, which contains the tag itself plus our delete button.

You might notice here, we have this Icon component. This Icon component is part of our prebuilt UI, which allows you to use a vast number of icons that Stripe already built out for you. Now, scrolling up, I want to show you a bit more about this FocusView.

The FocusView is a component, which takes over focus for your user and is perfect for things like data entry. Within the FocusView, we have a primary action and a secondary action, which allows you to confirm or cancel the data. Finally, inside the FocusView, we’ve got a text area that has an onChange function, which is where we’re actually setting the new tags. So when I go back to the browser for a second, you notice when I click the Add button, out pops our FocusView, which has our text area and our confirm, save, and cancel buttons.

But the save button doesn’t do anything just yet. So let’s fix that. Back into the code in our add tags, I first want to see if the new tags variable contains anything, because, if it doesn’t—if it’s just an empty string—then we just want to return early. Next, I’m going to use the Orbit API to update our tags. I’m going to await this function; I’m going to call fetchBackendAPI. The route we’re looking for is /members/tags. I’m going to put in an HTTP verb here. In this case, we’re going to use PUT, and then finally, I’m going to add our tags, newTags, like so.

Then we’re going to await loading the Orbit member. You just want to make sure that we have the most up-to-date data from the Orbit API. And then, finally, we’re going to reset our state by setting our new tags to “empty string” again. And we’re going to make sure that the FocusView is shut by calling setShowAddNewTag false. Let’s save that, go back to the browser, and try it out. I’m going to add a new tag called champion and click save.

Great! There we have our tag, but now what if we accidentally added that tag and we want to delete it? Well, we have a delete button, but it doesn’t do anything yet. So let’s go back into our code and code out the delete tag functionality. First thing we want to do is determine the new tag list. So I’m going to create a new variable called newTags, which is going to take the existing member tags and we’re going to filter over this. It’s going to take a function, and we’re going to return tag is not equal to the target tag, which is the tag we wish to delete.

Now we have a new array, which omits the tag that we’re trying to get rid of. Then we can actually copy and paste the same code we had up here when it comes to interacting with the Orbit API. Although instead of PUT, I’m going to use the HTTP verb POST because we’re replacing the tag list rather than adding to it. I’m going to save this, go back to my browser, click the delete button. That worked. Let’s do it one more time from the top. I’m going to click add, type in “champion,” click save. And there you have it.

That was really awesome! And there’s so much more you can do with Stripe Apps. Here are a couple more advanced examples of what’s possible. This is FounderPath, a non-dilutive capital option for startup founders. FounderPath’s app for Stripe lets founders convert monthly recurring revenue into upfront capital. Here, you can see that a founder can request a payout by selecting a certain amount of monthly recurring revenue. What’s cool about this is they’re using the Stripe API in their app’s backend to pull in both customer data and subscription data. You can see that reflected here in the UI extension. So rather than having to open up a new browser tab, everything is shown contextually within Stripe. These types of contextual views are a good way to reduce drop off in your own user experience.

Tayler Aitken: And this is Kyber, a no-code builder that lets people automate common workflows based on Stripe events. You can see here that their app allows Stripe users to quickly configure automations within the dashboard. You could use it to automatically send a welcome email each time a new customer is created.

Or, let’s say, if you have a customer support channel in Slack—someone can use Kyber to notify the customer support channel each time a dispute is initiated with Stripe.

Your app backend can listen for Stripe webhooks, like Kyber is doing here, to automate actions with your own product or even another platform with an API. I love how Kyber is using the components from our UI toolkit to create a really clean, easily scannable UI. I’m spotting the select, text input, button, and text area components. And they’re using FocusView like you saw earlier, the component that helps people complete more nuanced tasks by expanding the app drawer.

Paul Asjes: So as we’ve seen, you’re now able to build feature-rich applications with Stripe Apps. We’re in beta right now, and we have many more exciting things planned for the weeks and months ahead.

Tayler Aitken: Here’s just a small taste of what’s coming soon. First, we’re going global. Apps are available everywhere Stripe operates today with English support for now. We’ll be rolling out support for more languages during the beta.

Paul Asjes: Second, to make it easier for you to work with metadata across Stripe and other important systems of record, we’ll release the Datastore API. The Datastore API enables you to safely store and manage data associated with a Stripe object. It’s contained in a unique namespace that’s just for your app. Because each app gets a unique namespace, you can avoid naming collisions and have peace of mind knowing that only your app has access to the data it needs to function.

Tayler Aitken: Third, to make it simpler for you to get paid for the apps you build, we’ll be enabling you to easily charge for apps natively within Stripe.

Paul Asjes: You can start building today! As you build, we would love your feedback to help us shape the future of Stripe Apps. Let us know what you think and what you want to see next by adding an issue to our GitHub repo.

Tayler Aitken: You can browse the marketplace and start building your app today. We cannot wait to see what you build.

Paul Asjes: Thanks for watching.

Tayler Aitken: Thank you so much and goodbye.