How do I print the response from Chrome Developer Tools onto my UI?

Question

I have the following tokenisation credit card application, and I wish to print the output from google developer tools onto the UI.

Below is a copy of of my index.html You enter the credit card details, exp date and cvv numbers onto the UI. You then hit submit. The card is tokenised and produces a json message of the token.

<html>
  <body>
    <form onsubmit="return false;">
      <div id="securepay-ui-container"></div>
      <button onclick="mySecurePayUI.tokenise();">Submit</button>
      <button onclick="mySecurePayUI.reset();">Reset</button>
    </form>
    <script id="securepay-ui-js" src="https://payments-stest.npe.auspost.zone/v3/ui/client/securepay-ui.min.js"></script>
    <script type="text/javascript">
    
    
    
      var mySecurePayUI = new securePayUI.init({
        containerId: 'securepay-ui-container',
        scriptId: 'securepay-ui-js',
        clientId: 'xxx',
        merchantCode: '5AR0055',
        card: {
            allowedCardTypes: ['visa', 'mastercard'],
            showCardIcons: false,
            onCardTypeChange: function(cardType) {
              // card type has changed
            },
            onBINChange: function(cardBIN) {
              // card BIN has changed
            },
            onFormValidityChange: function(valid) {
              // form validity has changed
            },
            onTokeniseSuccess: function(tokenisedCard) {
                console.log(tokenisedCard)          

              // card was successfully tokenised or saved card was successfully retrieved 
            },
            onTokeniseError: function(errors) {
              // tokenization failed
            }
        },
        style: {
          backgroundColor: 'rgba(135, 206, 250, 0.1)',
          label: {
            font: {
                family: 'Arial, Helvetica, sans-serif',
                size: '1.1rem',
                color: 'darkblue'
            }
          },
          input: {
           font: {
               family: 'Arial, Helvetica, sans-serif',
               size: '1.1rem',
               color: 'darkblue'
           }
         }  
        },
        onLoadComplete: function () {
          // the UI Component has successfully loaded and is ready to be interacted with
        },
        onTokeniseSuccess: function(tokenisedCard) 
                {
        }
      });
      
    </script>        
  </body>
</html>

Upon submitting my tokenised card, the following output is rendered in Google Developer Tools.

{"merchantCode":"5AR0055",
"token":"1421556973257552",
"scheme":"visa",
"bin":"444433",
"last4":"111",
"expiryMonth":"12",
"expiryYear":"24",
"createdAt":"2020-07-01T21:49:36.895+10:00"}

How do I print this output onto my UI (refer to my attachment, output.png)

score 0 · Answer 1 · answered Jul 01 '20 at 12:28

You need to set your tokenisedCard variable value within some HTML element innerHTML property, and since you want to print JSON you would probably go for a pre tag.

Below the card form, add this elementary HTML:

<pre id="tokenInfoPlaceholder"></pre>

Then in your onTokeniseSuccess method, replace (or feel free to keep it up) console.log(tokenisedCard) with:

document.querySelector('#tokenInfoPlaceholder').innerHTML = JSON.stringify(tokenisedCard, null, 2);

The stringify JSON method takes a third parameter to insert white spaces to improve readability.

How do I print the response from Chrome Developer Tools onto my UI?

1 Answers1