-
Notifications
You must be signed in to change notification settings - Fork 73
Developer Support
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.