My payment implementation utilizes vue-js and stripe.
I found that the only way to incorporate Stripe with vue-js was through the use of script.onload. Now, I am trying to access some of my methods within the onload function. Specifically, I want to call the myMethod function using self.myMethod.
In order to achieve this, I defined a variable named self, but it seems to be undefined in the scope of the onload function.
What steps can I take to make it accessible?
In the current scenario, self is referencing the 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>