Instructions: Retrieving & displaying card details

Using the Bond card management SDK to retrieve and display a customer's card details.

Sample pseudocode for retrieving and displaying card details

Displaying card details fields in HTML

You can use BondCards from the Bond Web SDK to insert iFrames with relevant card details into an HTML page using <div> elements with IDs. The sample pseudocode shown below inserts the retrieved card details in a page.

<div class="field">
  Card Number
  <div id="num" class="card-field"></div>
<div class="field">
  Expiration Date
  <div id="exp" class="card-field"></div>
<div class="field">
  <div id="cvv" class="card-field"></div>

Using the BondCards SDK in your script file

  1. Import the SDK
  2. Get temporary security tokens
  3. Initialize the BondCards class

1. Importing the SDK

Import with

  import { BondCards } from 'bond-sdk-web';

using node.js or

  import { BondCards } from '';

using the CDN.

2. Getting temporary security tokens

Use the sample code shown below with the API to get temporary tokens by making a call to the backend.

curl --request POST \
  --url \
  --header 'Content-Type: application/json' \
  --header 'Identity: YOUR_IDENTITY' \
  --header 'Authorization: YOUR_AUTHORIZATION' \
  --data '{"customer_id": "YOUR_CUSTOMER_ID"}'
uri = URI.parse("")
params = {'customer_id' => 'YOUR_CUSTOMER_ID'}
headers = {

http =, uri.port)
response =, params.to_json, headers)
output = response.body
puts output
const fetch = require('node-fetch');

let url = '';
let options = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Identity': 'YOUR_IDENTITY',
    'Authorization': 'YOUR_AUTHORIZATION'
  body: { 'customer_id': 'YOUR_CUSTOMER_ID' }

fetch(url, options)
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.error('error:' + err));
import requests

url = ""

headers = { "Content-type": "application/json", "Identity": "YOUR_IDENTITY", "Authorization": "YOUR_AUTHORIZATION" }

payload = { 'customer_id': 'YOUR_CUSTOMER_ID' }

response =, headers=headers, json=payload)

var client = new RestClient("");
var request = new RestRequest(Method.POST);
request.AddHeader("Content-Type", "application/json");
request.AddHeader("Identity", "YOUR_IDENTITY");
request.AddHeader("Authorization", "YOUR_AUTHORIZATION");
request.AddParameter("application/json", {"customer_id": "YOUR_CUSTOMER_ID"}, ParameterType.RequestBody);
IRestResponse response = client.Execute(request);
OkHttpClient client = new OkHttpClient();

Request request = new Request.Builder()
  .addHeader("Content-Type", "application/json")
  .addHeader("Identity", "YOUR_IDENTITY")
  .addHeader("Authorization", "YOUR_AUTHORIZATION")
                        "{\"customer_id\": \"" + YOUR_CUSTOMER_ID + "\"}"

Response response = client.newCall(request).execute();



For a business resource, use business_id in place of the customer_id`.

3. Initializing the BondCards class

Initialize the BondCards class using the JavaScript shown below.

  const bondCards = new BondCards({ live: false });

Pass {live: true} when using the live environment.

4. Displaying a PIN

On an event such as a button click or page load, you can call for each of the fields whose data you want to display using appropriate parameter values.
You need to send the following:

  • card_id
  • Temporary Identity and Authorization tokens
  • Field type:
    • number for the credit card number
    • expiry for the expiry date
    • cvv for the card verification value
  • The HTML/CSS selector of the div/field where you want the iFrame to be inserted

.show Example

    cardId: 'YOUR_CARD_ID',
    identity: 'YOUR_IDENTITY',
    authorization: 'YOUR_AUTHORIZATION',
    reset: true // (optional) Reset the PIN and show new PIN
    htmlSelector: "#pin",
    css: {'font-size': '14px'} // (optional) An object of CSS rules to apply to the response.
  .then((data) => {
    // The iFrame with revealed data will already be inserted.
    // But you can get a reference to it here and handle data further if you like.
  .catch((error) => {
    // Handle an error

Formatting examples

You can manipulate card numbers and expiry dates in a number of ways, as shown in the table below.

Change requiredReplace this:With this:
To separate card number using dashes:
To separate card number using spaces:
4111 1111 1111 1111
'(\d{4})(\d{4})(\d{4})(\d{4})','$1 $2 $3 $4'
To remove spaces:
4111 1111 1111 1111
' '''
To remove the first two dashes:
'-'"", count: 2
To separate card expiry month and year using a slash: