Bond card management JavaScript SDK

This section provides:

• An overview of the SDK, its requirements, importing the SDK, and basic usage.
• Detailed instructions on using the SDK to retrieve card details.
• Detailed instructions on using the SDK to set PIN numbers.
• SDK documentation.

Overview

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 PAN, CVV, expiry date, and PINs), 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.1/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.1/auth/key/temporary")
params = {'customer_id' => 'YOUR_CUSTOMER_ID'}
headers = {
    'Content-Type'=>'application/json',
    'Identity'=>'YOUR_IDENTITY',
    'Authorization'=>'YOUR_AUTHORIZATION'
}

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.1/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)

print(response.text)

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

fetch("https://sandbox.bond.tech/api/v0.1/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.1/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()
  .url("https://sandbox.bond.tech/api/v0.1/auth/key/temporary")
  .addHeader("Content-Type", "application/json")
  .addHeader("Identity", "YOUR_IDENTITY")
  .addHeader("Authorization", "YOUR_AUTHORIZATION")
  .post(RequestBody
                .create(MediaType
                    .parse("application/json"),
                        "{\"customer_id\": \"" + YOUR_CUSTOMER_ID + "\"}"
                ))
  .build();

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

📘

Note

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.

bondCards
  .show({
    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
  bondCards
    .showMultiple(configuration)
    .then((data) => {
      // Handle hide loading
    })
    .catch((error) => {
      // Handle hide loading
    });

👍

Check out the demo app

To see more examples of using the BondCards SDK, you can check out the Bond SDK demo on GitHub.