Skip to content

Developer Support

Jon Cipriano edited this page Oct 4, 2022 · 13 revisions

Getting Started

I’m developing a Stripe App and I need some support. Where can I go?
Many developer questions can be answered in our Stripe Apps docs or our Github wiki. Be sure to review both the open and closed Github issues to see if other developers have had the same question. We also staff a Discord channel to provide quick resolutions to specific integration issues.

FAQs

What technologies are used in Stripe Apps?
Stripe Apps leverage React and Typescript. While many features of React are supported (e.g. hooks, state, etc.) not all React features are available. You can read about this in greater detail here.

What are the technical limitations of Stripe Apps UI?
Stripe Apps do not allow access to the Document Object Model (DOM) and do not support native HTML tags. Instead developers need to use the UI Components provided by Stripe. Read more about the limitations here.

Common Issues

The following is a non-exhaustive list of things you might want to do which are disallowed by the sandboxing, together with ideas on how to approach the problem instead.

I want to open a popup

You can't use window.open() in your app code but you can give a Link or Button component a "href" and "target" properties to turn them into anchors that open onto a new tab. If the reason you're reaching for window.open() is because your app needs to be aware of the popup being open, you can always give the anchor component an "onPress" prop to inform your app logic of when it has been clicked.

I want to make an HTTP request

Because requests originating from your code will not have an origin set, the only way to communicate with an API even once you've added the origin to the connect-src array is for that API to return an Access-Control-Allow-Origin: * header on all requests (as well as all other required CORS headers).

If you control the API you can add this CORS configuration. In ExpressJS with the "cors" package for example it's as easy as writing app.use(cors()). If you do not control the API you could set up a proxy that you do control which adds the required headers and have your app call that instead.

I need to use cookies to store session information

Even with the correct CORS headers, requests originating from the sandbox will never contain cookies since credentials: "always" cannot be set on requests from the blank origin. This means you have to find a different way to associate a session with a user.

The one set of credentials that can be securely verified by your backend is the app user's user and account ids, which can go through the signature verification process. Depending on your needs you can either use the user id, account id or a composite of both to key a server-side session store instead of encoding that state in a cookie.

I want to use a client-side routing framework like React Router

Since the sandbox does not have access to the main window location, router setups that interact with the URL bar such as React Router's BrowserRouter or HashRouter will not work. However, you can use a MemoryRouter with a "fake" URL scheme scoped to your application, or some other way to implement top-level view changing, such as a state machine available through a shared context.

I want to store user information or maintain state between views

Because your app gets completely unloaded whenever a user navigates between dashboard views or loads a different app, you might want to save user state somewhere so your app can start from where it had left off the next time it is open. However, the sandbox forbids access to any data storage APIs such as local or session storage.

Until the DataStore API is released, the only way to save data against a user is to do it yourself on the server. The mechanism described above to store session information would be appropriate for this.

I want to use custom styles on my components

Because you do not have access to the DOM and UI toolkit components do not pass on the "style" prop to the renderer, you are limited to using the "css" prop on Box components as demonstrated in the documentation.

I want a reference to the underlying DOM element of a component

This is not possible. UI toolkit components do not take refs and app code cannot access the rendered DOM so other tricks like document.getElementById don't work either. Try to express your app's functionality using the pieces provided by the UI toolkit. If something essential is missing from the toolkit, you might be able to make a feature request.

The exact same restriction applies to trying to listen on any of the standard DOM events. The UI toolkit has a limited number of "onX" callbacks available for interactive elements and they are invoked with different or partial information compared to a native event.

Can Stripe Apps be monetized?

Monetization (charging fees for installation/use) is not currently supported but this feature is on the development roadmap.

I have an existing Connect Extension application. Do I need to migrate to Stripe Apps? \ Not right away. Connect Extensions will have a 2 year grace period during which developers can slowly build out and test their new Stripe App.

What are the benefits of migrating a Connect Extension to a Stripe App?
Stripe Apps have a more simplified authentication process that will reduce the friction for both developers and users. Stripe Apps also has a more granular permissions framework for both objects and events. This ensures your app is only accessing or modifying the data it needs.