Stripe Connect Express with Blazor

In my previous post titled Create Stripe Webhooks Receiver I created a webhook and now I want to explore how to use Stripe Connect Express with Blazor.

What is Stripe Connect?

Stripe Connect allows you to develop marketplace and platform applications that can accept money and pay out to connected Stripe accounts. For example, a platform like Lyft has the ability to receive payments from a customer, retain a percentage as a platform fee, and then pay out the difference to the customer’s driver. Those drivers would all be considered Stripe Connect accounts for the Lyft platform.

So, there are three ways to integrate with Stripe Connect. A Standard account is the easiest to integrate, but it has limitations with respect to branding and the type of charges it can handle. A Custom account offers the most control, but it requires significantly more integrations work. An Express account is a happy medium between the two alternatives, and it is the focus of this tutorial.

Configure Stripe

First, like the Stripe webhooks tutorial, this tutorial will rely on the Stripe.net NuGet package. Install it and add it to your server-side Blazor project.

Then, we have to read the configuration from the appsettings.json: for that, I added the following file

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "Stripe": {
    "ApiKey": "sk_test_xxxx",
    "ClientId": ""
  }
}

Now, I’m going to read the configuration from the Program.cs and configure Stripe

var configuration = builder.Configuration;
var env = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT");

configuration
    .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
    .AddJsonFile($"appsettings.{env}.json", true, true);

var app = builder.Build();

string? stripeKey = builder.Configuration["Stripe:ApiKey"];
string? stripeClientId = builder.Configuration["Stripe:ClientId"];
StripeConfiguration.ApiKey = stripeKey;
StripeConfiguration.ClientId = stripeClientId;

In order to obtain the ClientId for Stripe Connect, you have to fill few forms like in the following screenshot.

Get started with Connect form - Stripe Connect Express with Blazor
Get started with Connect form

Remember that if you want to secure your data, Visual Studio offers you way as I explained in this post. To set up your Stripe Connect, you have to review the Connect settings.

Stripe Connect settings
Stripe Connect settings

Here, you have the opportunity to customize the look and feel of the Stripe page for the clients, define from what countries you accept payments, how you want to be paid and other custom functionalities.

In the following screenshot, you see the list of countries to set up.

Set up your Express account - Country
Set up your Express account – Country

Then, you have to set the branding such as Business name, colours, icons and so on.

Stripe Connect Branding
Stripe Connect Branding

In the Integration section, you find your Live mode client ID to use in your settings, you can enable an OAuth flow so users can login with Stripe, and also the redirect URLs after the login.

Stripe Connect Integration
Stripe Connect Integration

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.