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?