How to make a secure customer authentication (SCA) payment using Stripe and VueJS

 I am making this guide as the documentation at this time for vue-stripe is limited and needed a reference.

To make a payment, you will need:

• stripe-php installed and API keys configured
• vue-stripe installed
• A backend connection to generate a payment intent secret key
• A front end page to make a secure payment 

Let's start with the backend code. This is really simple and can be integrated within a PHP based application with ease.

I am going to assume all your keys are setup and you are ready to roll.

Backend

$paymentIntent = \Stripe\PaymentIntent::create([
    'amount' => 500,
    'currency' => 'gbp',
    'payment_method_types' => ['card'],
    'metadata' => ['integration_check' => 'accept_a_payment'],
    'setup_future_usage' => 'on_session'
]);

To explain, amount is the total amount of currency in the smallest unit, in this case pennies, if using USD as the currency, then the lowest unit is cent. You would enter 500 cents for $5 and 500 pence for £5.

The currency is pretty obvious.

The payment method types are the accepted types. In this case I am accepting only card.

I then add metadata to describe the purpose of the payment, this is optional and can be any pair of data but it is recommended that no personal information is used here.

Finally I set on_session as the future usage. This is because I want the payment now and not later. You could choose to set this as off_session for payment later and this will work for instant payments as well.

Results

The payment intent is created and a payment intent secret key is created. We need this for the payment bit. Without it, a payment cannot be taken.

Here is some suggested code to get the client secret out from PHP and return as JSON

$output = [
    'clientSecret' => $paymentIntent->client_secret,
];
echo json_encode($output);

It doesn't really matter at this point what state its in or what array variable it is assigned to just as long as you can get it to your VueJS application.

That's the hard part in the backend done ...

Vue Stripe next.

Frontend

This is a little more complex but we can do it all in a single component. Separate it out however you want.

The main template features:

<StripeElementCard
    ref="elementRef"
    :pk="publishableKey"
    hidePostalCode
    @token="tokenCreated"
/>
<b-button
    block
    @click="submit"
>
    <strong>Pay  £5.00</strong>
</b-button>

The script tag

import {StripeElementCard} from "@vue-stripe/vue-stripe";

export default {
    name: "StripePageTest",
    components: {StripeElementCard},
    data() {
        return {
            publishableKey: process.env.MIX_STRIPE_PUBLISHABLE_KEY,
            token: null,
            result: null,
            stripeId: 'your_pi_secret_key',
        }
    },
    methods: {
        submit() {
            // this will trigger the process
            //Get the stripe ID (PI secret key)

            this.$refs.elementRef.submit();
        },
        tokenCreated(token) {
            this.token = token;
            this.confirmPayment();
        },
        confirmPayment() {
            let result = this.$stripe.confirmCardPayment(
                this.stripeId,
                {
                    payment_method: {
                        card: {
                            token: this.token.id
                        }
                    }
                }
            ).then(result => {
                this.result = result;
                if(result.paymentIntent.status === "succeeded"){
                    //do something
                }
                console.log(result);
            });

        }
    },

}

WOAH!! hold your horses, what's all this code?

Its all really simple. The template bit is self explanatory. You pass a pk (publishable key) to the stripe element card. This is the public key from the Stripe API, optionally hide the post code and emit an event on token created.

The button element runs the submit method which in turn runs the card elements submit method using the reference to the element (ref). I am using Bootstrap Vue but using just <button> tags will work.

That's the first part.

Now the script section

There are 3 methods a few variables, the rest is up to you

The 3 methods are as follows:

submit()

Submit runs the card elements submit method and creates a card token

tokenCreated()

The token created method simply saves the card details to a local variable before calling the confirm payment method. You could do this later now you have the card details and the payment intents secret key.

confirmPayment()

This method simply runs the stripe method confirmCardPayment() using the payment intents secret key as the first argument, a data object as the second argument containing payment method and the card details we just made a token for in the token created method.

The stripe method confirm card payment is a promise so to get the result, listen to the .then() chained method. The result will return the payment intents with a status. If successful, the card payment is complete!