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:The <script> is generated with the custom attributes, including the custom data-amount.The script appends a pay now button (which is hidden with CSS)The real button is clicked with .trigger('click') after a second delayThe 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>
Appending script elements with variable attributes
javascript;jquery