Build a Secure Stripe Dashboard in Retool

Step 1: Securely Connect Retool to Stripe

The foundation of any powerful tool is secure data access. We'll connect Retool to Stripe using an API key. For maximum data security, we strongly recommend creating a Restricted API Key in Stripe that only has the permissions this tool needs: reading charges (charges:read) and creating refunds (refunds:write).

1. In your Retool dashboard, navigate to the Resources tab and click Create new > Resource.
2. Select Stripe from the list of built-in integrations.
3. Give the resource a clear name, like Stripe_Finance_Ops.
4. Navigate to your Stripe Developer Dashboard, create a new Restricted Key with the appropriate permissions, and copy it.
5. Paste your Stripe secret key into the field in Retool and click Create resource.

Retool now has a secure, tokenized connection to your Stripe account, ready to be used in any application you build.

Step 2: Displaying Live Transactions

Let's get your data on the screen. Our goal is a table that shows the latest payments and refreshes automatically.

1. From your Retool dashboard, create a new application.
2. On the right-hand side, find the Table component in the component library and drag it onto the main canvas.
3. Now, let's create a query to fetch real data. At the bottom of the screen, open the query editor and click + New.
4. Select the Stripe_Finance_Ops resource you created in Step 1.
5. Rename the query to a descriptive name, like get_payments.
6. Configure the Stripe API method:
   • Service: Core Resources
   • Operation: charges → list
7. In the optional parameters, set the limit to 100.
8. To make the dashboard "live," go to the Advanced tab of the query, check the box for Run this query periodically, and set the interval to 60 seconds.

To connect this data to your table, click on the Table component. In the Inspector panel on the right, find the Data property and set its value to {{ get_payments.data }}. You should instantly see your Stripe transactions populate the table!

Step 3: Building Search and a Details View

A list of 100 payments is useful, but your team needs to find specific ones instantly.

1. Create the Search Interface: Drag a Text Input component (named email_search) and a Button onto the canvas.
2. Create a find_customer query: Use the operation customers -> list and set the email parameter to {{ email_search.value }}.
3. Create a search_payments query: Use the operation events -> list, set the type to charge.succeeded, and critically, set the customer parameter to {{ find_customer.data[0].id }}. This tells the query to first find the customer, then find their successful charges.
4. Configure the Search Button to trigger the find_customer query on click. On success of that query, trigger the search_payments query.
5. Create the Details Panel: Drag a Container component onto the canvas. Inside, add several Text components for key details (Amount, Status, etc.).
6. Set the value for each Text component to reference the table's selected row. For example: *Amount:** ${{ (payments_table.selectedRow.amount / 100).toFixed(2) }}.
7. Make the container appear only when a user clicks a row by setting its Hidden property to {{ !payments_table.selectedRow }}.

Step 4: Adding the One-Click Refund Action

This is where you turn a data viewer into an actionable tool.

1. In your details container, drag a Button. Label it "Issue Full Refund" and give it a destructive color like red.
2. Create a new query named create_refund.
3. Set the Stripe API method to Core Resources → refunds → create.
4. In the charge parameter, dynamically pass the ID from the selected table row: {{ payments_table.selectedRow.id }}.
5. Select the "Issue Full Refund" button. In its onClick event handler, configure it to first Show a confirmation modal (e.g., "Are you sure you want to refund this charge?") and then, on confirmation, Trigger query and select create_refund.
6. Finally, to provide immediate feedback, go to the create_refund query. In its Event Handlers, add an "On success" handler that triggers your main get_payments query to refresh the table.

Bonus Power-Up: Daily Slack Summary

Let's make this tool proactive. Instead of just pulling data, let's have it push insights to your team.

1. Add your Slack workspace as a new Resource in Retool.
2. Create a query post_daily_summary using your Slack resource. Choose the postMessage action and select a channel like #finance-reports.
3. In the Message field, you can write a message referencing other queries that aggregate data, for example: Daily Stripe Summary for {{ moment().format('MMMM Do, YYYY') }}:\\n*Total Revenue:* $XXXX.XX
4. In the query's Advanced tab, select Run this query on a schedule and set a cron expression to run it every weekday at 5 PM (0 17 * * 1-5).

The Outcome: A True FinOps Workflow Engine

You’ve now replaced a slow, 5-minute manual process with a secure, 30-second workflow. By building this custom dashboard, you have:

• Increased Efficiency: The finance team can resolve inquiries instantly without context switching.
• Enhanced Security: You’ve eliminated the need for shared Stripe logins, reducing your compliance risk.
• Built a Scalable System: This tool can be easily modified to add new features as your needs evolve.

You didn't just build a dashboard; you built a custom workflow engine perfectly tailored to how your team operates.

Ready to Build Your Own Business Apps?

See for yourself how quickly you can turn business challenges into powerful, secure applications. Sign up for a free Retool account and start building with us today.

Build Your First App