D3 Examples - BeanStream Dynamic Payform (not working)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Payform Demo</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
                  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
                  crossorigin="anonymous"></script>
    <!-- Bootstrap core CSS -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row marketing" style="margin-top: 0;">
        <ul class="nav pull-right">
          <li style="border-top: none;">
            <h3 class="" style="margin-top: 0;">Total:
              <div class="form-group">
                <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                <div class="input-group">
                  <div class="input-group-addon">$</div>
                  <input type="text" class="form-control" id="exampleInputAmount" name='price' placeholder="Amount">
                  <div class="input-group-addon">.00</div>
                </div>
              </div>
            </h3>
          </li>
          <li style="border-top: none;">
            <form id='PaymentForm' method="POST"></form>
            <script type='text/javascript'>
              function createPayButton(amount, description) {
                var form = $('#PaymentForm');
                //clear out any current beanstream form
                form.empty();
                delete window.beanstream;
​
                //Add button
                $('<button>')
                  .attr({
                    'type': 'button',
                    'class': 'btn btn-lg btn-success',
                    'data-beanstream': true
                  })
                  .text('Pay by card')
                  .appendTo(form);
                $('<script>')
                  .attr({
                    src: 'https://payform.beanstream.com/payform/beanstream_payform.js',
                    type: 'text/javascript',
                    'data-image': 'https://office.neolife.com/static/images/logo.svg',
                    'data-name': 'NeoLife',
                    'data-primaryColor': '#7aac41',
                    'data-description': description,
                    'data-amount': amount,
                    'data-currency': 'cad',
                    'data-billingAddress': false,
                    'data-shippingAddress': false,
                    'data-submitForm': false
                  })
                  .on('load', function() {
                    console.log('loaded!');
                  })
                  .appendTo(form);
              }
              document.addEventListener('beanstream_payform_complete', function(e) {
                if(e.eventDetail && e.eventDetail.cardInfo) {
                  alert(e.eventDetail.cardInfo.code);
                }
              }, false);
​
              $('input[name=price]').on('keyup change', function() {
                var amount = $(this).val();
                createPayButton(amount, 'Order #33-123527');
              });
            </script>
          </li>
        </ul>
      </div>
      <footer class="footer">
        <p>&copy; 2017 NeoLife International LLC.</p>
      </footer>
    </div>
  </body>
</html>
​
    