Front-end app example

Build a Stripe app that has a user interface.

This guide shows you how to build a Stripe app that renders a user interface in the Stripe Dashboard. It doesn’t perform any back-end processing.

Select the authentication type that you want to use. If you want to build a private app, you can’t use OAuth authentication.

The following example shows how to build a Stripe app that uses platform key authentication.

Create a Stripe account

Before integrating with Stripe, you must create a Stripe account.

1. Create an account by entering your email address, full name, country, and creating a password.
2. Fill out your business profile.
3. In the Dashboard, click Verify your email . Stripe sends a verification email to your email address.
4. Verify your email address.

Note

You can continue building your app in a sandbox as you follow the steps in this guide. You need a live Stripe account to publish your app.

Install Stripe CLI and Apps CLI Plugin

Command Line

Command Line

# Connect the CLI to your dashboard
stripe login

Command Line

# Install Apps CLI Plugin
stripe plugin install apps

See the additional instructions to verify that you’re using CLI v1.12.4 and that node.js is up to date.

Create your app

Command Line

stripe apps create {my-app-name}

After you run this command, it prompts you for the following:

• An app ID, which must be globally unique and can change
• An app display name, which doesn’t need to be unique and that you can change

Configure your app

In your new directory, find the stripe-app.json app manifest file, and update it as follows:

Configure installation redirect URLs (optional)

In the allowed_redirect_uris array, add the URLs to return your app users to after they install your app from an install link. The first entry becomes the default. If you don’t want to create an install link, you don’t have to include this array in your app manifest.

Configure app permissions

In the permissions array, include the necessary object and event permissions for your use case. For example, accessing the Customers API needs the customer_read permission.

• Enter each permission as an object with both a permission and a purpose . Stripe uses the purpose string during app review.
• Include only the permissions that your app needs.

Implement your user interface

To add a user interface to your Stripe app, define its UI extension. A UI extension contains:

• One or more views , which configure the interface
• A Content Security Policy (CSP) , which controls the URLs that the interface can access

Add views

Each view includes two elements:

• A React component that defines a custom interface element
• A viewport representing the Dashboard context that displays the component

Adding a view to your app project automatically updates your app manifest by adding an entry to the views array in the ui_extension section. For example, an app that customizes the app settings page, the customer detail page, and the customer list page has the following entries:

{
...
 "ui_extension": {
 "views": [
 {
 "viewport": "app.settings",
 "component": "AppSettings"
 },
 {
 "viewport": "stripe.dashboard.customer.detail",
 "component": "CustomerDetailsView"
 },
 {
 "viewport": "stripe.dashboard.customer.list",
 "component": "CustomerListView"
 }
 ]
 }
}

For information about how to create your own views, see Design your app and How UI extensions work.

Configure the Content Security Policy (CSP)

The Content Security Policy uses Cross-Origin Resource Sharing to protect against cross-site scripting attacks. If your app doesn’t access any APIs or data outside of Stripe, you don’t need to define the CSP.

Upload, test, and publish your app

The process for uploading, testing, and publishing your app depends on whether you want to publish your app to the Stripe App Marketplace or keep it private to your own account.

Upload your app

1. In the Stripe CLI, run stripe login to confirm that you’re logged into the correct Stripe account. Then run stripe apps upload to upload the app to your Stripe account.
2. In your Stripe Dashboard, open the Developers menu and select Created apps .
3. Click your app to open its details page, then select the External test tab.
4. Click Get started to set up an external test.
5. Copy the sandbox link.
6. In a new browser tab, load the sandbox link. It opens the app install page, which lists your app’s permissions.

Enable sandbox testing

After you upload an app into your live account, Stripe auto-generates a managed sandbox account for testing. Your managed sandbox has its own API keys.

To test your app in the sandbox, enable it for sandbox installation.

Publish your app

After Stripe completes the app review and approves the app for publication, you can publish it:

1. In your Stripe Dashboard, open the Developers menu and select Created apps .
2. Click your app to open its details page.
3. Under Publish app , click Review and publish .

Make sure to test your app completely before publishing it.

After you publish your app, it becomes discoverable on marketplace.stripe.com.