What is PAYMILL?

PAYMILL is a easy to integrate payment service for:

• One time payments
• Subscriptions

For businesses & users…

This means that businesses and users:

• Less hassle with…
• Standards compliance
• Less steps in the user experience
• Which leads to higher sales rates

For developers…

For us as developers

• Less steps to process
• Something really easy to integrate
• A wonderful RESTful API

The first step…

The easy way or easier way

The first step to taking a payment is get a transaction token

The token is used as the root of all the transactions you can do, from payment through to refund

The easier way

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

The fastest way is to drop in the above code and you now have a premade form.

The easier way

Listen for the "token" event

<script>
$( "#button" ).on( "token", function( event, token ) {
    // do something useful with the token
});
</script>

You then submit the form and wait for the "token" event, which returns the TOKEN: tok_

And there you have a premade form with associated button with click event that you can use the token with

• Card Data
• Number: 4111 1111 1111 1111
• CVC: 123
• Expiry: 01/2015

The easy way

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 put together a form with the basic elements for a card payment

• Value whole value without decimal
• 4 Character Currency Reqresentation
• Card Number
• CVC Security Number
• Card Number - Month and Year in MM/YYYY

Optional variables included are

• Card Holders Name

The easy way

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>

You add the JS Bridge with your Public Key, which will give you access to the PAYMILL functions

You can then validate all the inputs using the PAYMILL methods

The easy way

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>

You don't have to use jQuery to accomplish this, it's just here for ease

So you don't create too many keys with someone being click happy, disable the "submit" key

After that you send the parameters to the PAYMILL API via the paymill.createToken() function

The easy way

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>

And just like with the PayButton we retrive the token

However when using the bridge directly we are returned an json object which always has to options

• error
• token

One is always null, so it is easy to find a success or the correct error code for the transaction

The hard way

You can interact and do all this yourself

You can choose to interact with the system yourself. Either using an existing wrapper library

Or making your own and connecting to the API endpoints

Previous hacks, people have wrote wrappers in languages we don't user…yet

Make the payment

Once we get our token

Once we get our token we can complete the second step of the process

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 '<strong>transaction successful!</strong>';
    }
}

Now we have the token we can throw it into either of the cURL or the PHP scripts and complete

Execute example:

curl https://api.paymill.com/v2/transactions \
-u a1324a5e9dc66956f809bf328da6bc1f: \
-d "amount=250" \
-d "currency=GBP" \
-d "description=Test Transaction"
-d "token=TOKEN"