Currently, I am attempting to integrate a checkout button from the Stripe Dashboard into my VueJS Project.
I have a feeling that I might not be approaching this in the correct manner, so if you have any advice, I would greatly appreciate it.
In order to include the necessary scripts, I have added
<script src="https://js.stripe.com/v3/"></script>Here is the first error that I encountered
And here is the second error that I received
Below is the code snippet for 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 it turns out that using Stripe in a VueJS Project is not feasible, how can I work around this issue without having to make significant modifications to my entire project?