Kurzanleitung

ELV und Kreditkarten Payment

Wir möchten, dass du so schnell wie möglich unsere Payment-Lösung bei Dir einbauen kannst. Dabei wird in Teilschritten zwischen den beiden unterschiedlichen Zahlungsarten unterschieden. Bitte beachte dies beim einbauen und führe dazu die folgenden Schritte aus:

Bitte beachte, dass ELV als Zahlungsmittel in deinem Händler Cockpit eine Freischaltungszeit von 7-14 Tagen benötigt und daher nicht sofort als Zahlungsmittel verwendet werden kann!

1. Konto erstellen

Auf der Startseite gehst du auf Mein Konto und klickst auf Registrieren oder alternativ auf den Button Kostenlos registrieren auf der Startseite.

Jetzt füllst du das Registrierungsformular aus und erhältst eine Aktivierungsmail, die du bestätigen musst.

Wenn dein PAYMILL Konto erfolgreich eingerichtet ist, kommst du ins Händler-Cockpit. In diesem Bereich kannst du deine Transaktionen für deine Test- und Livekeys ansehen. Ein Switch ist durch den rechts oben dargestellten Schalter möglich.

2. API Keys

Du brauchst zwei Keys um PAYMILL nutzen zu können:

Public Key:

<DEIN_PUBLIC_KEY>

Dieser Key ist für dein Zahlungsformular und daher auch von Dritten einsehbar. Mit dem Public Key erstellst du über unsere JavaScript-Bridge einen Token für die Kreditkarte deines Kunden. Dazu aber weiter unten mehr.

Private Key:

<DEIN_PRIVATE_KEY>

Sobald du den Token erhalten hast, kannst du - typischerweise bei Bestellabschluss - über unsere API eine Zahlung (Transaktion) ausführen. Bei jedem Request an unsere API musst du deinen Private Key angeben.

Wichtiger Hinweis zu Test- und Live Keys:

Du bekommst jeweils ein Test- und ein Live Keypaar. Verwende zum Testen deine Testkeys. Die Livekeys benutzst du in deinem Produktivsystem.

Falls Du kein Testsystem hast, musst du, bevor du dein System deinen Kunden zur Verfügung stellst, die beiden Testkeys durch die Livekeys ersetzen!

3. API Keys in deinem Konto abrufen

Zuerst navigierst du auf Mein Konto, ein Dropdown Menü erscheint mit den Auswahlmöglichkeiten Einstellungen, Aktivieren und Logout.

Du wählst die Option Einstellungen aus und ein Modaldialog erscheint.

In diesem Modaldialog existieren mehrere Tabs (Account, API-Keys, Daten löschen). Im Account Dialog kannst du Einstellungen wie z.B. dein Passwort ändern. Im Daten-löschen Dialog kannst du deine ganzen Testdaten löschen.

Im Tab Zahlungsarten kannst du, falls du bei der Aktivierung nur eine der Zahlungsarten aktiviert hast, die fehlenden noch nachträglich aktivieren. Dazu musst du ggfs. noch weitere Unterlagen bei uns einreichen, die du dann wieder nach der Aktivierung als PDF per Mail von uns zugesendet bekommen hast.

Im API-Keys Tab findest du deine Testkeys mit denen du Testzahlungen ausführen kannst. Für die Livekeys musst du deinen Account aktivieren, bevor diese angezeigt werden.

Beispiel - So schnell kannst du PAYMILL einbinden

Das folgende Beispiel kann für einen Test 1:1 kopiert und ausgeführt werden.
Bitte beachte, dass du dazu einen PAYMILL-Account mit Test-Keys (s.o.) erstellt haben musst.

Detailiertere Informationen erhälst du in den folgenden Ausführungen.

4. Zahlungsformular

Ein Beispiel zur Anbindung von PAYMILL (Kreditkarte, ELV) in dein Zahlungsformular findest du auf GitHub oder hier als Gist-Einbindung. Weitere Informationen zum Zahlungsformular kannst Du auf unserer Zahlungsformularseite finden.

Je nachdem welche Zahlungsart du möchtest sind unterschiedliche Formularfelder nötig. Für Kreditkarte musst Du folgende Felder mindestens deinem Kunden zum ausfüllen anbieten:

  • Kartennummer (ohne Leerzeichen)
  • Ablaufmonat (z.B. "09")
  • Ablaufjahr (z.B. "2016")
  • CVC (Prüfnummer)
  • Betrag (Integer z.B. "4900" für 49,00 EUR)
  • Währung (nach ISO 4217, z.B. "EUR")
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

