Setting up Stripe Dashboards: A Comprehensive Guide

• December 29th, 2021

STRIPE DASHBOARDS

Stripe is a popular software among businesses to simplify their payment processing and transaction handling activities. It provides a payment processing platform and several useful integrations to e-commerce websites and other device-based applications. This article discusses Stripe Dashboards that are vibrant and insightful, featuring an easy way to visualize and include different transaction-related variables which are custom-fit for your business.

Along with the discussion on the dashboard setup, you will also read some limitations of the methods discussed and some useful solutions to combat the same.

Table of Contents

Introduction to Stripe Dashboards

Stripe dashboards facilitate an interesting way to configure and manage your Stripe account. You can readily track payments, refunds, monetary integrations, and other activities in a consolidated space with easy access and integration to other platforms. Also read Stripe to BigQuery Integration.

Stripe Dashboards: Dashboards in Stripe  - Transfer Data for Free from Stripe to your target destination
Various components of the Stripe Dashboard
Image Source: https://stripe.com/docs/dashboard  

Hevo Data: Integrate and Analyse your Data Seamlessly

Hevo is a No-code Data Pipeline. It supports pre-built data integrations from 100+ data sources, including Stripe. Hevo offers a fully managed solution for your data migration process. It will automate your data flow in minutes without writing any line of code. Its fault-tolerant architecture makes sure that your data is secure and consistent. Hevo provides you with a truly efficient and fully automated solution to manage data in real-time and always have analysis-ready data at your destination.

Get Started with Hevo for Free

Let’s look at some salient features of Hevo:

  • Fully Managed: It requires no management and maintenance as Hevo is a fully automated platform.
  • Data Transformation: It provides a simple interface to perfect, modify, and enrich the data you want to transfer. 
  • Real-Time: Hevo offers real-time data migration. So, your data is always ready for analysis.
  • Schema Management: Hevo can automatically detect the schema of the incoming data and map it to the destination schema.
  • Live Monitoring: Advanced monitoring gives you a one-stop view to watch all the activities that occur within pipelines.
  • Live Support: Hevo team is available round the clock to extend exceptional support to its customers through chat, email, and support calls.
Sign up here for a 14-Day Free Trial!

Significance and Features of Stripe Dashboards

The Stripe dashboard is the pivot to manage your business and financial interactions on Stripe. There are different sections in the dashboard that can help you derive insights and detailed information on specific aspects. 

There are three main functional areas under the Stripe Dashboard. The first section allows you to learn about payments, payouts and your customers. In the second section, you can gather other product and sales-related details. APIs and event logs can be tracked with the third section. All these are listed in the left menu section, as shown below:

Stripe Dashboards: Monitor Integration  - Transfer Data for Free from Stripe to your target destination
Monitoring Integrations with Dashboard insights
Image Source: https://stripe.com/docs/dashboard  

How to Setup Stripe Dashboards?

Follow these steps to get started with setting up your Stripe Dashboards:

Step 1: Create a Stripe Account and Confirm it

You can head over to the Stripe dashboard to create a free account. Fill all the required details and confirm your account via email. It is always recommended to start a new account for each new project or endeavours to avoid any data and command clashes. 

Stripe Dashboards: Create Account

Step 2: Activate your Stripe Account

Your Stripe account will be an active channel for cash inflow which requires you to activate it with address, bank account and other details. Activate your account and await the review to be completed. 

Stripe Dashboards: Activate your Account  - Transfer Data for Free from Stripe to your target destination
Stripe Dashboards: Stripe Review
Activating your account
Image Source: https://help.sharetribe.com/en/articles/1055989-how-to-configure-your-stripe-account-and-get-api-keys-for-your-marketplace 

Step 3: Enable Stripe Connect

Once you have an activated account, you can enable Stripe to connect for your platform. Under the “Settings” option in the left menu, click on “Get Started” under Connect.  Select “Build a platform or marketplace”. Stripe will follow up with a review process for your account.

Stripe Dashboards: Enable Stripe Connect
Stripe Dashboards: Enable Stripe Connect  - Transfer Data for Free from Stripe to your target destination
Enabling Stripe Connect
Image Source: https://help.sharetribe.com/en/articles/1055989-how-to-configure-your-stripe-account-and-get-api-keys-for-your-marketplace 

Step 4: Connect Dashboard will be Visible

After the review process, you will be able to see the Connect dashboard. You can get started with adding different parameters, representations and insights to be visible on your dashboard. 

Stripe Dashboards: Connect Settings  - Transfer Data for Free from Stripe to your target destination
Connect Setting can be accessed through Settings
Image Source: https://help.sharetribe.com/en/articles/1055989-how-to-configure-your-stripe-account-and-get-api-keys-for-your-marketplace

Your dashboard will reflect valuable insights from all the products, prices, checkout redirects and payment confirmations that occur on your business website. Other than enabling these features on the dashboard, you can also use APIs, HTML and webhooks to specify and define these parameters.

  • To define product names, images, price and currency you can run the following code in Java or .NET, as per convenience:
