Sample pseudocode for copying and displaying card details

Displaying card details fields and copy button in HTML

You can use BondCards 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 id="num_copy_btn"></div>
</div>
<div class="field">
   Expiration Date
   <div id="exp" class="card-field"></div>
   <div id="exp_copy_btn"></div>
</div>
<div class="field">
   CVV2
   <div id="cvv" class="card-field"></div>
   <div id="cvv_copy_btn"></div>
</div>

Displaying card details fields and copy button in JavaSscript

Using bondCards.show

bondCards
  .show({
    cardId: 'YOUR_CARD_ID',
    identity: 'YOUR_IDENTITY',
    authorization: 'YOUR_AUTHORIZATION',
    field: "number",
    htmlSelector: "#num",
  })
  .then((data) => {
    // Handle data
  	bondCards.copy({
      iframe: data,
      htmlSelector: '#num-copy-btn',
      callback: (status) => {
        if (status === 'success') {
          console.log('copied!')
        } else {
          console.log('error!')
        }
      },
      format: {
        replaceThis: "\\W",
        withThis: "",
      },
      text: 'Copy data',
      css: cssBtn,
    })
      .then((data) => {
    		// Handle data
    	})
      .catch((error) => {
    		// Handle an error
    	})
  })
  .catch((error) => {
    // Handle an error
  })

Using bondCards.showMultiple

const hashMap = {
  number: 'num',
  expiry: 'exp',
  cvv: 'cvv',
}

bondCards
  .showMultiple({
    cardId: 'YOUR_CARD_ID',
    identity: 'YOUR_IDENTITY',
    authorization: 'YOUR_AUTHORIZATION',
    fields: {
      number: {
        htmlSelector: "#num",
        format: {
          replaceThis: "(\\d{4})(\\d{4})(\\d{4})(\\d{4})",
          withThis: "$1-$2-$3-$4",
        },
        css,
      },
      expiry: {
        htmlSelector: "#exp",
        format: {
          replaceThis: "(\\d{2})(\\d{4})",
          withThis: "$1/$2",
        },
        css,
      },
      cvv: {
        htmlSelector: "#cvv",
        css,
      }
    },
  })
  .then((data) => {
  	// Handle data
    return Promise.allSettled(data.map((iframe) => {
      return bondCards.copy({
        iframe,
        htmlSelector: `#${hashMap[iframe.params.name]}-copy-btn`,
        callback: (status) => {
          if (status === 'success') {
            console.log('copied!')
          } else {
            console.log('error!')
          }
        },
        text: 'Copy data',
        css: cssBtn,
      })
    }))
  })
  .catch((error) => {
    // Handle an error
  });