if (!paymill.validateCardNumber($('.card-number').val())) {
$(".payment-errors").text("Invalid card number");
$(".submit-button").removeAttr("disabled");
return false;
}

if (!paymill.validateExpiry(
  $('.card-expiry-month').val(),
  $('.card-expiry-year').val())
) {
$(".payment-errors").text("Invalid expiration date");
$(".submit-button").removeAttr("disabled");
return false;
}

paymill.createToken({
number:         $('.card-number').val(),
exp_month:      $('.card-expiry-month').val(),
exp_year:       $('.card-expiry-year').val(),
cvc:            $('.card-cvc').val(),
cardholder:     $('.card-holdername').val(),
amount_int:     $('.card-amount-int').val(), // Integer e.g. "4900" für 49,00 EUR
currency:       $('.card-currency').val()    // ISO 4217 z.B. "EUR"
}, PaymillResponseHandler);

return false;
});
});
</script>

Für ELV musst Du folgende benötigte Felder deinem Kunden zum ausfüllen anbieten:

  • Kontonummer
  • Bankleitzahl
  • Kontoinhaber
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

paymill.createToken({
number:        $('.number').val(),             // ELV
bank:          $('.bank').val(),               // ELV
accountholder: $('.accountholder').val()       // ELV
}, PaymillResponseHandler);

return false;
});
});
</script>

Alternativ SEPA:

  • IBAN
  • BIC
  • Kontoinhaber
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

paymill.createToken({
iban:            $('.iban').val(),             // SEPA
bic:             $('.bic').val(),              // SEPA
accountholder:   $('.accountholder').val()     // SEPA
}, PaymillResponseHandler);

return false;
});
});
</script>

Wichtige Hinweise für die Kreditkartendaten in Deinem HTML Formular

Wichtig bei dem Zahlungsformular ist, dass du kein name Attribut bei den <input> Tags für Kreditkartendaten setzst!

So werden die Kreditkartendaten nicht zurück an deinen Server geschickt und du bleibst außerhalb der gesetzlichen Regelungen zur Speicherung solcher Daten (PCI Compliance).

Wichtige Hinweise für die ELV-Daten in Deinem HTML Formular

Bei ELV ist es nicht unbedingt nötig die Daten PCI konform abzuspeichern nichts desto trotz würden wir dir raten dies zu tun. D.h. auch in diesem Fall solltest du kein name Attribut bei den <input> Tags für ELV-Daten setzen, damit werden die ELV-Daten nicht zurück an deinen Server geschickt und du bekommst keine Probleme, falls dein Server gehackt wird. Einzig die Token der ELV-Daten können erbeutet werden. Dies ist weniger gefährlich als die Kundendaten Bankdaten.

JavaScript - PAYMILL Bridge einbinden

  • Du musst zunächst deinen Public Key in der Variable PAYMILL_PUBLIC_KEY angeben
  • Dann bindest du unsere JavaScript Bridge, die alle Zahlungsarten unterstützt, über folgende URL ein: https://bridge.www.paymill.org

Erstelle dein Zahlungsart (Kreditkarten/ ELV) Token mit dem Befehl createToken

  • Sobald das Zahlungsformular abgeschickt wird, erstellst du mittels createToken einen Token für die Zahlungsarten deiner Kunden
  • Danach fügst du den Token als hidden field in dein Zahlungsformular ein, um diesen zurück an deinen Server zu schicken und alle weiteren Zahlungsfunktionsaufrufe werden mit diesem Token durchgeführt.

Beispiel mit Einbindung des HTML Formulars, Bridge und der createToken Funktion für Kreditkarte:

<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

if (!paymill.validateCardNumber($('.card-number').val())) {
$(".payment-errors").text("Invalid card number");
$(".submit-button").removeAttr("disabled");
return false;
}

if (!paymill.validateExpiry(
  $('.card-expiry-month').val(),
  $('.card-expiry-year').val())
) {
$(".payment-errors").text("Invalid expiration date");
$(".submit-button").removeAttr("disabled");
return false;
}

paymill.createToken({
number:         $('.card-number').val(),
exp_month:      $('.card-expiry-month').val(),
exp_year:       $('.card-expiry-year').val(),
cvc:            $('.card-cvc').val(),
cardholder:     $('.card-holdername').val(),
amount_int:     $('.card-amount-int').val(),   // Integer z.B. "4900" für 49,00 EUR
currency:       $('.card-currency').val()      // ISO 4217 z.B. "EUR"
}, PaymillResponseHandler);

