Implementing Stripe into my application has been a smooth process so far, following the plain JS examples in the Stripe documentation. However, I've encountered an issue with accessing props from the parent component within the Script tag where I make the API calls.
I've experimented with using the mounted method to ensure that the HTML has rendered before implementing the JavaScript code, as suggested by some parts of the Stripe documentation. But I'm still struggling to get it working properly. Any suggestions on how to resolve this would be greatly appreciated.
One approach I tried was putting the API call inside a method and triggering that method with a click event on the form. Unfortunately, this resulted in an error related to the 'token' used by Stripe not being recognized.
In the code snippet below, you can see where I attempted to access 'this.plan' from the props:
<template>
<form method="post" id="payment-form">
<!-- Form elements here -->
</form>
</template>
<script>
// Import necessary modules and set up variables
export default {
props: ['plan'],
data: function() {
return {
successful: false,
monthly: {
id: 'prod_Flp17jVPzNUfFz',
price: 25
},
annual: {
id: 'prod_Flp17jVPzNUfFz',
price: 215
}
}
},
methods: {
submitPayment: function () {
// Logic for submitting payment
}
},
mounted() {
// Code for setting up Stripe Elements and handling form submission
}
}
</script>