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 id="payment-error"></span>
	
	<div class="form-group">
		<label>Card Number</label>
		<div data-securionpay="number"></div>
	</div>

	<div class="form-group">
		<label>Expiration</label>
		<div data-securionpay="expiry"></div>
	</div>

	<div class="form-group">
		<label>CVC</label>
		<div data-securionpay="cvc"></div>
	</div>

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

Important thing to note here is that all card related fields are not created as <input> tags, but as empty placeholders that will be later converted to secure components with the use of our SecurionPay.js library. This approach will ensure that no sensitive card data can be stolen, even if malicious code is injected on your website.

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://js.securionpay.com/v2/securionpay.js"></script>

<script type="text/javascript">
	// Initialize SecurionPay object with your public key
	var securionPay = SecurionPay("pu_test_WVMFC9GFuvm54b0uorifKkCh");

	// Create components to securely collect sensitive payment data
	securionPay.createComponentGroup().automount("#payment-form");
</script>

The automount() method that is used here will look for tags with data-securionpay attribute and will automatically create components with type matching value from that attribute.

Next we need to override default behavior of form submit:

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

	function paymentFormSubmit(e) {
		// Prevent the form from submitting default action
		e.preventDefault();

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

		// Send card data to SecurionPay
		securionPay.createToken(componentsGroup)
			.then(tokenCreatedCallback)
			.catch(errorCallback);
	}
</script>

In this code we call components.createToken() in order to create card token from data collected by secure components. Return value of that method is standard Promise object. Result can be processed by providing callback to then() method. Error handling can be done by providing callback to catch() method.

If you collected any additional data from user that you want to include in created token (like cardholder name or billing address) then you can pass that data as first argument of createToken() method.

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.

Simple error handling can be done by displaying error message and re-enabling form submit button:

function errorCallback(error) {
	// Display error message
	$('#payment-error').text(error.message);

	// Re-enable form submit button
	$form.find('button').prop('disabled', false);
}

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 tokenCreatedCallback function:

function tokenCreatedCallback(token) {
	// 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();
}

If request was successful then we received 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 call to securionpay.verifyThreeDSecure() method 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 tokenCreatedCallback function:

function tokenCreatedCallback(token) {
	var request = {
		amount: 2499,
		currency: 'EUR',
		card: token.id
	};

	// Open frame with 3-D Secure process
	securionPay.verifyThreeDSecure(request)
		.then(threeDSecureCompletedCallback)
		.catch(errorCallback);
}

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

function threeDSecureCompletedCallback(token) {
	// 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.