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?
 
    