Appending script elements with variable attributes

Question

eWay has a simple Pay Now button that is embedded as a script. There are other ways to use the eWay API to take a custom payment, but they are slightly more complicated and the idea was to keep it simple.

This is the basic script:

<script src="https://secure.ewaypayments.com/
    scripts/eCrypt.js"
    class="eway-paynow-button"
    data-publicapikey="XXX-XXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
    data-amount="1000"
    data-currency="AUD" > 
</script>

The data-amount attribute can't be modified by the user when embedded, so I created a simple form which allows the user to input a value:

<div id="make-payment">    
<h1>Make a payment</h1>
    <label for="report-number">Invoice / Report Number (e.g. 350123 1)</label>
    <input type="text" id="report-number" />
    <label for="payment-value">Payment Amount</label>
    <input type="text" id="payment-value" />
    <button id="eway-dummy"><span style="display: block; min-height: 30px;">Pay Now ($<em id="payment-total">0.00</em>)</span></button>
</div>

---

The #eway-dummy button has the value updated to reflect the dollar amount entered:

$('#make-payment').on('keyup', '#payment-value', function () {
    //Change payment total in dummy button
    var paymentValue = $('#payment-value').val();
    $('#payment-total').text(paymentValue);
});

When the dummy button is clicked:

1. The <script> is generated with the custom attributes, including the custom data-amount.

2. The script appends a pay now button (which is hidden with CSS)

3. The real button is clicked with .trigger('click') after a second delay

4. The payment form in the modal window is used to handle the actual credit card details

$('#make-payment').on('click', '#eway-dummy', function () {    
    //Store button text, change button text to "loading" and then return it
    var currentText = $('#eway-dummy span').text();    
    $('#eway-dummy span').text('loading payment');    
    setTimeout(function () {
        $('#eway-dummy span').text(currentText);
    }, 5000);

    //Store report number
    var reportNumber = $('#report-number').val();

    //Store payment value and remove the decimal place
    var paymentValue = $('#payment-value').val().replace(".", "");  

    //Create custom button
    $('#make-payment').append('<script src="https://secure.ewaypayments.com/scripts/eCrypt.js" class="eway-paynow-button" data-publicapikey="epk-FA724F31-3ECD-49A3-AF68-81653BD17D90" data-amount="' + paymentValue + '" data-invoiceref="' + reportNumber + '" data-currency="AUD"><\script>');
    //Click the button
    setTimeout(function () {
        $('.eway-button').trigger('click');
    }, 1000);
});

Is there a better way to change a scripts attributes based on user input?

Here is the entire demo page:

$('#make-payment').on('keyup', '#payment-value', function() {
  //Change payment total in dummy button
  var paymentValue = $('#payment-value').val();
  $('#payment-total').text(paymentValue);
});


$('#make-payment').on('click', '#eway-dummy', function() {
  //Store button text, change button text to "loading" and then return it
  var currentText = $('#eway-dummy span').text();
  $('#eway-dummy span').text('loading payment');
  setTimeout(function() {
	$('#eway-dummy span').text(currentText);
  }, 5000);

  //Store report number
  var reportNumber = $('#report-number').val();

  //Store payment value and remove the decimal place
  var paymentValue = $('#payment-value').val().replace(".", "");

  //Create custom button
  $('#make-payment').append('<script src="https://secure.ewaypayments.com/scripts/eCrypt.js" class="eway-paynow-button" data-publicapikey="epk-FA724F31-3ECD-49A3-AF68-81653BD17D90" data-amount="' + paymentValue + '" data-invoiceref="' + reportNumber + '" data-currency="AUD"><\script>');
  //Click the button
  setTimeout(function() {
	$('.eway-button').trigger('click');
  }, 1000);
});

label {
  display: block;
  margin-bottom: 10px;
}
input {
  margin-bottom: 10px;
}
#make-payment #eway-dummy {
  display: block;
  overflow: hidden;
  border: 0;
  padding: 1px;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
#make-payment #eway-dummy span {
  display: block;
  position: relative;
  padding: 0 12px;
  height: 30px;
  line-height: 30px;
  background: #FF8200;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}
#make-payment #eway-dummy em {
  font-style: normal;
}
#make-payment .eway-button {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="make-payment">
  <h1>Make a payment</h1>
  <label for="report-number">Invoice / Report Number (e.g. 350123 1)</label>
  <input type="text" id="report-number" />
  <label for="payment-value">Payment Amount</label>
  <input type="text" id="payment-value" />
  <button id="eway-dummy"><span style="display: block; min-height: 30px;">Pay Now ($<em id="payment-total">0.00</em>)</span>
  </button>
</div>