Use Blazor to collect credit card information
Tags: webdev, csharp, dotnet
Published: 2020-04-28 11:05:51

---
title: Use Blazor to collect credit card information
published: true
date: 2020-04-27 06:00:00 UTC
tags: webdev, csharp, dotnet
canonical_url: https://wellsb.com/csharp/aspnet/stripe-customer-credit-card-payment-with-blazor/
---

In the previous tutorial, you learned how to [link a Stripe Connect account](https://wellsb.com/csharp/aspnet/stripe-connect-express-and-blazor/) with a local user store in a Blazor application. If, instead, you need a way to collect payment information from your customers, this tutorial will help you understand the Stripe customer flow.

## Source Code

Source code for this project, and for others in the Blazor and Stripe series, are [available on Github](https://github.com/bradwellsb/blazor-stripe).

## Disclaimer

This tutorial does not use Stripe’s browser-side library, Stripe.js, to collect credit card information. As a result, credit card information will be passed through your server if you are working with a server-side Blazor project. This tutorial is intended for testing purposes only. A subsequent tutorial will demonstrate the preferred method where a token is generated client-side using Stripe.js and JSInterop.

## What you will need

This guide is built around a Blazor application, but you can also use the principles in an MVC or Razor pages project. We will be using the `Stripe.net` Nuget package. Install it by issuing the following command in the Package Manager Console.

```
Install-Package Stripe.net
```

You can easily configure `Stripe.net` by setting some global variables in your project’s **Startup.cs** file.

```csharp
StripeConfiguration.ApiKey = Configuration.GetSection("Stripe")["ApiKey"];
StripeConfiguration.ClientId = Configuration.GetSection("Stripe")["ClientId"];  
```

You can find your API key in your [Stripe developer dashboard](https://dashboard.stripe.com/test/apikeys). Don’t forget to use the Test key if your application is not production-ready. Your Client ID can be found on the [Stripe Connect Settings](https://dashboard.stripe.com/settings/applications) page. The above code is using the Secret Manager to store sensitive data. Please see the [Secret Manager tutorial](https://wellsb.com/csharp/aspnet/keep-secrets-out-of-asp-net-source-code/) if you have questions about keeping secrets out of your source code.

## Create Data Model

In this tutorial, I will be collecting a customer’s credit card information. Depending on your application needs, you may need to collect ACH bank account information instead.

First, create a model that will represent the Card data required by Stripe.

```csharp
public class CardModel
{
    [Required, Display(Name = "Card Holder Name")]
    public string CardHolderName { get; set; }
 
    [Required, CreditCard, Display(Name = "Card Number")]
    public string CardNumber{ get; set; }
 
    [Required, Display(Name = "Expiration Month"), Range(0, 12)]
    public long? CardExpiryMonth { get; set; }
 
    [Required, Display(Name = "Expiration Year"), Range(2020,2100)]
    public long? CardExpiryYear { get; set; }
 
    [Required, Display(Name = "CVC Security Code"),
        RegularExpression("^[0-9]*$", ErrorMessage = "CVC security code can only contain numbers")]
    public string CardCvc { get; set; }
}
```

I went ahead and added some [data validation annotations](https://wellsb.com/csharp/aspnet/efcore-csharp-model-validation/) to this model.

## Design Customer Setup Page

Now, create a new page in your Blazor web app called **CustomerSetup.razor** with the following route and using directive.

```
@page "/Account/CardSetup"
@using Stripe

```

On this page, we will create a form that accepts a user’s payment information. Since we are interested in creating a Stripe Customer and linking it to an existing user in our database, let’s ensure a user is logged in in order to see the form. We can do this using the `AuthorizeView` component.

```html
<AuthorizeView Context="authContext">
	<Authorized>

	</Authorized>
</AuthorizeView>
```

Your form may look like the following.

```html
<EditForm OnValidSubmit="@FormSubmit" Model="@accountOptions">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <h4>Add Credit Card</h4>
    <div class="form-group row">
        <label for="cardholderName" class="col-sm-6 col-form-label">Cardholder Name:</label>
        <input id="cardholderMame" class="form-control col-sm-6 input-lg" type="text"
               @bind="accountOptions.CardHolderName">
    </div>
    <div class="form-group row">
        <label for="cardNum" class="col-sm-6 col-form-label">Card Number:</label>
        <input id="cardNum" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardNumber" />
    </div>
    <div class="form-group row">
        <label for="cardExpiryMo" class="col-sm-6 col-form-label">Expiration Month:</label>
        <input id="cardExpiryMo" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardExpiryMonth" />
    </div>
    <div class="form-group row">
        <label for="cardExpiryYear" class="col-sm-6 col-form-label">Expiration Year:</label>
        <input id="cardExpiryYear" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardExpiryYear" />
    </div>
    <div class="form-group row">
        <label for="cardCvc" class="col-sm-6 col-form-label">CVC Security Code:</label>
        <input id="cardCvc" class="form-control col-sm-6 input-lg" type="number"
               @bind="accountOptions.CardCvc" />
    </div>
    <div class="row">
        <div class="col-12 text-right">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</EditForm>
```

[![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/04/blazor-stripe-creditcard-form-min-300x183.png)](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/04/blazor-stripe-creditcard-form-min.png)

## Configure Customer Setup Logic

Next, you must configure your form’s binding and OnSubmit handler. Create an instance of the model you created previously to be consumed by the form, and create the `FormSubmit` method. The name of this method should correspond to the name you provided as the `OnValidSubmit` callback of the `EditForm` component.

```csharp
@code {
    private Card card;
    private CardModel accountOptions = new CardModel();

    private async Task FormSubmit()
    {
	
    }
}
```

The `FormSubmit()` method should generate a Stripe token based on the credit card information. Then it should create a customer and link the credit card information (by token) to that customer. In a real application, you would only save the newly created customer’s Stripe Customer ID to your local database.

```csharp
private async Task FormSubmit()
{
    var cardOptions = new CreditCardOptions()
    {
        Number = accountOptions.CardNumber,
        ExpMonth = accountOptions.CardExpiryMonth,
        ExpYear = accountOptions.CardExpiryYear,
        Cvc = accountOptions.CardCvc
    };
 
    string cardToken = CreateCardToken(cardOptions);
 
    string customerId = CreateCustomer(accountOptions.CardHolderName);
    //this is where you would save customerId to your app's user table
 
    card = LinkCardToCustomer(customerId, cardToken);
}
```

Above is how that flow might come together. Next, we will write the `CreateCardToken()`, `CreateCustomer()`, and `LinkCardToCustomer()` methods.

```csharp
private string CreateCardToken(CreditCardOptions cardOptions)
{
    var options = new TokenCreateOptions
    {
        Card = cardOptions
    };
 
    return new TokenService().Create(options).Id;
}

private string CreateCustomer(string description)
{
    var options = new CustomerCreateOptions
    {
        Description = description
    };
 
    return new CustomerService().Create(options).Id;
}

private Card LinkCardToCustomer(string customerId, string accountToken)
{
    var options = new CustomerUpdateOptions
    {
        Source = accountToken,
    };
 
    return new CustomerService().Update(customerId, options).Sources.FirstOrDefault() as Card;
}
```

## A Note about Error Handling

When designing the page’s logic, you should include appropriate error handling. For example, when generating a token from account information, you should confirm that the token creation succeeded before proceeding. You can do this by catching `StripeException` errors and returning an empty string from the `CreateCardToken()` method if token creation failed.

```csharp
private string CreateCardToken(CreditCardOptions cardOptions)
{
    var tokenOptions = new TokenCreateOptions
    {
        Card = cardOptions
    };
 
    try
    {
        return new TokenService().Create(tokenOptions).Id;
    }
    catch (StripeException e)
    {
        return "";
    }
}
```

Then, only proceed to customer creation if the token was successfully created.

```csharp
string cardToken = CreateCardToken(cardOptions);
 
if (cardToken != null)
{
    ...
}
```

[![](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/04/blazor-stripe-creditcard-saved-min-300x76.png)](https://wellsb.com/csharp/wp-content/uploads/sites/2/2020/04/blazor-stripe-creditcard-saved-min.png)

## The Bottom Line

In this tutorial, you learned how to work with the `Stripe.net` library to integrate Stripe payment and customer information into your Blazor application. This is a critical step if you wish to monetize your application. Hopefully this tutorial has demonstrated that Blazor is, indeed, ready to be used in real-world applications!

[Source](https://wellsb.com/csharp/aspnet/stripe-customer-credit-card-payment-with-blazor/)