Support 3D Secure card Stripe payment to start subscription

Question

My payment model idea for my application is really simple: Having a (laravel) website with a member area and some special funcionality, whereas a member account costs 19.90 / year. I wanted to integrate Stripe to my registration flow to allow a payment to happen. When the payment has succeeded, I create a subscription which will then automatically renew this payment each year.

So good so far - I managed to get it working using the Guide on how to set up a subscription by Stripe. However, cards that required 3D Secure authentication did not work yet, and this is a must-have.

So I read further and used a PaymentIntent (API Docs). However, current behavior is the following:

I create a PaymentIntent and pass the public key to the frontend
Customer enters credentials and submits
3D Secure Authentication happens correctly, returning me a payment_method_id
On the server side, I retrieve the PaymentIntent again. It has status succeeded and the payment is recieved on my Stripe Dashboard.
I then create the customer object (with the payment method I got from the PaymentIntent), and with that customer, create the subscription
The subscription has status incomplete and it seems that the subscription tries to again charge the customer but fails because of the 3D Secure validation that would be necessary the second time.

So my actual question is: How can I create a subscription which notices somehow that the customer has already paid with my PaymentIntent and the PaymentMethod that I'm passing to it?

Some Code

Create the PaymentIntent and pass that to the frontend

\Stripe\Stripe::setApiKey(env('STRIPE_SECRET_KEY'));
$intent = \Stripe\PaymentIntent::create([
   'amount' => '1990',
   'currency' => 'chf',
]);
$request->session()->put('stripePaymentIntentId',$intent->id);
return view('payment.checkout')->with('intentClientSecret',$intent->client_secret);

Frontend Checkout when clicking "Buy"

// I have stripe elements (the card input field) ready and working
// using the variable "card". The Stripe instance is saved in "stripe".
// Using "confirmCardPayment", the 3DS authentication is performed successfully.
stripe.confirmCardPayment(intentClientSecret,{
    payment_method: {card: mycard},
    setup_future_usage: 'off_session'
}).then(function(result) {
    $('#card-errors').text(result.error ? result.error.message : '');
    if (!result.error) {
        submitMyFormToBackend(result.paymentIntent.payment_method);
    }
    else {
        unlockPaymentForm();
    }
});

Backend after submitting

// Get the PaymentMethod id from the frontend that was submitted
$payment_method_id = $request->get('stripePaymentMethodId');
// Get the PaymentIntent id which we created in the beginning
$payment_intent_id = $request->session()->get('stripePaymentIntentId');
\Stripe\Stripe::setApiKey(env('STRIPE_SECRET_KEY'));
// Get the Laravel User
$user = auth()->user();

// Firstly load Payment Intent to have this failing first if anything is not right
$intent = \Stripe\PaymentIntent::retrieve($payment_intent_id);
if ($intent instanceof \Stripe\PaymentIntent) {
    // PaymentIntent loaded successfully.

    if ($intent->status == 'succeeded') {

        // The intent succeeded and at this point I believe the money
        // has already been transferred to my account, so it's paid.
        // Setting up the user with the paymentMethod given from the frontend (from
        // the 3DS confirmation).
        $customer = \Stripe\Customer::create([
            'payment_method' => $payment_method_id,
            'email' => $user->email,
            'invoice_settings' => [
                'default_payment_method' => $payment_method_id,
            ],
        ]);

        $stripeSub = \Stripe\Subscription::create([
            'customer' => $customer->id,
            'items' => [
                [
                    'plan' => env('STRIPE_PLAN_ID'),
                ]
            ],
            'collection_method' => 'charge_automatically',
            'off_session' => false,
        ]);

        // If the state of the subscription would be "active" or "trialing", we would be fine
        // (depends on the trial settings on the plan), but both would be ok.
        if (in_array($stripeSub->status,['active','trialing'])) {
            return "SUCCESS";
        }

        // HOWEVER the state that I get here is "incomplete", thus it's an error.
        else {
            return "ERROR";
        }
    }
}

Florian Müller Florian Müller · Accepted Answer · 2019-12-01T14:57:38

I finally got a working solution running for my site. It goes like this:

1 - Backend: Create a SetupIntent

I created a SetupIntent (SetupIntent API Docs) to cover the checkout flow entirely. The difference to a PaymentIntent (PaymentIntent API Docs) is that the PaymentIntent goes from collecting the card details, preparing the payment and effectively transferring the amount to the account, while the SetupIntent only prepares card collection, but does not yet execute the payment. You will get a PaymentMethod (PaymentMethod API Docs) from it, which you can use later.

