Front-end app example

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.

# Install Homebrew to run this command: https://brew.sh/
brew install stripe/stripe-cli/stripe

# Connect the CLI to your dashboard
stripe login

# 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.

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

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

{
  "id": "com.example.example-app", // unique app ID
  "version": "0.0.1",  	 // app version
  "name": "Example App",  // app display name
  "icon": "./[YOUR_APP]_icon_32.png",	// app icon; put the file in the same directory for ease of distribution
  "stripe_api_access_type": "platform",
  "distribution_type": "public", // for a private app, set to "private"
  "allowed_redirect_uris": ["https://example.com/installed/callback"], // optional redirect URLs
  "sandbox_install_compatible": "true",
  "permissions": []
}

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.

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.

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.