Overview
Stripe is a very well known payment service to let your end users pay easily and beautifully for your product/service(s) within your mobile apps and websites.
This article will guide you steps to integrate Stripe SDK into a newly created .NET MAUI app step by step.
Prerequisites
.NET 8
Java SDK 17
Visual Studio on Windows or Visual Studio for Mac, alternatively
.NET workloads for .NET MAUI
Download the get-started source code
Steps
0/ Open the downloaded solution dotnet-maui-stripe-get-started.sln
0.a/ Create Shared.dev.cs file by making a copy of Shared.dev.cs.sample
|--src
|-- QuickStart.Dotnet.StripeHost
|-- Shared.cs
|-- Shared.dev.cs <------ YOUR_FILE_HERE
0.b/ Replace placeholders with your secrets
partial class ClientHelper
{
public const string API_KEY = "YOUR_API_KEY";
public const string DEFAULT_PUBLISHABLE_KEY = "YOUR_DEFAULT_PUBLISHABLE_KEY";
}
HINTS: You can copy these secrets quickly from the official quick start by Stripe.
0.c/ Run the API host
cd your-path-to-source-code/src/QuickStart.Dotnet.StripeHost
dotnet run -c debug
0.d/ Expose your API endpoint with ngrok
ngrok http http://localhost:4242
NOTE: ngrok is a tool that allows us to expose a development endpoint publicly via the network with ease.
0.e/ Amend Shared.dev.cs with the generated URL
partial class ClientHelper
{
public const string BACKEND_URL= "https://generated-subdomain.ngrok-free.app";
}
1/ Create a new .NET MAUI app from Visual Studio
NOTE: Follow step by step with all default options
2/ Install Stripe SDK for .NET MAUI
2.a/ Upgrade all .NET MAUI packages before installing Stripe.MAUI package
2.b/ Search for Stripe.Maui package and install
NOTE:
3/ Enable Stripe in MauiProgram.cs
3.a/ Add shared files to the .NET MAUI project
NOTE: We will add these files as links to share code across projects.
3.b/ Add Stripe to MauiAppBuilder
builder
.UseStripe(
QuickStart.Dotnet.Stripe.ClientHelper.DEFAULT_PUBLISHABLE_KEY
);
4/ Inject IPaymentSheet into MainPage.xaml.cs
public partial class MainPage : ContentPage
{
private readonly IPaymentSheet paymentSheet;
public MainPage(IPaymentSheet paymentSheet)
{
InitializeComponent();
this.paymentSheet = paymentSheet;
}
}
NOTE: To get the DI to work, we need to register MainPage as a scoped dependency through MauiAppBuilder.
builder.Services.AddScoped<MainPage>();
5/ Try paying with payment intent
5.a/ Override MainPage.xaml file with the below content
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="GetStartedWithStripe.MainPage">
<StackLayout
Padding="30,24"
Spacing="25">
<Button
x:Name="PayNowButton"
Text="Pay now"
SemanticProperties.Hint="Pay with Stripe"
Clicked="OnPayNow"
IsEnabled="False"
VerticalOptions="EndAndExpand"
HorizontalOptions="Fill" />
</StackLayout>
</ContentPage>
5.b/ Fetch payment intent client secret from the above API endpoint
private string paymentIntentClientSecret;
protected override async void OnAppearing()
{
base.OnAppearing();
await QuickStart.Dotnet.Stripe.ClientHelper.FetchPaymentIntent()
.ContinueWith(t =>
{
var (ok, msg) = t.Result;
if (!ok)
{
MainThread.BeginInvokeOnMainThread(() => DisplayAlert("API Error", msg, "OK"));
return;
}
paymentIntentClientSecret = msg;
MainThread.BeginInvokeOnMainThread(() => PayNowButton.IsEnabled = true);
})
.ConfigureAwait(false);
}
NOTE:
By default, Pay now button is disabled
It will only be enabled if we can fetch the client secret successfully from the API
5.c/ Add OnPayNow handler
private async void OnPayNow(object sender, EventArgs e)
{
var configuration = new Configuration("TuyenTV.dev Co.Ltd.");
var (result, msg) = await paymentSheet.PresentWithPaymentIntentAsync(paymentIntentClientSecret, configuration)
.ContinueWith(t =>
{
if (t.IsCompletedSuccessfully) return (t.Result, null);
return (PaymentSheetResult.Canceled, "Cannot pay for a reason...");
});
switch(result)
{
case PaymentSheetResult.Completed:
await DisplayAlert("Payment Result", "Payment completed successfully!", "OK");
break;
case PaymentSheetResult.Canceled:
if (!string.IsNullOrWhiteSpace(msg))
{
await DisplayAlert("Payment Result", "Payment completed failed!", "Try again");
}
break;
}
Debug.WriteLine("Payment complete.");
}
6/ Run up and check out
Till now, you're ready to check out the result on both Android and iOS.
Wrap-ups
I just guided you on how to integrate Stripe SDK into a newly created .NET MAUI project. You can follow these steps to add it to your project(s) easily.
Documents from Stripe are also very helpful, please always take a look to understand a feature you desire to add to your app.
If you want to check out the source code of the binding libraries, you can check it here. If you want to check out the source code of the .NET MAUI library (along with a sample app), you can check it here.
Happy Coding!!!
