Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
BeanStream Dynamic Payform (not working)
<!DOCTYPE html>
<html lang="en">
<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=""
<!-- Bootstrap core CSS -->
<!-- Bootstrap -->
<link rel="stylesheet" href="" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<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>
<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
delete window.beanstream;
//Add button
'type': 'button',
'class': 'btn btn-lg btn-success',
'data-beanstream': true
.text('Pay by card')
src: '',
type: 'text/javascript',
'data-image': '',
'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() {
document.addEventListener('beanstream_payform_complete', function(e) {
if(e.eventDetail && e.eventDetail.cardInfo) {
}, false);
$('input[name=price]').on('keyup change', function() {
var amount = $(this).val();
createPayButton(amount, 'Order #33-123527');
<footer class="footer">
<p>&copy; 2017 NeoLife International LLC.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment