How do you append a dynamic script with php variable inside and render the variable?

Question

I am trying to place a stripe checkout button on a form with a dynamic amount to be charged based on the user's selection. The checkout button is rendered from Javascript as described here.

I am adding the script dynamically like so and used the answer to the following question to execute it.

 var script = document.createElement("script");
 script.setAttribute('src','https://checkout.stripe.com/v2/checkout.js');
 script.setAttribute('class','stripe-button');
 script.setAttribute('data-key',"<?php echo $stripe['publishable_key']; ?>");
 script.setAttribute('data-amount',parseFloat(jQuery('#totalCost').html())*100);
 script.setAttribute('data-description','Monthly subscription for ' + package_enabled);
 if(!document._write) document._write = document.write;
 document.write = function (str) {
 document.getElementById('paymentForm').innerHTML += str;
 };
 document.getElementById('paymentForm').appendChild(script);

The issue I am having is that the script does not render the php variable in this line

script.setAttribute('data-key',"<?php echo $stripe['publishable_key']; ?>");

and just prints it out as string like so

data-key="<?php echo $stripe['publishable_key']; ?>" 

As a hack, I can enter the key directly but I'd rather not. Is there any other solution?

• Latheesan: If you view the page source, do you see the php code in there or the output from the php in there?
• AbraCadaver: That file would need to be parsed by PHP. If the extension is .js or .html then probably not.
• EvilEpidemic: this one should get you moving - stackoverflow.com/questions/23740548/…
• user972616: Yes @LatheesanKanes I see php code, like this data-key="<?php echo $stripe['publishable_key']; ?>"
• user972616: @AbraCadaver Yes it's a tpl.php file