Using Checkout in an ASP.NET Web Forms application (legacy)

The demo in this tutorial was built with Visual Studio Community 2017 and .NET Framework 4.6.1. To follow along, you can use any recent version of Visual Studio. Start by creating an ASP.NET application with the Empty template. In the project creation wizard, ensure that the Web Forms checkbox is enabled.

Add the Stripe.net package to your project from NuGet:

In the Web.config file, add an appSettings section with your publishable and secret key:

<appSettings>
  <add key="StripeSecretKey" value="
sk_test_4eC39HqLyjWDarjtT1zdp7dc
" />
  <add key="StripePublishableKey" value="
pk_test_TYooMQauvdEDq54NiTphI7jx
" />
</appSettings>

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

At the top of the Global.asax.cs file, add the following using statements:

using System.Web.Configuration;
using Stripe;

Later in the file, modify the Application_Start method in the Global class so that it retrieves the secret key from the application settings and passes it to the Stripe client library:

protected void Application_Start(object sender, EventArgs e) {
    var secretKey = WebConfigurationManager.AppSettings["StripeSecretKey"];
    StripeConfiguration.ApiKey = secretKey;
}

Create a new Web Form called Default.aspx. In the file, add the following HTML markup inside of the `` tag:

<form action="/Charge" method="POST">
    <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="<%= stripePublishableKey %>" data-amount="500" data-name="Stripe.com" data-description="Sample Charge" data-locale="auto" data-zip-code="true">
    </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 next step.

The data-key attribute of the <script> tag uses the value of a variable called stripePublishableKey. To define that variable, edit the underlying Default.aspx.cs file and add it to the class definition, extracting the value from the configuration file:

public string stripePublishableKey = WebConfigurationManager.AppSettings["StripePublishableKey"];

Add the necessary using statement to the top of the file:

using System.Web.Configuration;

Create a new Web Form named Charge.aspx to handle the charge and display a message to indicate that it completed. In Charge.aspx.cs, add the following code to the Page_Load method:

if (Request.Form["stripeToken"] != null) {
    var customers = new CustomerService();
    var charges = new ChargeService();

    var customer = customers.Create(new CustomerCreateOptions {
        Email = Request.Form["stripeEmail"],
        SourceToken = Request.Form["stripeToken"]
    });

    var charge = charges.Create(new ChargeCreateOptions {
        Amount = 500,
        Description = "Sample Charge",
        Currency = "usd",
        Customer = customer.Id
    });

    Console.WriteLine(charge);
}

The code in the Page_Load method handles the incoming POST request that Checkout performs on the front-end. 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.

Add the necessary using statement to the top of the file:

using Stripe;

That’s it, a complete Stripe and ASP.NET Web Forms integration built with C#.

To run the application, navigate to Default.aspx.cs in Visual Studio and select “Start Debugging” from the “Debug” menu. Visual Studio will run the application and launch a browser window to display the page.

In the web browser, 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.