I'm implementing
the Credit Card Payment form of PayMill according to
the Payment Form docu. So I copied
the JS
from the Bridge docu page and
the form
from the Payment Form docu page.
But no token is created. When I try to debug
the JS and add console.info(error.apierror); into
the paymillResponseHandler(...) function, I get
the error code: field_invalid_amount.
According to
the support page
There are three possible reasons for this error message:
no amount value was provided
numbers were rounded
wrong delimiter symbol
But
the amuont is provided and I've already tried different delimiter symbols. What "numbers were rounded" means, is not clear.
What can be
the problem and how to fix this issue?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="PSPad editor, www.pspad.com">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>
</title>
</head>
<body>
<!-- PayMill HEAD start -->
<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">
var PAYMILL_PUBLIC_KEY = '51668632777bf03b57f861c5a7278a38';
</script>
<script type="text/javascript" src="https://bridge.paymill.com/"></script>
<!-- PayMill HEAD stop -->
<!-- PayMill FORM start -->
<form id="payment-form" class="span4" action="payment.php" method="POST">
<p class="payment-errors alert-error span3" style="display:none;">
</p>
<div id="payment-form-cc">
<div class="controls controls-row">
<div class="span2">
<label class="card-number-label">Kreditkarte
</label>
<input class="card-number span2" type="text" size="20" value="4111111111111111"/>
</div>
<div class="span1">
<label class="card-cvc-label">CVC
</label>
<input class="card-cvc span1" type="text" size="4" value="111"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3 card-icon">
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-holdername-label">Karteninhaber
</label>
<input class="card-holdername span3" type="text" size="20" value="lala"/>
</div>
</div>
<div class="controls controls-row">
<div class="span3">
<label class="card-expiry-label">Gültigkeitsdatum (MM/YYYY)
</label>
<input class="card-expiry-month span1" type="text" size="2" value="12"/>
<span style="float:left;"> /
</span>
<input class="card-expiry-year span1" type="text" size="4" value="2015"/>
</div>
</div>
</div>
<div class="controls controls-row">
<div class="span2">
<label class="amount-label">Betrag
</label>
<input class="amount span2" type="text" size="5" value="9,99" name="amount"/>
</div>
<div class="span1">
<label class="currency-label">Währung
</label>
<input class="currency span1" type="text" size="3" value="EUR" name="currency"/>
</div>
</div>
<div class="controls controls-row">
<div class="span4">
<button class="submit-button btn btn-primary" type="submit" >Pay!</button>
</div>
</div>
</form>
<!-- PayMill FORM stop -->
<!-- PayMill FOOT start -->
<script type="text/javascript">
function paymillResponseHandler(error, result) {
if (error) {
console.info(error.apierror);
// Displays
the error above
the form
$(".payment-errors").text(error.apierror);
} else {
console.info('OK');
var form = $("#payment-form");
// Output token
var token = result.token;
// Insert token into form in order to submit to server
form.append(
"<input type='hidden' name='paymillToken' value='"+token+"'/>"
);
// Submit form
form.get(0).submit();
}
}
</script>
<script type="text/javascript">
paymill.createToken({
number: $('.card-number').val(), // required
exp_month: $('.card-expiry-month').val(), // required
exp_year: $('.card-expiry-year').val(), // required
cvc: $('.card-cvc').val(), // required
amount_int: $('.card-amount-int').val(), // required, e.g. "4900" for 49.00 EUR
currency: $('.currency').val(), // required
cardholder: $('.card-holdername').val() // optional
},
paymillResponseHandler);
</script>
<!-- PayMill FOOT stop -->
</body>
</html>