$intent = SetupIntent::create([
    'payment_method_types' => ['card'],
]);

Then I passed the $intent->client_secret key to my client side JavaScript.

2 - Frontend: Collect card details with Elements

On the frontend, I placed the Stripe card element to collect the card details.

var stripe = Stripe(your_stripe_public_key);
var elements = stripe.elements();
var style = { /* my custom style definitions */ };
var card = elements.create('card',{style:style});
card.mount('.my-cards-element-container');

// Add live error message listener 
card.addEventListener('change',function(event) {
    $('.my-card-errors-container').text(event.error ? event.error.message : '');
}

// Add payment button listener
$('.my-payment-submit-button').on('click',function() {
    // Ensure to lock the Payment Form while performing async actions
    lockMyPaymentForm();
    // Confirm the setup without charging it yet thanks to the SetupIntent.
    // With 3D Secure 2 cards, this will trigger the confirmation window.
    // With 3D Secure cards, this will not trigger a confirmation.
    stripe.confirmCardSetup(setup_intent_client_secret, {
        payment_method: {card: card} // <- the latter is the card object variable
    }).then(function(result) {
        $('.my-card-errors-container').text(event.error ? event.error.message : '');
        if (!result.error) {
            submitPaymentMethodIdToBackend(result.setupIntent.payment_method);
        }
        else {
            // There was an error so unlock the payment form again.
            unlockMyPaymentForm();
        }
    });
}

function lockMyPaymentForm() {
    $('.my-payment-submit-button').addClass('disabled'); // From Bootstrap
    // Get the card element here and disable it
    // This variable is not global so this is just sample code that does not work.
    card.update({disabled: true});
}

function unlockMyPaymentForm() {
    $('.my-payment-submit-button').removeClass('disabled'); // From Bootstrap
    // Get the card element here and enable it again
    // This variable is not global so this is just sample code that does not work.
    card.update({disabled: false});
}

3 - Backend: Create Customer and Subscription

On the backend, I received the $payment_method_id which I submitted from the frontend. Firstly, we need now to create a Customer (Customer API Docs) if it does not yet exist. On the customer, we will attach the payment method from the SetupIntent. Then, we create the Subscription (Subscription API Docs) which will start the charge from the SetupIntent.

$customer = \Stripe\Customer::create([
    'email' => $user->email, // A field from my previously registered laravel user
]);

$paymentMethod = \Stripe\PaymentMethod::retrieve($payment_method_id);

$paymentMethod->attach([
    'customer' => $customer->id,
]);

$customer = \Stripe\Customer::update($customer->id,[
    'invoice_settings' => [
        'default_payment_method' => $paymentMethod->id,
    ],
]);

$subscription = \Stripe\Subscription::create([
    'customer' => $customer->id,
    'items' => [
        [
            'plan' => 'MY_STRIPE_PLAN_ID',
        ],
    ],
    'off_session' => TRUE, //for use when the subscription renews
]);

Now we have a Subscription object. With regular cards, the state should be active or trialing, depending on your trial days setting on the subscription. However when dealing with 3D Secure test cards, I got the subscription still in an incomplete state. According to my Stripe support contact, this can also be a problem because of not yet fully working 3D Secure test cards. However I assume that this can also happen on production environments with some sort of cards, so we have to deal with it.

On subscriptions with status incomplete you can retrieve the latest invoice from $subscription->latest_invoice like so:

$invoice = \Stripe\Invoice::retrieve($subscription->latest_invoice);

On your invoice object, you will find a status and a hosted_invoice_url. When the status is still open, I now present the user the URL to the hosted invoice which he has to complete first. I let him open the link in a new window, which shows a nice looking invoice hosted by stripe. There, he is free to again confirm his credit card details including the 3D Secure workflow. In case he succeeds there, the $subscription->status changes to active or trialing after you re-retrieve the subscription from Stripe.

This is some sort of fool proof strategy that if anything with your implementation goes wrong, just send them to Stripe to complete it. Just be sure to hint the user that in case he has to confirm his card twice, it won't be charged twice but only once!

I was not able to create a working version of @snieguu's solution because I wanted to use Elements and not collect the credit card details separately to then create a PaymentMethod by myself.