Cards & Wallets · Your payment page · Advanced features · CardLock

Using CardInfo and CardLock together

You can still use card information if you are using CardLock, both in your payments page and in your server.

This description builds on using the CardLock library, getting card information from your payments page and getting card information from your server.

Overall flow

  1. Prepare your page with a link to the SDK and a client access token.
  2. When your page loads, initialise the SDK.
  3. Use event listeners to provide feedback to the customer.
  4. Get card information from your server, given an existing card lock token, so you can apply policy.

Load your page

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

  1. Create the CardInfo SDK 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) { … });
  1. Create the hidden form element for CardLock as described in using the CardLock library.
  2. Create a binding of the SDK to the form element that will contain the PAN.
JavaScript
var cardNumberBinding = cardInfo.bindCardElement('my_card_number_element_id');
  1. Initialize the CardLock SDK as described in using the CardLock library, binding the same form field for the PAN.
  2. Register one or more event listeners to respond to information about the card that the SDK finds out as the customer types digits. Here is an example.
JavaScript
cardNumberBinding.onCardSchemeChanged(function(old_scheme, new_scheme){ … });

See using event listeners for a full description of the hooks available to you.

The SDK works by making JSONP calls to Access PaySuite services. It may happen that the SDK 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. See Response Codes and Messages — CardInfo.

Get card information from your server, given an existing card lock token