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-securionpay="number" />
		</label>
	</div>

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

	<div class="form-group">
		<label>
			<span>Expiration (MM/YYYY)</span>
			<input type="text" size="2" data-securionpay="expMonth" />
		</label>
		<span> / </span>
		<input type="text" size="4" data-securionpay="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-securionpay 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 SecurionPay.js library:

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

<script type="text/javascript">
	// This is required to identify your account
	Securionpay.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 SecurionPay
		Securionpay.createCardToken(form, createCardTokenCallback);
	
		// Prevent the form from submitting default action
		return false;
	});
</script>

In this code we call Securionpay.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-securionpay 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. SecurionPay.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 Securionpay.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
		SecurionPay.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 or take a look at live example.