Stripe Frontend Engineer Interview Questions

In Stripe's dashboard, users can quickly search through numerous products. To optimize this, we need to implement a binary search algorithm over a sorted list of product names to identify the target product efficiently.
Problem statement: Please implement a function searchProduct(products: List[str], target: str) -> int that returns the index of the target product in the sorted list. If the product doesn’t exist, return -1.
- Example 1:
- Input: searchProduct(['apple', 'banana', 'grape', 'orange'], 'banana')
- Output: 1
- Explanation: 'banana' is found at index 1.
Constraints:
- The list of products should be sorted in ascending order.
- The target product is guaranteed to be a non-empty string.

In complex payment flows, it's essential to manage callback functions efficiently with closures. This is crucial to ensure that payment button interactions on Stripe’s checkout experience are smooth and handle dynamic pricing changes.
Problem statement: Please implement a function handlePaymentClick() which accepts a price parameter and returns a closure. This closure must log the price when called and should be debounced to limit the number of times it can be called within a specified interval (timeFrame). Ensure mixed payment event parameters such as successful and failed transactions are efficiently handled without excessive console logs.
- Example 1:
- Input: handlePaymentClick(100)
- Output: Closure
- Explanation: When the returned closure is called, it should log 100 as the price.
Constraints:
- The timeFrame will be defined as 200 milliseconds.
- The price is always a positive number between 1 and 10000.

The Stripe dashboard search feature allows users to look up data. However, sending an API request for every keystroke can lead to performance issues. Implement a debouncing mechanism for the search input, ensuring that rapid inputs do not overwhelm the server.
Problem statement: Create a debouncedSearch function that accepts a function apiCall and a wait time in milliseconds, returning a new function. This new function should call apiCall only after the user has stopped typing for the specified wait time.
- Example 1:
- Input: debouncedSearch(apiFunction, 300)
- Output: Function returned that waits for user input before making the API call.
Constraints:
- Ensure that the debounced function doesn’t execute until the wait time has elapsed after the last user input.

As Stripe continues to evolve its single-page application (SPA), an efficient client-side router is vital for handling navigation without full-page reloads. This component should manage multiple routes and render the corresponding components accordingly.
Problem statement: Please design a Router class that supports the following methods:
- addRoute(path: string, component: Function): void — to define a new route.
- navigate(path: string): void — to navigate to a specific route, triggering the rendering of its associated component.
- getCurrentRoute(): string — to get the currently rendered path.
- Example 1:
- Input: addRoute('/home', HomeComponent)
- Output: undefined
- Explanation: This method registers a new route but does not return a value.
Constraints:
- All paths are unique and strictly follow a '/' notation.
- Components are simple functions that return JSX elements.