Using Checkout in an ASP.NET MVC application

    Quickly integrate Checkout into your ASP.NET MVC-based site to provide your users with a streamlined, mobile-ready payment experience.

    This tutorial demonstrates how to accept payments with Stripe Checkout in an ASP.NET application built with C# and .NET Core. The application uses Checkout to accept credit cards from the end user and send tokens to a back-end API. The back-end controller uses the Stripe .NET library to create a charge. There are four steps:

    1. Install dependencies
    2. Create the ASP.NET controller
    3. Create the Razor view templates
    4. Run the application

    Step 1: Install and configure dependencies

    To follow along, you need a .NET Core environment with version 1.0. Use the dotnet tool from the command line to generate a new MVC project:

    dotnet new mvc
    

    Add the Stripe.net package to your project:

    dotnet add package Stripe.net
    

    Fetch the dependencies:

    dotnet restore
    

    In the appsettings.json file, add a Stripe section with your publishable and secret key:

    "Stripe": {
      "SecretKey": "sk_test_BQokikJOvBiI2HlWgH4olfQ2",
      "PublishableKey": "pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    }
    

    These keys identify your account when you communicate with Stripe. Storing the keys in your application settings file helps cleanly separate configuration from code. Avoid hard-coding API access keys and other sensitive data in your application code.

    In the Startup.cs file, add a line to the Configure method to retrieve the secret key from the application settings and pass it to the Stripe client library:

    StripeConfiguration.SetApiKey(Configuration.GetSection("Stripe")["SecretKey"]);
    

    To make the key available in Razor templates, the application needs a dedicated class that it can use when it deserializes the Stripe section of the configuration file. Create a class called StripeSettings with string properties that match the key names from the configuration file:

    public class StripeSettings
    {
        public string SecretKey { get; set; }
        public string PublishableKey { get; set; }
    }
    

    In the Startup.cs file, add a line to ConfigureServices to register the configuration information so that it can be injected into the Razor template:

    services.Configure<StripeSettings>(Configuration.GetSection("Stripe"));
    

    Step 2: Create the ASP.NET controller

    In the HomeController.cs file, add a method called Charge to the HomeController class. The Charge method returns the type IActionResult and accepts two string parameters: stripeEmail and stripeToken.

    public IActionResult Charge(string  stripeEmail, string stripeToken)
    {
        var customers = new StripeCustomerService();
        var charges = new StripeChargeService();
    
        var customer = customers.Create(new StripeCustomerCreateOptions {
          Email = stripeEmail,
          SourceToken = stripeToken
        });
    
        var charge = charges.Create(new StripeChargeCreateOptions {
          Amount = 500,
          Description = "Sample Charge",
          Currency = "usd",
          CustomerId = customer.Id
        });
    
        return View();
    }
    

    The Charge method handles the incoming POST request that Checkout performs on the frontend. It uses the email address and card token from the POST request body to create a Stripe customer. Next, it invokes the charges.Create method, providing the Customer ID to associate the transaction with the customer.

    In this example, the application charges the user $5. Stripe expects the developer to describe charges in cents, so compute the value of the Amount parameter by multiplying the desired number of dollars by one hundred. Stripe charges also take an optional Description parameter, which is “Sample Charge” in this case.

    Make sure the controller class also has Index and Error methods that simply return views:

    public IActionResult Index()
    {
        return View();
    }
    
    public IActionResult Error()
    {
        return View();
    }
    

    Step 3: Create the Razor view templates

    Replace the contents of the Views/Home/Index.cshtml file with the following:

    @using Microsoft.Extensions.Options
    @inject IOptions<StripeSettings> Stripe
    
    <form action="/Home/Charge" method="POST">
      <article>
        <label>Amount: $5.00</label>
      </article>
      <script src="//checkout.stripe.com/v2/checkout.js"
              class="stripe-button"
              data-key="@Stripe.Value.PublishableKey"
              data-locale="auto"
              data-description="Sample Charge"
              data-amount="500">
      </script>
    </form>
    

    The HTML script tag loads and initializes Checkout. It adds a button to the form that the user can click to display the credit card overlay. The overlay automatically performs validation and error handling. The action attribute specifies the path of the Charge route created in the previous step.

    The inject statement at the beginning of the template makes the StripeSettings instance available for use inside of the template. The data-key attribute of the script tag is set to the value of the publishable Stripe key, obtained from the StripeSettings instance.

    Create a file named Views/Home/Charge.cshtml for the template that shows users a message when the charge succeeds:

    <h2>You successfully paid <strong>$5.00</strong></h2>
    

    You can optionally modify the Views/Shared/_Layout.cshtml file to change the layout used by the views:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Stripe Checkout Example</title>
    <body>
      @RenderBody()
    </body>
    </html>
    

    That’s it, a complete Stripe and ASP.NET MVC integration built with C# and Razor templates. You can see the full example on GitHub.

    Step 4: Run the application

    Run the application from the command line:

    dotnet run
    

    Navigate to the running application in your browser and click the button to launch the payment form. If you’re using Stripe test keys, you can test it with some dummy data. Enter the test number 4242 4242 4242 4242, a three digit CVC, and a future expiry date. Submit the form and see if the application correctly displays the successful charge page.