Payment Intent Stripe Strong Customer Authentication (SCA)

Starting in September 2019, new regulations called Strong Customer Authentication (SCA) requires businesses in Europe to request additional online authentication. This blog shows how to implement SCA with Stripe.

SCA aims to reduce the risk of:

  • Potential online fraud
  • Reduce the cost of processing fraudulent transactions
  • Increase cardholder confidence in using online services
  • Comply with international regulations such as PCI-DSS and PSD2

Stripe JavaScript

To start you need to add the following in every page on your site, in doing so, it helps keep your site PCI compliant.

<script src="https://js.stripe.com/v3/"></script>

Create Payment of Intent

Every time you update your basket or additional add shipping fees, you need to update you Intent and add it to your form.

public static class StripePayment
    {
        public static string PaymentOfIntent()
        {
            StripeConfiguration.ApiKey  = "****";
            var service                 = new PaymentIntentService();
            var option                  = new PaymentIntentCreateOptions
            {
                Amount              = 29805,
                Currency            = "gbp",
                PaymentMethodTypes  = new List {"card"}
            };
            string intentId = service.Create(option).ClientSecret;
            return intentId;
        }
}

Custom JavaScript

Here is the custom code that this demo uses to call the stripe.handleCardPayment.

var stripe = Stripe('***');
var elements = stripe.elements();
var cardElement = elements.create('card');
cardElement.mount('#card-element');
var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');
var clientSecret = cardButton.dataset.secret;
cardButton.addEventListener('click', function (ev) {
    ev.preventDefault();
    stripe.handleCardPayment(
        clientSecret, cardElement, {
            payment_method_data: {
                billing_details: { name: cardholderName.value }
            }
        }
    ).then(function (result) {
        if (result.error) {
            alert("Failed");
        } else {
            alert("The payment has succeeded. Display a success message.");
        }
    });
});

We are now shown the Strong Customer Authentication (SCA) screen where you can now enter your authentication.

3D secure
Fulfilment

You should not attempt to handle the fulfilment on the client, instead create a webhook so that Stripe can make an API call and handle the fulfilment there.

using System;
using System.IO;
using System.Web.Mvc;
using Stripe;
namespace Web.Stripe.Controllers
{
    public class StripeWebhookController : UmbracoApiController
    {
        [HttpPost]
        public string Post()
        {
           var stripeEvent = StripeWebhook.GetWebHookStripeEvent();
            return "whatever";
        }
    }
    public static class StripeWebhook
    {
        private const string WhSecret = "***";
        public static string GetWebHookStripeEvent()
        {
            var json = new StreamReader(HttpContext.Current.Request.InputStream).ReadToEnd();
            var stripeEvent = EventUtility.ConstructEvent(json, HttpContext.Current.Request.Headers["Stripe-Signature"], WhSecret);
            PaymentIntent intent;
            string paymentId = "";
            switch (stripeEvent.Type)
            {
                case "payment_intent.succeeded":
                    intent = (PaymentIntent) stripeEvent.Data.Object;
                    paymentId = $"Payment success for {intent.Id}";
                    break;
                case "payment_intent.payment_failed":
                    intent = (PaymentIntent)stripeEvent.Data.Object;
                    paymentId = $"Payment failed for {intent.Id}";
                    break;
                default:
                    //DO SOMETHING
                    break;
            }
            return paymentId;
    }
}
Summary

In my developer Stripe account, I can now see that the payment has been made successfully.

payment success