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>
