DEV Community

Cover image for Complete Guide to Integrating Stripe in a .NET Application
Adrián Bailador
Adrián Bailador

Posted on • Updated on

Complete Guide to Integrating Stripe in a .NET Application

This guide will walk you through the process of integrating Stripe into a .NET application, from initial setup to implementing payment functionality.

Prerequisites

  1. Visual Studio Code installed on your machine.
  2. .NET SDK installed (preferably the latest version).
  3. A Stripe account. Sign up at Stripe and obtain your API keys.

Step 1: Create a New .NET Project

Open Visual Studio Code and create a new ASP.NET Core MVC project.

dotnet new mvc -n StripeIntegrationDemo
cd StripeIntegrationDemo
Enter fullscreen mode Exit fullscreen mode

Step 2: Install the Stripe Package

Install the Stripe.Net package from NuGet.

dotnet add package Stripe.net
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure Stripe API Keys

  1. Add API Keys in appsettings.json:

Open the appsettings.json file and add the Stripe configuration section:

    {
      "Stripe": {
        "SecretKey": "your_secret_key_here",
        "PublishableKey": "your_publishable_key_here"
      }
    }
Enter fullscreen mode Exit fullscreen mode

Step 4: Create the Stripe Configuration Model

Create a StripeSettings class in the Models folder to handle Stripe configurations.

namespace StripeIntegrationDemo.Models
{
    public class StripeSettings
    {
        public string SecretKey { get; set; }
        public string PublishableKey { get; set; }
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Update Program.cs

Configure Program.cs to use StripeSettings and register Stripe keys.

using Microsoft.Extensions.Options;
using StripeIntegrationDemo.Models;
using Stripe;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

// Configure StripeSettings using values from appsettings.json
builder.Services.Configure<StripeSettings>(builder.Configuration.GetSection("Stripe"));

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

// Configure Stripe secret key from configuration
StripeConfiguration.ApiKey = builder.Configuration.GetSection("Stripe")["SecretKey"];

app.Run();
Enter fullscreen mode Exit fullscreen mode

Step 6: Create the Payment Controller

Add a PaymentController to handle payment operations. Include error handling and comments for clarity.

using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Options;
using Stripe;
using Stripe.Checkout;
using StripeIntegrationDemo.Models;
using System.Collections.Generic;
using System.Threading.Tasks;

public class PaymentController : Controller
{
    private readonly StripeSettings _stripeSettings;

    public PaymentController(IOptions<StripeSettings> stripeSettings)
    {
        _stripeSettings = stripeSettings.Value;
    }

    [HttpGet]
    public IActionResult Checkout()
    {
        ViewBag.PublishableKey = _stripeSettings.PublishableKey;
        return View();
    }

    [HttpPost]
    public async Task<IActionResult> CreateCheckoutSession()
    {
        var options = new SessionCreateOptions
        {
            PaymentMethodTypes = new List<string> { "card" },
            LineItems = new List<SessionLineItemOptions>
            {
                new SessionLineItemOptions
                {
                    PriceData = new SessionLineItemPriceDataOptions
                    {
                        UnitAmount = 2000,
                        Currency = "eur",
                        ProductData = new SessionLineItemPriceDataProductDataOptions
                        {
                            Name = "Test Product",
                        },
                    },
                    Quantity = 1,
                },
            },
            Mode = "payment",
            SuccessUrl = Url.Action("Success", "Payment", null, Request.Scheme),
            CancelUrl = Url.Action("Cancel", "Payment", null, Request.Scheme),
        };

        try
        {
            var service = new SessionService();
            Session session = await service.CreateAsync(options);
            return Json(new { id = session.Id });
        }
        catch (StripeException e)
        {
            return BadRequest(new { error = e.Message });
        }
    }

    public IActionResult Success()
    {
        return View();
    }

    public IActionResult Cancel()
    {
        return View();
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 7: Create Payment Views

Checkout.cshtml

This view shows the button to start the payment process with Stripe.

@{
    ViewBag.Title = "Checkout";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-light">

<div class="container">
    <div class="py-5 text-center">
        <h2>Checkout</h2>
        <p class="lead">Click the button below to proceed with your payment using Stripe.</p>
        <button type="button" id="checkout-button" class="btn btn-primary">Pay with Stripe</button>
    </div>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
    var stripe = Stripe('@ViewBag.PublishableKey');

    var checkoutButton = document.getElementById('checkout-button');

    checkoutButton.addEventListener('click', function () {
        fetch('/payment/createcheckoutsession', {
            method: 'POST',
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (sessionId) {
            return stripe.redirectToCheckout({ sessionId: sessionId.id });
        })
        .then(function (result) {
            if (result.error) {
                alert(result.error.message);
            }
        })
        .catch(function (error) {
            console.error('Error:', error);
        });
    });
</script>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Success.cshtml

This view displays a success message when the payment completes successfully.

@{
    ViewBag.Title = "Payment Successful";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-light">

<div class="container">
    <div class="py-5 text-center">
        <h2 class="text-success">Payment Successful!</h2>
        <p class="lead">Thank you for your purchase.</p>
        <button onclick="window.location.href='/'" class="btn btn-primary">Return to Home</button>
    </div>
</div>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Cancel.cshtml

This view displays a message when the user cancels the payment.

@{
    ViewBag.Title = "Payment Cancelled";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body class="bg-light">


<div class="container">
    <div class="py-5 text-center">
        <h2 class="text-danger">Payment Cancelled</h2>
        <p class="lead">We're sorry, your payment could not be completed.</p>
        <button onclick="window.location.href='/'" class="btn btn-primary">Return to Home</button>
    </div>
</div>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Step 8: Add the Button to Navigate to the Payment Page

Update Views/Home/Index.cshtml to include a button that redirects to the payment page.

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center mt-5">
    <h1 class="display-4">Welcome, Codú!</h1>
    <a href="/payment/checkout" class="btn btn-primary">Go to Payment Page</a>
</div>
Enter fullscreen mode Exit fullscreen mode

Step 9: Run the Application

Run the application using the command:

dotnet run
Enter fullscreen mode Exit fullscreen mode

Conclusion

You have successfully integrated Stripe into a .NET application. You can now handle payments using Stripe Checkout. Thisguide includes API key configuration, creating a payment controller, implementing payment views, and handling success or cancellation responses.

Useful Links:

Top comments (0)