Sample pseudocode for setting a card's PIN

Setting up card PIN fields in HTML

You can use BondCards from the Bond Web SDK to insert <form> fields with IDs into an HTML page to capture PIN details using <div> elements. The sample pseudocode shown below captures PIN details.

<form id="cc-form">
  <div class="field">
    New PIN
    <div id="cc-new-pin" class="card-field"></div>
  </div>
</form>

Using the BondCards SDK in your script file

Before you can use the BondCards SDK in you scripts, you need to:

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"}'

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)

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));

// 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",
  },
});

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();

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);

3. Initializing the BondCards class

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

4. Calling `bondCards.field()`

On an event such as a page load, you can call bondCards.field() for each <div> where you want a user to enter PIN data.
You need to send the following:

HTML/CSS selector of the <div> where you want the form field to be inserted
Field type:
- new_pin

Calling bondCards.field() example

bondCards
  .field({
    selector: "#cc-new-pin",
    type: "new_pin",
  })
  .catch((error) => {
    console.error("error", error);
  });

5. Adding an event listener

Add an event listener to call BondCards when the form is submitted.
You need to send the following:

card_id
Temporary Identity and Authorization tokens.
Form field values (new_pin is a required field).
A callback function you want executed when the HTTP request has completed successfully.
A callback function you want triggered when a field is invalid or upon an error.

Adding an event listener example

document.querySelector("#cc-form").addEventListener("submit", (e) => {
  e.preventDefault();
  bondCards.submit({
    cardId: 'YOUR_CARD_ID',
    identity: 'YOUR_IDENTITY',
    authorization: 'YOUR_AUTHORIZATION',
    newPin: document.getElementById("cc-new-pin").value,
    successCallback: function (status, data) {
      console.log('Successfully set new pin as: ', data.new_pin);
    },
    errorCallback: function (errors) {
      console.log(errors);
    },
  });
});