Integrating PayMill: The token filled input field is not created, error "field_invalid_amount"

Posted by automatix on Stack Overflow See other posts from Stack Overflow or by automatix
Published on 2014-06-05T15:21:28Z Indexed on 2014/06/05 15:24 UTC
Read the original article Hit count: 246

Filed under:

JavaScript

|

forms

|

payment-processing

|

paymill

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>

Developer IT