PAYMILL

Hack Presentation

Created by Mike Elsmore / @ukmadlz

What is PAYMILL?

For businesses & users…

For developers…

So what to do…

Create and account at http://bit.ly/1adI9J7

Grab your API keys from My Account > Settings > API Keys

The first step…

The easy way or easier way

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 easier way

Listen for the "token" event


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

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>

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>

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>

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>

The hard way

You can interact and do all this yourself

Make the payment

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!';
    }
}

The process…

User does stuff

Start Payment - Gather user details and authorise

PAYMILL processes the information

End Payment - Sent return data

User does stuff

What else can you do…

Subscriptions

The other shiny stuff

  • AutoInvoicing
  • Alerting - WebHooks
  • Mobile SDK - iOS & Android

Find me…

mike@elsmore.me

@ukmadlz