Custom form

This tutorial will show you how to:

• create custom payment form
• collect card information and request card token
• receive card token and send it to your server

Step 1: Custom payment form

First we will need to create a payment form:

<form action="" method="post" id="payment-form">
<span class="payment-errors"></span>

<div class="form-group">
<label>
<span>Card Number</span>
<input type="text" size="20" data-epayoo="number" />
</label>
</div>

<div class="form-group">
<label>
<span>CVC</span>
<input type="text" size="4" data-epayoo="cvc" />
</label>
</div>

<div class="form-group">
<label>
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" data-epayoo="expMonth" />
</label>
<span> / </span>
<input type="text" size="4" data-epayoo="expYear" />
</div>

<button type="submit">Pay</button>
</form>

Important thing to note is that all card related fields doesn't have name attribute and are using data-epayoo attribute instead. This approach will ensure that no sensitive data would be sent to your server.

In this example we don't have any extra fields in our form - but there is no problem with adding additional fields. For example you may want to add e-mail address filed or some field to select product type.

Step 2: Collecting card data and requesting card token

To collect card data first we need to include and configure epayoo.js library:

<script type="text/javascript" src="https://epayoo.com/js/epayoo.js"></script>

<script type="text/javascript">
// This is required to identify your account
Epayoo.setPublicKey('pu_test_WVMFC9GFuvm54b0uorifKkCh');
</script>

Next we need to override default behavior of form submit:

<script type="text/javascript">
$('#payment-form').submit(function(e) {
var form = $('#payment-form');

// Disable form submit button to prevent repeatable submits
form.find('button').prop('disabled', true);

// Send card data to EpayooEpayoo.createCardToken(form, createCardTokenCallback);

// Prevent the form from submitting default action
return false;
});
</script>

In this code we call Epayoo.createCardToken in order to create card token from data filled by user in HTML form. First parameter in that call is form element which must have data-epayoo attribute added to all relevant fields. Second parameter is callback function that will be called when card token is created (or when some error occurs).

Note that in this example we are using jQuery to simplify things, but this is not required. epayoo.js doesn't have any external dependencies and you can easily use it without jQuery.

Step 3: Receiving card token and sending it to your server

Now that we have code that will create card token - last thing that we need to do is to send that token to your server. In our example we do this in createCardTokenCallback function:

function createCardTokenCallback(token) {
var form = $('#payment-form');

// Check for errors
if (token.error) {
// Display error message
form.find('.payment-errors').text(token.error.message);
// Re-enable form submit button
form.find('button').prop('disabled', false);
} else {
// Append token to the form so that it will be send to server
form.append($('<input type="hidden" name="token" />').val(token.id));

// Submit the form with its default action
form.unbind();
form.submit();
}
}

First thing that we do in this code is to check for errors. If request failed then we display error message and we re-enable form submitting, so that user can try to fix the problem (which most like would be not valid card data). If request was successful then we acquire card token, we append it to the form and we submit the form with its default action. This will result in form data (together with card token, but without sensitive card details) to be send as HTTP POST request to URL defined in form's action attribute.

Next steps

Now that the card token have been sent to your server you can use it to charge user's card for money. Read more about this in charging cards tutorial.

3D Secure

To enable 3D Secure support in your custom form you need to make additional request to Epayoo.verifyThreeDSecure after successfully receiving a card token. Calling that method will open frame with 3D Secure process and result of that process will be appended to the card token.

To do this we need to modify createCardTokenCallback function:

function createCardTokenCallback(token) {
var form = $('#payment-form');

// Check for errors
if (token.error) {
// Display error message
form.find('.payment-errors').text(token.error.message);
// Re-enable form submit button
form.find('button').prop('disabled', false);
} else {
// Open frame with 3D Secure process
Epayoo.verifyThreeDSecure({
amount: 799,
currency: 'EUR',
card: token.id
}, verifyThreeDSecureCallback);
}
}

And then code responsible for sending a token to your server have to be moved to verifyThreeDSecureCallback function:

function verifyThreeDSecureCallback(token) {
var form = $('#payment-form');

// Check for errors
if (token.error) {
// Display error message
form.find('.payment-errors').text(token.error.message);
// Re-enable form submit button
form.find('button').prop('disabled', false);
} else {
// Append token to the form so that it will be send to server
form.append($('<input type="hidden" name="token" />').val(token.id));

// Submit the form with its default action
form.unbind();
form.submit();
}
}

Next steps

Now that the card token have been sent to your server you can use it to charge user's card for money. Read more about this in charging cards tutorial.