# 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>
  </form>
  <br>
  <div id="response"></div>
  <script>
    const poyntCollect = document.createElement("script");
    const options = {
      amount: 400, // just hardcode amount to 123 for now
      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"}, // un comment these
          "lastName": { "border": "0px"},
        },
      }
    };
    poyntCollect.src =
      "https://poynt.net/snippet/poynt-collect/bundle.js";
      // "https://ote.poynt.net/snippet/poynt-collect/bundle-ote.js";
    poyntCollect.async = true;
    console.log('1', window.location);
    console.log('asdf', window.location.hostname);
    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();
        console.log("merchant.html button clicked");
        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: 10/5/2022, 2:59:18 PM