I am currently working on integrating a payment service into my platform. The payment service has provided me with a form that includes a script tag.
This question is a follow-up to a previous query on inserting a script tag inside a Vue template.
Here is the form for checkout from the payment service:
<form action="http://localhost:8081/api/v1/payment/" method="POST">
<script
src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
data-public-key="KEY"
data-transaction-amount="14.90">
</script>
</form>
In the Vue.js "mounted()" lifecycle hook, I have implemented the following to dynamically add the script:
<form ref="myform">
...
</form>
mounted() {
let foo = document.createElement('script');
foo.setAttribute("src","https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js");
foo.setAttribute("data-transaction-amount", this.newAmount)
this.$refs.myform.appendChild(foo);
}
However, I am facing an issue where the user is able to change the "data-transaction-amount" after the view has been mounted.
To address this, I have tried the following approach:
data:()=>({
newAmount:0
})
watch: {
newAmount() {
this.modifyScript();
},
},
methods: {
modifyScript() {
let scripts = document.getElementsByTagName("script");
for (let i = 0; i < scripts.length; i++) {
let script = scripts[i];
if (script.getAttribute("src") == 'https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js') {
// Matching script found
script.setAttribute("data-transaction-amount", this.newAmount);
}
}
},
Although the "data-transaction-amount" is updated to the new value, the payment service's checkout window still displays the original value set during "mounted()".