Created by Mike Elsmore / @ukmadlz
Create and account at http://bit.ly/1adI9J7
Grab your API keys from My Account > Settings > API Keys
PAYMILL PayButtonBETA
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></script>
<form action="path/To/ExampleScript.php" method="post">
<script id="button"
src="https://button.paymill.com/v1/"
data-label="Pay with CreditCard"
data-title="Buy our product"
data-description="It's a great product"
data-submit-button="Pay 2.50 GBP"
data-amount="250"
data-currency="GBP"
data-public-key=PUBLIC_KEY
data-elv="true" // Only for ELV payments
data-lang="en-GB" // Optional language Code >
</script>
</form>
Example at http://bit.ly/18Ieclm
Listen for the "token" event
<script>
$( "#button" ).on( "token", function( event, token ) {
// do something useful with the token
});
</script>
Build a form
<form id="payment-form" action="#" method="POST">
<input type="hidden" value="500" /><!--Value-->
<input type="hidden" value="GBP" /><!--Currency-->
<div class="form-row"><label>Card number</label><!--Card Number-->
<input class="card-number" type="text" size="20" /></div>
<div class="form-row"><label>CVC</label><!--CVC Number-->
<input class="card-cvc" type="text" size="4" /></div>
<div class="form-row"><label>Name</label><!--Card Holders Name-->
<input class="card-holdername" type="text" size="4" /></div>
<div class="form-row"><label>Expiry date (MM/YYYY)</label>
<!--Card Expiry (Month)-->
<input class="card-expiry-month" type="text" size="2" />
<span>/</span>
<!--Card Expiry (Year)-->
<input class="card-expiry-year" type="text" size="4" /></div>
<button class="submit-button" type="submit">Submit</button>
</form>
You add the JS bridge
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
></script>
<script type="text/javascript">
var PAYMILL_PUBLIC_KEY = PUBLIC_KEY;
</script>
<script src="https://bridge.paymill.com/"></script>
Validation
<script type="text/javascript">
// Card Number
paymill.validateCardNumber($('card-number').val());
// Card Expiry
paymill.validateExpiry(
$('card-expiry-month').val(),
$('card-expiry-year').val());
</script>
Retrive the token
<script type="text/javascript">
$(document).ready(function() {
$("#payment-form").submit(function(event) {
$('.submit-button').attr("disabled", "disabled"); // Deactivate submit
paymill.createToken({
number: $('.card-number').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val(),
cvc: $('.card-cvc').val(),
amount_int: $('.card-amount-int').val(),
currency: $('.card-currency').val(),
cardholder: $('.card-holdername').val()
}, PaymillResponseHandler);
return false;
});
});
</script>
Handle the token
<script type="text/javascript">
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("");
}
}
</script>
You can interact and do all this yourself
Once we get our token
The libraries or endpoints found http://bit.ly/17NNSXg
cURL
curl https://api.paymill.com/v2/transactions \
-u PRIVATE_SECRET_KEY: \
-d "amount=250" \
-d "currency=GBP" \
-d "description=Test Transaction"
-d "token=TOKEN"
PHP
if ( isset( $_POST['paymillToken']) ) { $token = $_POST['paymillToken'];
require 'lib/Services/Paymill/Transactions.php';
$transactionsObject = new Services_Paymill_Transactions(
'<PRIVATE_API_KEY | PRIVATE_TEST_KEY>', 'https://api.paymill.com/v2/');
$params = array(
'amount' => '250', // E.g. "250" for 2.50 EUR!
'currency' => 'GBP', // ISO 4217
'token' => $token,
'description' => 'Test Transaction'
);
$transaction = $transactionsObject->create($params);
if ( isset( $transaction['status'] ) && ( $transaction['status'] == 'closed') ) {
echo 'transaction successful!';
}
}
@ukmadlz