Components

SecurionPay Components are web UI elements that can be used to securely collect sensitive information in your payment forms (like card number, expiration and CVC for card payments). Use of SecurionPay Components ensures that sensitive payment data never touches your server or your website.

To use SecurionPay Components you need to include SecurionPay.js library and initialize it with your public key:

<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");
</script>

Once the library is configured there are two ways to use SecurionPay Components to collect card data:

  • use separate components for number, expiry and CVC
  • use single component for all card details

Single component for all card details

This approach is fastest and easies to implement. It is also preferred when you have limited space for a payment form.

First you need to create placeholder tag in HTML code of your website:

<div id="card"></div>

Then in JavaScript code you need to create card component and mount it to that placeholder tag:

var card = securionPay.createComponent("card").mount("#card");

Later, when all card data have been provided by a customer, you need to create token from that card component:

securionPay.createToken(card).then(/*...*/).catch(/*...*/);

Complete and working code can be found in our Card Component example.

Separate components for number, expiry and CVC

When you want to have full control over your payment form you can use separate component for each field. This approach requires little more code than using single component, but it is also fast and easy to implement.

First you need to create placeholder tag for each component. To simplify creation of components we group these placeholders under one common tag and we used data-securionpay attribute to specify a type of component:

<div id="payment-form"></div>
    <div data-securionpay="number"></div>
    <div data-securionpay="expiry"></div>
    <div data-securionpay="cvc"></div>
</div>

Doing it this way allows to create component group and automatically create and mount all components in that group:

var components = securionPay.createComponentGroup().automount("#payment-form");

Later, when all card data have been provided by a customer, you need to create token from that component group:

securionPay.createToken(components).then(/*...*/).catch(/*...*/);

Complete and working code can be found in our Custom Form example.

Creating components manually

Alternative approach to use of data-securionpay attribute and automount method is to create each component manually. To do this you don't need to have common parent element, but you need some other way to locate placeholder tags (for example using id attribute):

<div id="number"></div>
<div id="expiry"></div>
<div id="cvc"></div>

Then in JavaScript you need to create component group and then create and mount each component in that group:

var components = securionPay.createComponentGroup();
components.createComponent("number").mount("#number");
components.createComponent("expiry").mount("#expiry");
components.createComponent("cvc").mount("#cvc");

Using separate component for expiration month and year

Other alternative possibility is to use two components for card expiration date - separate component for expiration month and year.

To do this you need to create two placeholder tags and use component types expiryMonth and expiryYear. It can be done either by using data-securionpay attribute and automount() or by using manual component creation.