Instructions: Copy data

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 JS

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!')
        }
      },
      text: 'Copy data',
      css: cssBtn,
    })
      .then((data) => {
            // Handle data
        })
      .catch((error) => {
            // Handle an error
        })
  })
  .catch((error) => {
    // Handle an error
  })

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

Did this page help you?