如何将 Chrome 开发人员工具的响应打印到我的 UI 上？答案

【问题标题】：How do I print the response from Chrome Developer Tools onto my UI?如何将 Chrome 开发人员工具的响应打印到我的 UI 上？
【发布时间】：2020-10-21 21:04:58
【问题描述】：

我有以下标记化信用卡应用程序，我希望将谷歌开发者工具的输出打印到 UI 上。

以下是我的 index.html 的副本您在 UI 上输入信用卡详细信息、到期日期和 cvv 号码。然后你点击提交。卡片被标记化并生成令牌的 json 消息。

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

提交我的标记卡后，Google 开发者工具中会呈现以下输出。

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

如何将此输出打印到我的 UI（请参阅我的附件 output.png）

【问题讨论】：

标签： javascript tokenize credit-card developer-tools

【解决方案1】：

您需要在一些 HTML 元素 innerHTML 属性中设置您的 tokenisedCard 变量值，并且由于您想要打印 JSON，您可能会选择 pre 标记。

在卡片表单下方，添加以下基本 HTML：

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

然后在您的 onTokeniseSuccess 方法中，将console.log(tokenisedCard) 替换为（或随时保持）：

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

stringify JSON method 采用第三个参数插入空格以提高可读性。

【讨论】：