JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>input form</title>
    <meta charset="utf-8">
  </head>

  <body>
    <div id="automationcloud-input">
      <iframe id="iframe" width="400" height="280"></iframe>
    </div>
    <button type="button" id="validate">
      validate
    </button>
    <button type="button" id="submit">
      submit
    </button>
  </body>

</html>

JavaScript

const baseUrl = 'https://vault.automationcloud.net/forms/single-input.html';
// check instruction: https://docs.automationcloud.net/docs/store-card-information#section-request-one-time-password
const otp = '3a28408d-d90c-4896-857d-fc7da613b63a';
const validateOnInput = 'on';
const inputType = 'password';
const pattern = '[0-9]';
const minlength = 3;
const maxlength = 100;
const required = true;

initForm(); // add src to iframe

window.addEventListener("message", receiveMessage, false); // receive messages from iframe
document.getElementById('submit').addEventListener('click', submit, false); //tell the iframe to submit the form
document.getElementById('validate').addEventListener('click', validate, false); //tell the iframe to validate the form

function initForm() {
  const options = `otp=${otp}&validateOnInput=${validateOnInput}&inputType=${inputType}&pattern=${pattern}&minlength=${minlength}&maxlength=${maxlength}&required=true`;
  document.getElementById("iframe").setAttribute('src', `${baseUrl}?${options}`);
}

function receiveMessage(message) {
  // Consider security concerns: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Security_concerns
  console.log(message.data);
}

function submit() {
  document.getElementById("iframe").contentWindow.postMessage('vault.submit', '*');
}

function validate() {
  document.getElementById("iframe").contentWindow.postMessage('vault.validate', '*');
}