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>
<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. 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.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
// NODE
const fetch = require('node-fetch');
let url = 'https://sandbox.bond.tech/api/v0.1/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.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)
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`.
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 numberexpiry
for the expiry datecvv
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 required | Replace 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