Guides

Instructions: Retrieving & displaying card details

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

Suggest Edits

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>
<div class="field">
  Expiration Date
  <div id="exp" class="card-field"></div>
</div>
<div class="field">
  CVV2
  <div id="cvv" class="card-field"></div>
</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 'cdn.bond.tech/sdk/web/v1/bond-sdk-web.js';

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 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 = {
    '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

// NODE
const fetch = require('node-fetch');

let url = 'https://sandbox.bond.tech/api/v0/auth/key/temporary';
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 = "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)

print(response.text)

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()
  .url("https://sandbox.bond.tech/api/v0/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`.

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 bondCards.show() 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

bondCards
  .showPIN({
    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:
4111111111111111
4111-1111-1111-1111		'(\d{4})(\d{4})(\d{4})(\d{4})','$1-$2-$3-$4'
To separate card number using spaces:
4111111111111111
4111 1111 1111 1111		'(\d{4})(\d{4})(\d{4})(\d{4})','$1 $2 $3 $4'
To remove spaces:
4111 1111 1111 1111
4111111111111111		' '''
To remove the first two dashes:
4111-1111-1111-1111
411111111111-1111		'-'"", count: 2
To separate card expiry month and year using a slash:
122021
12/2021		'(\d{2})(\d{4})''$1/$2'

Updated over 2 years ago

Next Steps