return false;
});
});
</script>
<div class="payment-errors"></div>
<form id="payment-form" action="request.php" method="POST">
<input class="card-amount-int" type="hidden" value="4900" />
<input class="card-currency" type="hidden" value="EUR" />

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

<div class="form-row"><label>CVC (Prüfnummer)</label>
<input class="card-cvc" type="text" value="111" size="4" /></div>

<div class="form-row"><label>Name</label>
<input class="card-holdername" type="text" value="Joe Doe" size="20" /></div>

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

<div class="form-row"><label>Währung</label>

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

</form>

Beispiel mit Einbindung des HTML Formulars, Bridge und der createToken Funktion für ELV:

<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

paymill.createToken({
number:        $('.number').val(),
bank:          $('.bank').val(),
accountholder: $('.accountholder').val()
}, PaymillResponseHandler);

return false;
});
});
</script>
<div class="payment-errors"></div>
<form id="payment-form" action="request.php" method="POST">

<div class="form-row"><label>Account number</label>
<input class="number" type="text" value="648489890" size="20" /></div>

<div class="form-row"><label>Bank code</label>
<input class="bank" type="text" value="50010517" size="4" /></div>

<div class="form-row"><label>Account holder</label>
<input class="accountholder" type="text" value="Chris Hansen" size="20" /></div>

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

</form>

Beispiel mit Einbindung des HTML Formulars, Bridge und der createToken Funktion für SEPA:

<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = '982148700951ed157e2a6dc1714f4f93';
</script>
<script type="text/javascript" src="/bf04fcff7bf9525aca395b4dfecd7e37/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://bridge.www.paymill.org/"></script>
<script type="text/javascript">
$(document).ready(function () {

function PaymillResponseHandler(error, result) {
if (error) {
// Displays the error above the form
$(".payment-errors").text(error.apierror);
} else {
$(".payment-errors").text("");
var form = $("#payment-form");
// Token
var token = result.token;

// Insert token into form in order to submit to server
form.append("<input type='hidden' name='paymillToken' value='" + token + "'/>");
form.get(0).submit();
}
$(".submit-button").removeAttr("disabled");
}

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

paymill.createToken({
iban:            $('.iban').val(),
bic:             $('.bic').val(),
accountholder:   $('.accountholder').val()
}, PaymillResponseHandler);

return false;
});
});
</script>
<div class="payment-errors"></div>
<form id="payment-form" action="request.php" method="POST">

<div class="form-row"><label>IBAN</label>
<input class="iban" type="text" value="DE12500105170648489890" size="27" /></div>

<div class="form-row"><label>BIC</label>
<input class="bic" type="text" value="BENEDEPPYYY" size="20" /></div>

<div class="form-row"><label>Account holder</label>
<input class="accountholder" type="text" value="Alex Tabo" size="20" /></div>

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

</form>

5. Zahlung ausführen

Kopiere unsere PHP Bibliothek in ein Unterverzeichnis, z.B. lib.
Unseren PHP Wrapper findest du hier: https://github.com/Paymill/Paymill-PHP

Die normale Vorgehensweise ist:

  1. Du brauchst zwei Informationen um den PAYMILL PHP Wrapper zu benutzen:
    • API-Endpoint: https://api.www.paymill.org/v2
    • Deinen Private Key aus Mein Konto
  2. Binde die Klassen des Wrappers in dein Skript ein
  3. Hole dir den Token, den du im Zahlungsformular bekommen hast
  4. Erstelle ein neues Transaction Objekt mit den beiden notwendigen Parametern aus 1.
  5. Setze die benötigten Parameter für beispielsweise die Funktion Zahlung, also in diesem Fall z.B. den Betrag (siehe auch die API Referenz für alle benötigten Attribute)
  6. Führe z.B. die Zahlungs-Transaktion Funktion aus
  7. Bei Fehlern bekommst du eine exception, im positiven Fall eine transaction_id zurück

Hier ein beispielhafter Request:

<?php
$token = $_POST['paymillToken'];

if ($token) {
    $request = new Paymill\Request('20c8b46fe20714ad3549a6267dc647ec');
    $transaction = new Paymill\Models\Request\Transaction();
    $transaction->setAmount(4200) // e.g. "4200" for 42.00 EUR
                ->setCurrency('EUR')
                ->setToken($token)
                ->setDescription('Test Transaction');

    $response = $request->create($transaction);

    echo "Transaction: ";
    print_r($response);
}
Payment Kreditkarte Online Zahlungssysteme Payment Service Provider ELV
Contact Support