# HTML Sample

Below is a complete sample of a possible HTML block to integrate Poynt Collect on a webpage. Feel free to use this as an example to create your own integration block.

<html>
<head>
<body>
  <div id="card-element">
    <!-- IFrame should be inserted here! -->
  </div>
  <br>
  <button>get nonce</button>
  <br>
  <div id="response"></div>
  <script>
    const poyntCollect = document.createElement("script");
    const options = {
      amount: 400,
      iFrame: {
        width: "600px",
        height: "200px",
        border: "1px",
        borderRadius: "4px",
        boxShadow: "0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"
      },
      style: {
        theme: "example1"
      },
      displayComponents: {
        // firstName: true,
        // lastName: true,
        // labels: false,
        // submitButton: true,
        zipCode: true,
        showEndingPage: false,
        submitTokenButton: false
      },
      customCss: {
        input: {
          base: "color: black;", // font color
          errored: "color: maroon;",
          cardNumber: "width: 30rem; border-bottom: 1px;",
          expiryDate: "text-transform: uppercase; width: 5rem; color: green",
          cvc: "width: 3rem; color: purple;",
          firstName: {
            border : "0px"
          },
          lastName: {
            border: "0px"
          },
        },
      }
    };
    poyntCollect.src =
      "https://cdn.poynt.net/ote/collect-ote.js";
      // "https://cdn.poynt.net/collect.js";
    poyntCollect.async = true;
    poyntCollect.parentUrl = window.location.hostname;
    poyntCollect.onload = () => {
      const collect = new TokenizeJs(
        'aab99d15-d2da-41f9-a2b3-19c8a8eb1463', // BUSINESSID
        "urn:aid:poynt.net",
      );
      collect.mount("card-element", document, options);
      collect.on("ready", event => {
        var form = document.getElementById("payment-form");
      });
      var button = document.querySelector("button");
      button.addEventListener("click", event => {
        event.preventDefault();
        collect.getNonce({});
      });
      collect.on("transaction_created", event => {
        console.log("collect on transaction_created", event);
        // var div = document.getElementById("response");
        // div.innerHTML += JSON.stringify(event, null, 2);
      });
      collect.on("token", event => {
        // let div = document.getElementByClassName('poynt-collect-payment-container');
        // collect.postToken(event);
        let div = document.getElementById('response');
        div.innerHTML += JSON.stringify(event);
        console.log('collect on token_created', event);
      });
      collect.on("nonce", event => {
        // let div = document.getElementByClassName('poynt-collect-payment-container');
        // collect.postToken(event);
        let div = document.getElementById('response');
        div.innerHTML += JSON.stringify(event);
        console.log('collect on get nonce', event);
      })
      collect.on("error", event => {
        console.log("collect on error", event);
      });
    };
    document.body && document.body.appendChild(poyntCollect);
  </script>
</body>
</head>
</html>
Last Updated: 12/19/2022, 4:56:11 PM