PCI data rendering

Bond card management JavaScript SDK

This section provides:


We provide the BondCards SDK to shield you from the burden and compliance requirements needed when handling personal data.

Anyone that wants to store or process card details (that include the PANPAN - Primary Account Number. The 14, 15, or 16 digit number generated as a unique identifier for a primary account. Primary account numbers are issued to payment cards such as credit and debit cards as well as other cards that store value like a gift card., CVVCVV - Card Verification Value. Generated by debit card issuers (banks or other financial institutions) based on the following details: DEBIT CARD NUMBER. SERVICE CODE. This number is vital for completing online transactions and should never be shared with anyone., expiry date, and
PINPIN - Personal Identification Number. A numerical code issued with a payment card that is required to be entered to complete various financial transactions.s), you have to comply with PCI DSS data security requirements. To achieve compliance requires a lot of overhead. To reduce this overhead, we provide our BondCard SDK that takes care of vaulting and tokenizing sensitive card information for you. Using our SDK, you can easily allow your customers to retrieve their card details, and set and reset PINs without having to develop code that is compliant from scratch. The SDK takes care of preventing anyone not authorized from seeing your customers' sensitive card details.

The SDK relies heavily on Promises which makes it easy to handle the asynchronous requests that are made to the API. The SDK provides a BondCards object containing several methods which map to the calls and parameters that are described in detail in Bond Cards SDK Documentation.

To use the SDK, you can either build the repo yourself or install it.

Requirements if you build the repo yourself

To build the repo (with or without sample files), you need Node.js v6.3.0 or above.
Node installation includes NPM which is responsible for dependency management.

Importing the package

You can import the package into your code using either NPM or CDN.

Using Node Package Management

  1. Install the package by entering the following in a terminal window:
    npm install bond-sdk-cards
  2. Import the package into your JavaScript code as shown below:
import BondCards from 'bond-sdk-cards';

Using a Content Delivery Network

You can use either JavaScript or HTML to import the package from a CDN. For additional information, see CDN.

Using JavaScript

Use the JavaScript shown below to import the package from a CDN:

import BondCards from 'https://cdn.bond.tech/sdk/cards/v1/bond-sdk-cards.js';

Using HTML

Use the HTML shown below to import the package from a CDN:

<script type="text/javascript" src="https://cdn.bond.tech/sdk/cards/v1/bond-sdk-cards.js"></script>

Using the BondCards SDK

The snippet shown below is a generic example of how you can use the SDK. For details regarding
specific methods, see the SDK documentation.

curl --request POST \
  --url https://sandbox.bond.tech/api/v0/auth/key/temporary \
  --header 'Content-Type: application/json' \
  --header 'Identity: YOUR_IDENTITY' \
  --header 'Authorization: YOUR_AUTHORIZATION' \
  --data '{"customer_id": "YOUR_CUSTOMER_ID"}'
uri = URI.parse("https://sandbox.bond.tech/api/v0/auth/key/temporary")
params = {'customer_id' => 'YOUR_CUSTOMER_ID'}
headers = {

http = Net::HTTP.new(uri.host, uri.port)
response = http.post(uri.path, params.to_json, headers)
output = response.body
puts output
import requests

url = "https://sandbox.bond.tech/api/v0/auth/key/temporary"

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

payload = { 'customer_id': 'YOUR_CUSTOMER_ID' }

response = requests.post(url, headers=headers, json=payload)

// Client-side example for quick testing.
// You would call this from your backend in production

fetch("https://sandbox.bond.tech/api/v0/auth/key/temporary", {
  method: "POST",
  headers: {
    "Content-type": "application/json",
    "Identity": "YOUR_IDENTITY",
    "Authorization": "YOUR_AUTHORIZATION",
  body: {
    "customer_id": "YOUR_CUSTOMER_ID",
var client = new RestClient("https://sandbox.bond.tech/api/v0/auth/key/temporary");
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.

Before executing any request, you need to authorize the calls to the Bond API and to initialize BondCards.

Executing a request:

1. Authorizing the calls using temporary tokens

Make an authorized call from your backend with the correct customer_id/business_id to receive temporary tokens (identity, authorization). These are short-lived tokens lasting for a maximum of five API calls or up to five minutes.

2. Initializing BondCards

Call the constructor (live: false to access the sandbox environment) using:

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

3. Making a request

You can now use the various methods from the SDK to reveal/manage PCI-sensitive data for a particular card ID. Following the Promises notation, use .then() to handle all successful requests, and use .catch() to handle all failed requests.

Most of the calls take an object as the only parameter but refer to the API documentation to tailor the request as needed. An example of a request is shown below.

    cardId: 'YOUR_CARD_ID',
    identity: 'YOUR_IDENTITY',
    authorization: 'YOUR_AUTHORIZATION',
    field: "number",
    htmlSelector: "#num",
  .then((data) => {
    // Handle data
  .catch((error) => {
    // Handle an error

4. Controlling loading

You can control loading using the methods from the SDK. Simply show the loader, wait for a response, and hide it when needed, as shown below.

// Handle show loading
  .then((data) => {
    // Handle hide loading
  .catch((error) => {
    // Handle hide loading

Working with the repository

For examples of working with the repo, see the Bond Cards public SDK Repo to build the project and run sample files.

The following script aliases are available:

  • npm run test: Run unit tests
  • npm run doc: Run JSDoc to create a "docs" folder with automatically generated documentation for the source code.
  • npm run build: Create a production build minified and transpiled JavaScript bundle without any sample code.
  • npm run start: Lint SDK and sample files, then deploy a web server from the
    root folder at localhost:8080 to run the html samples.

Next Steps

See more detailed instructions for retrieving sensitive card details

Did this page help you?