<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript">
Stripe.setPublishableKey('pk_live_F8DH33wXwPwiX4dMZZv4EASC');
function onSubmitDo () {
Stripe.card.createToken( document.getElementById('payment-form'), myStripeResponseHandler );
return false;
};
function myStripeResponseHandler ( status, response ) {
console.log( status );
console.log( response );
if ( response.error ) {
document.getElementById('payment-error').innerHTML = response.error.message;
} else {
var tokenInput = document.createElement("input");
tokenInput.type = "hidden";
tokenInput.name = "stripeToken";
tokenInput.value = response.id;
var paymentForm = document.getElementById('payment-form');
paymentForm.appendChild(tokenInput);
paymentForm.submit();
}
};
</script>
<div id="payment-error"></div>
<form action="http://payments.altispeed.com/pay.php" method="post" onsubmit="return onSubmitDo()" name="payment-form" id="payment-form">
<div class="left_name"><strong>Amount :<span>*</span> </strong></div>
<div class="right_field"><input name="amount" data-stripe="amount" id="amount" type="text"></div>
<div class="left_name"><strong>First Name :<span>*</span> </strong></div>
<div class="right_field"><input name="fname" data-stripe="fname" id="fname" type="text"></div>
<div class="left_name"><strong>Last Name :<span>*</span> </strong></div>
<div class="right_field"><input name="lname" data-stripe="lname" id="lname" type="text"></div>
<div class="left_name"><strong>Email :<span>*</span></strong></div>
<div class="right_field"><input name="email" data-stripe="email" id="email" type="text"></div>
<div class="left_name"><strong>Invoice Number :</strong></div>
<div class="right_field"><input name="invoice_number" data-stripe="invoice_number" id="invoice_number" type="text"></div>
<div class="left_name"><strong>Card Number :<span>*</span></strong></div>
<div class="right_field"><input name="number" data-stripe="number" id="number" type="text"></div>
<div class="left_name"><strong>Expiration Date (MM/YY) :<span>*</span> </strong></div>
<div class="right_field"><input name="exp-month" id="exp-month" data-stripe="exp-month" type="text"> / <input name="exp_year" id="exp_year" data-stripe="exp_year" type="text"></div>
<div class="left_name"><strong>CVC :<span>*</span></strong></div>
<div class="right_field"><input name="cvc" data-stripe="cvc" id="cvc" type="text"></div>
<div class="left_name"> </div>
<div class="right_field"><input type="submit" id="send" value="Pay" name="book_submit"></div>