Payment Form

Paymill enables you to integrate credit card payments quickly, securely, simply and individually on your website. Our service is surely adhered with the credit card guidelines regarding sensitive customer payment data. You therefore do not have to worry about issues such as credit card information security.

You can integrate our Paymill payment form in your own website in three easy steps for the purpose of receiving credit card payments without any problems. This will save you from dealing with a complicated technical integration process.

1. Collecting Credit Card Data

At first, the Paymill Bridge (a JS integration) has to be integrated in your website. Ideally, it should be integrated before the closing </body> tag.

The Paymill bridge is required to create a unique token from the credit card. The credit card number can be verified if desired.

Important Note:

You should always use your test key for non-live transactions, like the ones described in the documentation. Using your live key will be considered as a real request, and funds will be drawn from your account and/or credit card.

The public key that has been assigned will identify your website in Paymill for the unique creation of a token and will be given to you when you register on Paymill. Your complete code should look similar to this code snippet:

<script type="text/javascript">
  var PAYMILL_PUBLIC_KEY = '443368146777979106b2ce2042c289a5';
</script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>

You will find your test keys and live keys in your account. It is important to always differentiate between the two keys in your own account. The key that you use and the activation status of your account will determine whether you employ the live key on your website, for instance. This will lead to real payment which involves costs.

Where do I find my keys?

1. First you navigate to My Account and click on the dropdown menu.

2. Then you choose Settings.

3. At first you will find your test keys that you can use to process test payments. As far as the live keys are concerned, you will have to activate your account first.

2. Setting up and Integrating a Payment Form

In order for your website to meet legal standards, credit card information cannot be stored or transferred to your server. For this reason, the data are replaced with a token before being transferred to your server. Your server thus does not receives any sensitive credit card information!

The data are only referenced via the token and your private key.

Important notice:

Please note that the bridge sends the request data to our PCI-compliant server, which in turn talks with the credit card institutions. For this reason, the bridge might take a few seconds to deliver a response to your code. Therefore, please do not specify any fixed timeouts in your Javascript code when dealing with the Paymill bridge.

The data is referenced via the token and your private key only. The token can be stored on your web server. It is recommended that you read our documentation on PCI compliance to ensure that you are within the PCI compliance guidelines at all times.

In order to obtain the necessary mandatory information for the token, you may use the following credit card form:

<form id="payment-form" action="#" method="POST">

  <input class="card-amount-int" type="hidden" value="15" />
  <input class="card-currency" type="hidden" value="EUR" />

  <div class="form-row"><label>Card number</label>
    <input class="card-number" type="text" size="20" /></div>

  <div class="form-row"><label>CVC</label>
    <input class="card-cvc" type="text" size="4" /></div>

  <div class="form-row"><label>Name</label>
    <input class="card-holdername" type="text" size="4" /></div>

  <div class="form-row"><label>Expiry date (MM/YYYY)</label>
    <input class="card-expiry-month" type="text" size="2" />
    <span></span>
    <input class="card-expiry-year" type="text" size="4" /></div>


  <button class="submit-button" type="submit">Submit</button>

</form>

You can find more information on optional fields that can be transferred in our API Reference.

In order to test the payment process, you may use the following credit card numbers from our Testing page.

Data validation

In order to validate the data from your website, you can simply use the validation functions integrated in Paymill.

validateCardNumber(cardNumber): Validates credit card number formatting.

// This credit card number is valid
paymill.validateCardNumber('4111111111111111'); 

// These credit card numbers are invalid
paymill.validateCardNumber('4111-1111-1111-1111');
paymill.validateCardNumber('4111 1111 1111 1111');
paymill.validateCardNumber('12345678');
paymill.validateCardNumber('test111');

validateExpiry(month, year): Validates whether the expiry date is in the future.

paymill.validateExpiry('02', '15');      // false
paymill.validateExpiry('02', '10');      // false
paymill.validateExpiry('02', '2020');    // true
paymill.validateExpiry(2, 2020);         // true

validateCvc(cvcNumber): Validates whether the credit card number contains a valid verification code.

paymill.validateCvc('111'); // true
paymill.validateCvc('foo'); // false

cardType(cardNumber): Returns the card type as a string. Possible types are Visa, MasterCard and similar. If a card is not recognized, the value is returned as “unknown”.

paymill.cardType('4111111111111111'); // Visa
paymill.cardType('378282246310005'); // American Express

validateAccountNumber(accountNumber): Checks, if value returns a correct bank account number.

paymill.validateAccountNumber('3837246'); // true
paymill.validateAccountNumber('foo'); // false

validateBankCode(bankCode): Checks, if value returns a correct bank code.

paymill.validateBankCode('20415230'); // true
paymill.validateBankCode('foo'); // false

Important Notes:

Payments may only be processed via the Paymill bridge.

Credit card data may not be transferred, logged, or saved to your server. In order to guarantee that you simply need to leave out the name attribute in the form fields. Then this form field will not be transferred to the merchant’s server either.

Every payment form that you send to Paymill should be sent via SSL for security reasons. If you do not have an SSL certificate, you can still use our services. However, we urge you to integrate SSL.

3. Creating a Token and Transferring Form Data to Your Server

Creating a Token

In order to create a unique token, the credit card data needs to be verified and converted.

The credit card information is sent via SSL to the Paymill Payment Service Provider (PSP), which converts the credit card information to a token. A JavaScript function in your payment form is triggered, and this deactivates the Submit button and calls up a JavaScript event that is then sent to the Paymill Payment Service Provider (PSP).

The credit card number and the credit card expiration date have to be set as mandatory variables. Other fields are optional. Here is a sample code for securely transferring credit card data that you can use in any JavaScript framework (not just in jQuery):

$(document).ready(function() {
  $("#payment-form").submit(function(event) {
    // Deactivate submit button to avoid further clicks
    $('.submit-button').attr("disabled", "disabled");

    paymill.createToken({
      number: $('.card-number').val(),  // required, ohne Leerzeichen und Bindestriche
      exp_month: $('.card-expiry-month').val(),   // required
      exp_year: $('.card-expiry-year').val(),     // required, vierstellig z.B. "2016"
      cvc: $('.card-cvc').val(),                  // required
      amount_int: $('.card-amount-int').val(),    // required, integer, z.B. "15" für 0,15 Euro 
      currency: $('.card-currency').val(),    // required, ISO 4217 z.B. "EUR" od. "GBP"
      cardholder: $('.card-holdername').val() // optional
    }, PaymillResponseHandler);                   // Info dazu weiter unten

    return false;
  });
});

The data is transferred via SSL to the Paymill Payment Service Provider (PSP). The Paymill PSP validates the data and returns a unique token to you as a token object together with an empty error report object. In the event of an error, the token object would be empty and the error report object filled.

The data transfer is picked up by the PaymillResponseHandler function in your form in the browser. A JSON object is returned as a result. There are always 2 objects that are issued: error and result. One of the two is always a NULL value and thus functional/non-functional.

For example, a successful response (response object) with the following characteristics:

{
  "token":"4ff43649b5853"
}

Data Transfer to Your Server

The response (response object) for the form data is picked up by the PaymillResponseHandler function and transferred to your website:

function PaymillResponseHandler(error, result) {
  if (error) {
    // Shows the error above the form
    $(".payment-errors").text(error.apierror);
    $(".submit-button").removeAttr("disabled");
  } else {
    var form = $("#payment-form");
    // Output token
    var token = result.token;
    // Insert token into form in order to submit to server
    form.append("");
  }
}

In order to integrate a complete Paymill payment form on your website for testing, copy our entire code from our GitHub repository.