I use vue-js and stripe to implement some of my payment.
The only way to use the Stripe with vue-js was with script.onload. I would like now to access some of my methods within the onload function. In this example it is the function myMethod called with self.myMethod
To do so I created self variable but it happens to be undefined in the scope of onload.
How could I do to make it available ?
In the current example self refers to Window object.
Component.vue
<template></template>
<script>
export default {
data() {
const self = this;
return {}
},
methods: {
myMethod() {}
},
mounted() {
let script = document.createElement('script');
script.src = "https://js.stripe.com/v3/";
script.onload = () => {
const stripe = Stripe('xxxxxxxx');
const elements = stripe.elements();
function setOutcome(result) {
self.myMethod();
}
card.on('change', function(event) {
setOutcome(event);
});
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const form = document.querySelector('form');
stripe.createToken(card).then(setOutcome);
});
};
document.body.appendChild(script);
}
}
</script>
<style></style>
