Cards & Wallets · Common features · Card Info library

From a website

This page describes how you can construct your website to get and use card information, using the Card Info library. This approach works for web and mobile web.

Overall flow

Prepare your page with a link to the library and a client access token
When your page loads, initialise the library
Use event listeners to provide feedback to the customer
Handling client access tokens

Prepare your page

When you are building the payments page on your server, you need to:

Link to the Card Info library.
Get a client access token using the client authorisation API, which you will supply to the library when your page loads. See also Handling client access tokens.

Link to the Card Info library

The Card Info library can be found here:

Library

https://secure.pay360.com/cardinfo/scripts/v2/cardInfo.min.js

There is also a non-minified version of the library available, if needed, which can be found at https://secure.pay360.com/cardinfo/scripts/v2/cardInfo.js.

The library supports Subresource Integrity (SRI) so it is recommended to use the integrity attribute on the script element so the integrity of the file is verified by the browser. You will also need to specify the crossorigin attribute with a value of anonymous. For example:

Script element

<script src="https://secure.pay360.com/cardinfo/scripts/v2/cardInfo.min.js" integrity="sha384-yvwj0pv8v/xoXT78HRdly9GeT3wTXiBnIA5zARoa0lInMH5/Bl8YVANEgH+0Zj3K" crossorigin="anonymous" type="text/javascript"></script>

If you specify a Content Security Policy (CSP) on your web pages then you will need to ensure that the domain of the script (secure.pay360.com) is specified in the script-src directive as well as the connect-src directive as the script will dynamically load configuration from the domain.

Available script versions and their integrity checksums:

Script	Checksum
`/cardinfo/scripts/v2/cardInfo.min.js`	`sha384-yvwj0pv8v/xoXT78HRdly9GeT3wTXiBnIA5zARoa0lInMH5/Bl8YVANEgH+0Zj3K`
`/cardinfo/scripts/v2/cardInfo.js`	`sha384-DDnt1hhRMOuPpDF3BJlzd4ZC5OWygTTFO6PCB2ftTBIG631HKJQJRgQS10N0w2WM`

The checksums are the same when using the test environment scripts from https://secure.mite.pay360.com/cardinfo. Note that a checksum is not available for version 1 of the script, we recommend using version 2 onwards.

Get a client access token

From your server, call the client authorisation API with the CARDINFO scope. Supply the returned clientToken to the Card Info library when your page loads.

Client authorisation

EndpointDefinition

POST /acceptor/rest/authorisation/{instId}/authoriseClient

Request body

{
  "scopes": [
    "CARDINFO"
  ]
}

Response

HTTP/1.1 200

{
  "clientToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJpYXQiOjE0MTM5MzE0OTUsImV4cCI6MTQxMzkzNTE1NSwiYXVkIjoicHAvY2wiLCJzdWIiOiJhcGlfdXNlciJ9.MD4CHQDbh5oAbz122AVNeyJyoeQ7D0irpCx65m9XeNzmAh0AuqoipfjmFlTOJkWT4mH2ZsWo4V_iqbaO5f_10Q",
  "status": "S100",
  "message": "OK",
  "expires": "2026-10-21T23:44:55.000Z"
}

Load your page

You need to do the following when your page has loaded.

Create the Card Info library object, passing in the client access token that you already obtained, wrapped as a JSON object, and passing in an error handling function.

JavaScript

var cardInfo = CardInfo({access_token: my_client_access_token}, function(errValue) { … });

Create a binding of the library to the form element that will contain the PAN.

JavaScript

var cardNumberBinding = cardInfo.bindCardElement('my_card_number_element_id');

Register one or more event listeners to respond to information about the card that the library finds out as the customer types digits. Here is an example. The complete list of events is described below.

JavaScript

cardNumberBinding.onCardSchemeChanged(function(old_scheme, new_scheme){ … });

The library works by making JSONP calls to Access PaySuite services. It may happen that the library in a customer’s browser cannot reach those services. In that event, the values of valid, and therefore the value of complete, are meaningless. You can find out about that by listening for error E99 and we strongly suggest that you do.

Use event listeners

The library binding object has a method to register a callback function for each card information field. In each case the callback function will receive the old and new values of the relevant data element as parameters, e.g. onCardSchemeChanged expects a function that takes the old and new string values of the card scheme.

JavaScript

cardNumberBinding.onCardSchemeChanged(function(old_scheme, new_scheme){ … });

The binding object also has a method to register a callback that takes all the card information as a single object, and the callback is called whenever any field changes. The names of the registration methods and the types of the events are as follows:

Callback registration method	Type of parameter of callback	Description
`onValidChanged`	boolean	Indicates that the card field (stripped of spaces and "-") is a valid prefix for a PAN, or a well-formed PAN.
`onPanCompleteChanged`	boolean	Indicates whether the card field (stripped of spaces and "-") is a well-formed PAN, and can be submitted to the advanced payments API.
`onCardTypeChanged`	string	The card brand key for the card. See Reference Data Values for currently supported keys.
`onCardSchemeChanged`	string	The scheme key for the card. See Reference Data Values for currently supported keys.
`onCardUsageTypeChanged`	string	The scheme key for the card, typically credit or debit. See Reference Data Values for currently supported keys.
`onIssuerCountryChanged`	string	ISO_3166-1 Alpha country code of the issuing bank — (e.g. "GBR") or "XXX" if the country is known to be undetermined.
`onIssuerChanged`	string	Printable string identifying the name of the issuing bank.
`onDataChanged`	object	Full details of old and new data known for this card.

Handling client access tokens

Note that each token has an expiry time. The lifetime of each client access token is currently 4 hours, but Access PaySuite reserves the right to change that value. You may cache the token for reuse across several different consumers, thus improving the responsiveness of your payment page for the majority of your customers. For example, if the token has 2:47 to run, but you have set your consumer session to expire after 2:00, then it is safe to reuse the token. If the token had 1:58 to run, you would need to get a fresh one. Regardless we recommend that you handle refresh instigated from the browser. You can catch token expiry in the error handler. The error code is V03. Note that your servers can get a new token, but the browser cannot do so directly. See Response Codes and Messages — CardInfo.