Setting up Stripe Dashboards: A Comprehensive Guide

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

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.

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 in the third section. All these are listed in the left menu section, as shown below:

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 endeavour to avoid any data and command clashes. 

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. 

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.

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. 

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 reveals 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 acknowledgment:

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.

Learn more About:

• Stripe Shopify Integration
• Integrate Salesforce, Intercom, and Stripe

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.

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