TheLazy.Dev
Portfolio GitHub

Blog

webdev |dotnet |csharp |stripe

Complete Guide to Integrating Stripe in a .NET Application

adrianbailador

Adrián Bailador

Posted on July 17, 2024

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:

💖 💪 🙅 🚩
adrianbailador
Adrián Bailador

Posted on July 17, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Complete Guide to Integrating Stripe in a .NET Application
webdev Complete Guide to Integrating Stripe in a .NET Application

July 17, 2024