Using generated Stripe checkout button

Question

I'm trying to implement in my VueJS Project a checkout button generated from the Stripe Dashboard.

I feel like i'm not doing it the right way, so if you have advises i would like to hear them.

I have add <script src="https://js.stripe.com/v3/"></script> in index.html.

the 1st error i get

the 2nd error i get

Here is my Vue component.

<template>
    <div>
    <button
            style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
            id="checkout-button-MY_PLAN"
            role="link"
    >
        Checkout
    </button>

    <div id="error-message"></div>
    </div>
</template>

<script>

    (function() {

        let stripe = Stripe('MY_KEY');

        let checkoutButton = document.getElementById('MY_PLAN');
        checkoutButton.addEventListener('click', function () {

            stripe.redirectToCheckout({
                items: [{plan: 'MY_PLAN', quantity: 1}],

                successUrl: '',
                cancelUrl: '',
            })
                .then(function (result) {
                    if (result.error) {
                        let displayError = document.getElementById('error-message');
                        displayError.textContent = result.error.message;
                    }
                });
        });
    })();
</script>

<style scoped>

</style>

If i can't use Stripe in a VueJS Project how can i get around the problem without modifying all my project ?

Answer 1

1. For the first error where Stripe is undefined. That is likely because the Stripe.js library isn't loaded before that code runs. You'll need to ensure that you've included Stripe.js [1] with this tag in your HTML before any of your JavaScript using Stripe is executed. Note that it's not loaded async .

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

2. The second error is because when you're attempting to getElementById the ID that you're passing is not the same as the ID in the HTML for the button.

The button's ID is checkout-button-MY_PLAN and the ID you're trying to find the button with by passing is MY_PLAN . I would recommend updating your call to getElementById to:

let checkoutButton = document.getElementById('checkout-button-MY_PLAN');

[1] https://stripe.com/docs/js/including