PCI data rendering

How to install and use the Bond card management SDK which assists you in handling sensitive customer data.

Bond card management JavaScript SDK

This section provides:


We provide the BondCards SDK in the Bond Web 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. Numerical code, up to 16 digits, uniquely identifying a credit cardholder’s account, created when the account is opened. The first six numbers identify the card network, the next set of digits signifies the cardholder, and the remaining digits are used for security purposes. A primary account number starts with the bank identification number (BIN)., CVVCVV - Card Verification Value. An authentication code added to a payment card for use during the authorization process. The purpose of the CVV is to verify that the cardholder making the transaction during a card-not-present transaction actually possesses the credit or debit card being used for the purchase. Credit card companies have their own name for the code. For Visa and MasterCard, the code appears as three digits on the back of the card. For American Express, the verification code appears as four digits on the front of the card., 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 Web 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-web
  2. Import the package into your JavaScript code as shown below:
   import { BondCards } from 'bond-sdk-web';

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/web/v1/bond-sdk-web.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 snippets and descriptions below are generic examples of how you can use the SDK. For details regarding
specific methods, see the SDK documentation.

Executing a request:

1. Authorizing the calls using temporary tokens

Before executing any request, you need to authorize the calls to the Bond API and to initialize BondCards. 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.

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.

2. Initializing BondCards

Call the constructor (live: true to access the live environment) using:

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

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

Next Steps

See more detailed instructions for retrieving sensitive card details

Did this page help you?