I'm currently utilizing VueJS along with Stripe to create a form that can be submitted without needing to refresh the page. While the Stripe functionality is operational, the issue I'm facing doesn't seem to be directly related to Stripe.
The methods mentioned are all contained within the same component.
Once the form is filled out, a specific method is triggered to generate the card token (an async function).
tokenize : function(){
console.log("tokenizing");
this.stripe.createToken(this.card.number).then(function(result) {
console.log(result);
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
console.log(result.error.message);
} else {
this.token = result.token.id;
console.log(this.token);
this.submit();
}
});
},
Despite its presence, the submit function doesn't seem to be executed at all.
submit : function(){
console.log(this.token);
console.log("here, token added");
if(!document.getElementById('agreement').checked){
this.$root.notify("You must agree to the terms.","danger");
return;
}
console.log("about to send body");
var body = {
_token : this.$root.csrf,
_method : "PUT",
stripeToken : token,
name : this.name,
agreement : true,
};
console.log(body);
console.log("pre axios");
axios.put((window.location.origin + "/billing/" + this.$root.user.company_id),body).then(response => {
this.my_billing = response.data;
this.$root.notify("Card has been successfully added!","success");
this.bEditMode = false;
}).catch(error => {
this.$root.notify("Failed to add new card.","danger");
});
},
I've attempted setting an input tag with the value of the token, and utilizing a @change event on it, but that didn't trigger the function either upon value change.
Another attempt involved defining this.token as a computed property with setters and getters to call this.submit when the token is set. Unfortunately, this approach also failed to work.
Why isn't this method being invoked? While I've successfully called functions within async callbacks previously, is there a particular aspect that I might be overlooking? Are there any alternative solutions to circumvent this issue?