Stripe Payment Element in ASP.NET Core MVC & C# | Accept one-time(checkout) + recurring(subscription) payments for cards and dozens of other payment methods?

Accept payment methods from around the globe with a single secure, embeddable UI component. This guide walks you through how to get one-time payments and sell fixed-price subscriptions and provides an example of a well-working integration. Using the codes and documentation in this example, you can customize it according to your needs and integrate it into your own application. You will use Stripe Elements to create a custom payment form that you embed in your app.

Learn how to embed a custom Stripe payment form in your website or application. The client-side and server-side code builds a checkout form with Elements to complete a payment using various payment methods.

The Payment Element is an embeddable UI component that lets you accept up to 25+ payment methods with a single integration (Payment methods: ACH Direct Debit, Affirm, Afterpay and Clearpay, Alipay, Apple Pay, Bacs Direct Debit, Bancontact, Bank transfers, BECS direct debit, Boleto, BLIK, Cards (American Express, China UnionPay (CUP), Discover & Diners, Japan Credit Bureau (JCB), Mastercard, Visa, Cartes Bancaires (CB)), EPS, FPX, Giropay, Grabpay, Google Pay, iDEAL, Klarna, Konbini, Link, OXXO, P24, PayNow, PromptPay, SEPA debit, Sofort, WeChat Pay).

Whether you’re just collecting card payments or dozens of payment methods, the Payment Element is the easiest way to build an embedded and customized payments experience.

Automatically adjusts input fields to collect information based on the payment method and country.
Dynamically sorts payment methods based on a customer’s locale and location to optimize for conversion.
Reduces friction for card payments with input validation, masking, styling and error handling.
Adds new payment methods without any front-end changes, and gives you access to new payment methods as soon as Stripe supports them.

The application supports 3D Secure 2 for card payments.

Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout/subscription experience for your customers.

Examples of One Time(Checkout) + Recurring(Subscription) payment integrations are included.

Full source code is included.

Target Framework: .NET Core – ASP.NET Core 3.1 – Language: c#

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 3

What are the core features of Payment Element?

With Payment Element, Stripe is launching a new generation of Elements (see: https://stripe.com/payments/elements) Previous to the Payment Element, merchants would need to build and maintain a new integration for each separate payment method. Because this is no longer necessary, you would save significant time and resources by utilizing the Payment Element.

See some core features of Payment Element below:

Support for multiple payment methods via a single Elements integration
It surfaces relevant payment options to each buyer through sorting logic based on customer country location (derived from IP address) and preferred language (derived from browser locale)
It is localized for 42 locales: https://stripe.com/docs/js/appendix/supported_locales
It can be styled to merchant brand (font, colors, spacing, etc.)
It is mobile responsive
It has in-built input validations
It is PCI-DSS Compliant

How do I use the Payment Element to offer all the payment methods Stripe supports?

To use the Payment Element to offer all the payment methods Stripe supports, you can pass an array of payment methods to payment_method_types when you create a PaymentIntent. However, you can’t pass all supported payment methods at the same time because some payment methods require different currencies. You can only create a PaymentIntent with payment methods that support the same currency. Please see the Payment method and product support table here: https://stripe.com/docs/payments/payment-methods/integration-options

Configure payment methods

With automatic_payment_methods enabled, Stripe automatically detects the payment methods relevant to your customer. Card payments are enabled by default but you can enable and disable other payment methods in the Stripe Dashboard. Before the payment form is displayed, Stripe evaluates the currency, payment method restrictions, and other parameters to determine the list of supported payment methods. Payment methods that increase conversion and that are most relevant to the currency and customer’s location are prioritized. Lower priority payment methods are hidden beneath an overflow menu.

What is Strong Customer Authentication?

Strong Customer Authentication (SCA) is a new European regulatory requirement to reduce fraud and make online payments more secure. To accept payments and meet SCA requirements, you need to build additional authentication into your checkout flow.

Banks will need to start declining payments that require SCA and don’t meet these criteria. Although the regulation was introduced on 14 September 2019, we expect these requirements to be enforced by regulators over the course of 2020 and 2021.

3D Secure 2—the new version of the authentication protocol rolling out in 2019—will be the main method for authenticating online card payments and meeting the new SCA requirements. This new version introduces a better user experience that will help minimise some of the friction that authentication adds into the checkout flow.

The application supports 3D Secure 2

The Payment Intents API that uses Stripe’s SCA logic to apply the right exemption and trigger 3D Secure when necessary.

The application uses the Payment Intents API

Apple Pay and Google Pay

You can offer these payment methods on their associated platforms when you pass the card type.

For most users, the Payment Element is the best option to process cards. The integration effort is the same as the Card Element and it supports all the common payment flows. It also gives you instant access to additional payment methods, including Apple Pay and Google Pay.

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 4

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 4

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 5

Faster checkout with Link

Link autofills your customers’ saved information in a few simple steps. Your customers’ data is encrypted to keep it secure and, as a certified PCI Service Provider Level 1, Link meets the highest level of certification available in the payments industry.

A customer who visits a business that accepts Link can make a payment with the information they stored in Link by authenticating with an SMS code. After the customer authenticates, Link loads their billing, shipping, and payment details, and then they can pay with one click.

Customers can change their preferred Link payment details, add new cards, or change their address without you needing to manage the changes. For example, if a customer switches from a debit card to a credit card, Link handles the update and automatically applies the changes to your saved link PaymentMethod.

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 6

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 6

Deploy Stripe while keeping your core product team focused.

Techtolia brings experience working with Stripe’s Payments as well as expertise in Product Development, DevOps, and User Experience to quickly deploy Stripe integrations at scale.

As a partner, we can increase velocity while keeping your core team focused on your product. Partnering with an outside team means that your core product team can prioritize features tied to customer value or competitive differentiation.

Stripe Payment Element in ASP.NET Core MVC & C# - Accept Payments - Checkout + Subscriptions - 7

Stripe Atlas

Stripe Atlas is a powerful, safe, and easy-to-use platform for forming a company. By removing lengthy paperwork, legal complexity, and numerous fees, Stripe Atlas helps you launch your startup from anywhere in the world.

If you have not started Stripe Atlas yet, use our invitation link to set up your company in US with Stripe Atlas https://atlas.stripe.com/invite/8ykr8gmr

Update History

Update: 08/03/2022
- Added e-mail pattern to e-mail field to check the e-mail value entered in the subscription form.
- The bug in payments with Apple Pay in the subscription form in mobile browsers has been resolved.
- Removed the SetupFutureUsage="off_session" property used when creating PaymentIntent, so payment methods that do not support this feature are now visible in the form as options.

Our Reviews