//Java//
ProductCreateParams params = ProductCreateParams.builder()
  .setName("T-shirt")
  .build();
Product product = Product.create(params);
 
PriceCreateParams params = PriceCreateParams.builder()
  .setProduct("{{PRODUCT_ID}}")
  .setUnitAmount(2000)
  .setCurrency("usd")
  .build();
Price price = Price.create(params);
//.NET//
var productService = new ProductService();
var options = new ProductCreateOptions
{
    Name = "T-shirt",
};
var product = productService.Create(options);
var priceService = new PriceService();
var options = new PriceCreateOptions
{
    Product = "{{PRODUCT_ID}}",
    UnitAmount = 2000,
    Currency = "usd",
};
var price = priceService.Create(options);
  • The redirection to checkout on your website can be generated using the dashboard or run the following command:
<script src="https://js.stripe.com/v3/"></script>
var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
 
stripe.redirectToCheckout({
  lineItems: [{
    price: '{{PRICE_ID}}', // Replace with the ID of your price
    quantity: 1,
  }],
  mode: 'payment',
  successUrl: 'https://example.com/success',
  cancelUrl: 'https://example.com/cancel',
}).then(function (result) {
  // If `redirectToCheckout` fails due to a browser or network
  // error, display the localized error message to your customer
  // using `result.error.message`.
});

Businesses that prefer implementing react commands can directly install the same and run the following code for redirect to checkout:

npm install @stripe/stripe-js
 
import React from 'react';
import ReactDOM from 'react-dom';
import { loadStripe } from '@stripe/stripe-js';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
 
function App() {
  const handleClick = async (event) => {
    // When the customer clicks on the button, redirect them to Checkout.
    const stripe = await stripePromise;
    const { error } = await stripe.redirectToCheckout({
      lineItems: [{
        price: '{{PRICE_ID}}', // Replace with the ID of your price
        quantity: 1,
      }],
      mode: 'payment',
      successUrl: 'https://example.com/success',
      cancelUrl: 'https://example.com/cancel',
    });
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer
    // using `error.message`.
  };
  return (
    <button role="link" onClick={handleClick}>
      Checkout
    </button>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));
  • The Dashboard further reveal details of the successful payments as a list of payments and other billing information. It can also be handled by a custom script under Webhooks for easy event handling and acknowledgement:
stripe listen --forward-to localhost:4242/webhook
Ready! Your webhook signing secret is '{{WEBHOOK_SIGNING_SECRET}}' (^C to quit)
 
// Set your secret key. Remember to switch to your live secret key in production!
// See your keys here: https://dashboard.stripe.com/account/apikeys
StripeConfiguration.ApiKey = "sk_test_4eC39HqLyjWDarjtT1zdp7dc";
 
using System;
using System.IO;
using Microsoft.AspNetCore.Mvc;
using Stripe;
 
namespace workspace.Controllers
{
    [Route("api/[controller]")]
    public class StripeWebHook : Controller
    {
        // You can find your endpoint's secret in your webhook settings
        const string secret = "whsec_...";
 
        [HttpPost]
        public async Task<IActionResult> Index()
        {
            var json = await new StreamReader(HttpContext.Request.Body).ReadToEndAsync();
 
            try
            {
                var stripeEvent = EventUtility.ConstructEvent(json,
                    Request.Headers["Stripe-Signature"], secret);
 
                // Handle the checkout.session.completed event
                if (stripeEvent.Type == Events.CheckoutSessionCompleted)
                {
                    var session = stripeEvent.Data.Object as Checkout.Session;
 
                    // Fulfill the purchase...
                    HandleCheckoutSession(session);
                }
                else
                {
                    return Ok()
                }
            }
            catch (StripeException e)
            {
                return BadRequest();
            }
        }
    }
}

Screen Captures Sourced From: ShareTribe and Stripe.

Limitations of Manual Integration

While many features can be implemented using the script formats as discussed above, there are certainly some limitations to manually integrating it using code. Firstly, one requires adequate knowledge of the language for implementation. With growing requirements and frequent updates, the use-case might change and can be hard to keep up with at a technical level. 

Even if technical skills are well-commanded, a manual process is more prone to carry errors, inconsistencies, and the possibilities of bugs and wrongly implemented scripts are also at a high. Running scripts can be a one-time task to implement, but a need for automation arises in the longer run. Finding an alternative software to cater the automated integrations and updates can help overcome these limitations.

Conclusion 

Thus, you can set up your Stripe Dashboards easily using the steps taken in this article. Specific commands, APIs, and webhooks can be used to define specific sections as per your business requirements. For a scalable and automated solution, Hevo can be a good option for overcoming technical issues.

Visit our Website to Explore Hevo

Hevo Data provides its users with a simpler platform for integrating data from 100+ sources for Analysis such as Stripe.

Want to take Hevo for a spin?Sign Up for a 14-day free trial and experience the feature-rich Hevo suite first hand. You can also have a look at our unbeatable pricing that will help you choose the right plan for your business needs!

Share your experience of using Stripe dashboards in the comment section below.

No-code Data Pipeline for your Data Warehouse