Skip to content

Instantly share code, notes, and snippets.

@paymill-gists

paymill-gists/zahlungsformular-komplett.html

Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paymill-gists/9233569 to your computer and use it in GitHub Desktop.
Save paymill-gists/9233569 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zahlungsformular-komplett.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-responsive.no-icons.min.css">
<script type="text/javascript">c
var PAYMILL_PUBLIC_KEY = '<YOUR_PAYMILL_PUBLIC_KEY>';
</script>
</head>
<body>
<div class="container span8">
<!-- START: Payment form -->
<div class="controls">
<div class="span4">
<div class="payment-errors text-error"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="well span5">
<div class="controls controls-row">
<div class="btn-group span4">
<button id="btn-paymenttype-cc" class="paymenttype btn btn-primary disabled" value="cc" translate="iframe">Kreditkarte</button>
<button id="btn-paymenttype-elv" class="paymenttype btn" value="elv" translate="iframe">ELV</button>
<button id="btn-paymenttype-iban" class="paymenttype btn" value="elv" translate="iframe">IBAN/BIC</button>
</div><br /><br />
</div>
<form id="payment-form" action="request.php" method="POST">
<div class="clearfix"></div>
<div id="payment-form-cc" class="payment-input">
<input class="card-amount-int" type="hidden" value="15"/>
<input class="card-currency" type="hidden" value="EUR"/>
<div class="controls controls-row">
<div class="span3"><label>Card number</label>
<input class="card-number span3" type="text" size="20" value="4111111111111111"/>
</div>
<div class="span1"><label>CVC</label>
<input class="card-cvc span1" type="text" size="4" value="111"/>
</div>
</div>
<div class="controls">
<div class="span4">
<label>Card holder</label>
<input class="card-holdername span4" type="text" size="20" value="Max Mustermann"/>
</div>
</div>
<div class="controls">
<div class="span3">
<label>Valid until (MM/YYYY)</label>
<input class="card-expiry-month span1" type="text" size="2" value="12"/>
<span> / </span>
<input class="card-expiry-year span1" type="text" size="4" value="2015"/>
</div>
</div>
</div>
<div id="payment-form-elv" class="payment-input" style="display: none;">
<div class="controls">
<div class="span3">
<label>Account holder</label>
<input class="elv-holdername span3" type="text" size="20" value="Max Mustermann"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3"><label>Account number</label>
<input class="elv-account span3" type="text" size="20" value="1234567890"/>
</div>
</div>
<div class="controls">
<div class="span3">
<label>Bank code</label>
<input class="elv-bankcode span3" type="text" size="20" value="40050150"/>
</div>
</div>
</div>
<div id="payment-form-iban" class="payment-input" style="display: none;">
<div class="controls">
<div class="span3">
<label translate="iframe">Kontoinhaber</label>
<input class="ibanbic-holdername span3" type="text" size="20" value="Max Mustermann"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3"><label translate="iframe">IBAN</label>
<input class="iban span3" type="text" size="27" value="DE12 3456 7890 1234 5678 90"/>
</div>
</div>
<div class="controls">
<div class="span3">
<label translate="iframe">BIC</label>
<input class="bic span3" type="text" size="20" value="MARKDEF1100"/>
</div>
</div>
</div>
<div class="controls">
<div class="span3">
<button class="submit-button btn btn-primary" type="submit">Buy now</button>
</div>
</div>
</form>
</div>
<!-- END: Payment form -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script src="https://bridge.paymill.com/"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
function PaymillResponseHandler(error, result) {
if (error) {
// Show the error message above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;
// Insert token into the payment form
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}
$("#payment-form").submit(function (event) {
// Deactivate the submit button to avoid further clicks
$('.submit-button').attr("disabled", "disabled");
if (false == paymill.validateCardNumber($('.card-number').val())) {
$(".payment-errors").text("Invalid card number");
$(".submit-button").removeAttr("disabled");
return false;
}
if (false == paymill.validateExpiry($('.card-expiry-month').val(), $('.card-expiry-year').val())) {
$(".payment-errors").text("Invalid date of expiry");
$(".submit-button").removeAttr("disabled");
return false;
}
try{
if (false == paymill.validateIban($('.iban').val())) {
$(".payment-errors").text("Invalid IBAN");
$(".submit-button").removeAttr("disabled");
return false;
}
} catch(e) {
$(".payment-errors").text("IBAN: Invalid country");
$(".submit-button").removeAttr("disabled");
return false;
}
if (false == paymill.validateBic($('.bic').val())) {
$(".payment-errors").text("Invalid BIC");
$(".submit-button").removeAttr("disabled");
return false;
}
var method = 'cc';
if (jQuery('#btn-paymenttype-elv').hasClass('btn-primary')) method = 'elv';
if (jQuery('#btn-paymenttype-iban').hasClass('btn-primary')) method = 'iban/bic';
switch (method) {
case "cc":
var params = {
amount: $('.card-amount-int').val(),
currency: $('.card-currency').val(),
number: $('.card-number').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val(),
cvc: $('.card-cvc').val(),
cardholder: $('.card-holdername').val()
};
break;
case "elv":
var params = {
number: $('.elv-account').val(),
bank: $('.elv-bankcode').val(),
accountholder: $('.elv-holdername').val()
};
break;
case "iban/bic":
var params = {
iban: $('.iban').val(),
bic: $('.bic').val(),
accountholder: $('.ibanbic-holdername').val()
};
break;
}
paymill.createToken(params, PaymillResponseHandler);
return false;
});
// Toggle buttons and forms
$(".paymenttype").click(function() {
if (jQuery(this).hasClass('btn-primary')) return;
jQuery('.paymenttype').removeClass('btn-primary');
jQuery(this).addClass('btn-primary');
var index = jQuery('.paymenttype').index(this);
jQuery('.payment-input').hide();
jQuery('.payment-input').eq(index).show();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment