SecurionPay

Introduction

SecurionPay.js is a browser-side JavaScript library that can be used securely collect sensitive payment information (like credit card number).

This documentation describes every object and every method available in that library.

Including SecurionPay.js

SecurionPay.js should be included on each page of your site that will be used to collect payment information. It should always be loaded directly from https://js.securionpay.com, rather than bundled or hosted on your website. 


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

Initializing SecurionPay.js

To start using SecurionPay.js first thing that you need to do is to call SecurionPay() method to create and configure a SecurionPay object.

SecurionPay(publicKey)

Create and configure new SecurionPay object.

Parameters

publicKey
string Public API key used to identify your account. You can find your API keys in your account settings once you login to your account.

Result

a SecurionPay object

EXAMPLE


var securionPay = SecurionPay("pu_test_WVMFC9GFuvm54b0uorifKkCh");

SecurionPay object

SecurionPay object is a main entry point to all functionalities available in SecurionPay.js.

createComponent(type, options = {})

Create a new component of given type.

Parameters

type
string Type of component to create. Can be one of following types:
  • card - single component used to collect all card details
options
object Plain object with additional options.

Result

a Component object

EXAMPLE


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

createComponentGroup()

Create a new grouping object that will be used to create multiple related components - for example to create number, expiry and cvc components that together will be used to collect details of single card.

Result

a ComponentGroup object

EXAMPLE


var components = securionPay.createComponentGroup();

createToken(component, data = {})

Collect card data from given component or component group and send it to "create token" API method for tokenization.

Parameters

component
Component | ComponentGroup Either single component or a component group from which sensitive card data will be tokenized.
data
object Additional data that will be included in request to tokens API. Allowed keys are listed in "create token" API method. NOTE: for security reasons it is not possible to use this parameter to send following fields in request: number, expMonth, expYear and cvc. Values of these fields must be collected using components.

Result

a Promise object

EXAMPLE


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

function onFormSubmit() {
	securionPay.createToken(card)
			.then(tokenCreatedCallback)
			.catch(errorCallback);
}

verifyThreeDSecure(request)

Starts a 3D Secure process.

Depending on card and card's issuer this can result in showing 3D Secure challenge in iframe or popup window.

Parameters

request
object Request object that will be sent to API. Following keys are allowed:
  • card (string) - either a token identifier (created by createToken() method) or a card identifier (created using cards API).
  • amount (integer) - amount in minor units of given currency (for example 10€ is represented as "1000" and 10¥ is represented as "10"), must match value that will be later used to create a Charge using API
  • currency (string) - currency represented as three-letter ISO currency code, must match value that will be later used to create a Charge using API
  • merchantAccountId (string, optional) - identifier of merchant account that will be used to do this 3D Secure process

Result

a Promise object

EXAMPLE


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

	securionPay.verifyThreeDSecure(request)
		.then(threeDSecureCompletedCallback)
		.catch(errorCallback);
}

Component object

Component object is used to securely collect sensitive information (like card number or cvc).

mount(selector)

Mounts component to placeholder tag located by given selector.

Parameters

selector
string | Element Either CSS selector or DOM element that will be used as mounting point.

Result

Component object on which this method was called

EXAMPLE


var components = securionpay.createComponentGroup();
var number = components.createComponent("number").mount("#number");

clear()

Removes any value currently present in a component.

Result

a Component object on which this method was called

EXAMPLE


var card = securionpay.createComponent("card");

card.clear();

ComponentGroup object

ComponentGroup object is used to group components when that are multiple components needed to collect card details of a single card.

automount(selector)

Automatically search all tags nested under tag located by given selector and create components on all tags that have data-securionpay attribute. Value of that attribute is used as component's type.

Parameters

selector
string | Element Either CSS selector or DOM element that will be used as starting point when searching for tags with data-securionpay attribute.

Result

a ComponentGroup object on which this method was called

EXAMPLE


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

createComponent(type, options = {})

Create a new component of given type and assign it to this component group.

Parameters

type
string Type of component to create. Can be one of following types:
  • number - component used to collect card number
  • expiry - component used to collect card expiration date (both month and year)
  • cvc - component used to collect card security code
  • expiryMonth - component used to collect card expiration month
  • expiryYear - component used to collect card expiration year
options
object Plain object with additional options.

Result

a Component object

EXAMPLE


var components = securionpay.createComponentGroup();

var number = components.createComponent("number");