Skip to content

Instantly share code, notes, and snippets.

@jasonsperske

jasonsperske/index.html

Created January 24, 2017 19:17
Show Gist options
  • Save jasonsperske/f9d10fd64d4411aaec88cc72950f66a4 to your computer and use it in GitHub Desktop.
Save jasonsperske/f9d10fd64d4411aaec88cc72950f66a4 to your computer and use it in GitHub Desktop.
Download ZIP
BeanStream Dynamic Payform (not working)
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment