# Code Samples

In this section we have compiled a series of code samples using HTML and React technologies. You can also refer to our Poynt Collect Demo (opens new window) to view a live example of a Poynt Collect integration.

# 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>
  </head>
  <body>
    <div id="card-element"></div>
    <button type="button" id="submit">Submit</button>
    <div id="response"></div>
    <script>
      const poyntCollect = document.createElement("script");
      poyntCollect.src = "https://cdn.poynt.net/collect.js";
      poyntCollect.async = true;

      const options = {
        displayComponents: {
          firstName: true,
          lastName: true,
          emailAddress: true,
          labels: true,
        },
        iFrame: {
          width: "500px",
          height: "400px",
          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: "default",
        },
        locale: "en-US",
        fields: {
          emailAddress: "test@test.test",
        },
        additionalFieldsToValidate: ["firstName", "lastName", "emailAddress"],
        customCss: {
          inputDefault: {
            "color": "#111",
            "font-family": "Roboto, sans-serif",
            "font-size": "15px",
            "line-height": "20px",
          },
          rowFirstName: {
            "width": "50%",
            "padding-left": "0px",
          },
          rowLastName: {
            "width": "50%",
            "padding-right": "0px",
          },
        },
      };

      poyntCollect.onload = () => {
        const collect = new TokenizeJs(
          'aab99d15-d2da-41f9-a2b3-19c8a8eb1463', // Business ID
          "urn:aid:aab99d15-d2da-41f9-a2b3-19c8a8eb1463", //Application ID
        );

        collect.mount("card-element", document, options);

        collect.on("ready", event => {
          console.log("collect ready");
        });

        const button = document.getElementById("submit");

        button.addEventListener("click", event => {
          collect.getNonce({});
        });

        collect.on("nonce", event => {
          console.log("collect nonce", event);
        });

        collect.on("error", event => {
          console.log("collect error", event);
        });
      };

      document.head?.appendChild(poyntCollect);
    </script>
  </body>
</html>

# React Sample

Below is a complete sample of a possible React component to integrate Poynt Collect into React app. Feel free to use this as an example to create your own integration block.

import { useLayoutEffect, useRef } from "react";

const PoyntCollect = () => {
  const collect = useRef();

  const onSubmit = () => {
    collect.current?.getNonce({});
  };

  useLayoutEffect(() => {
    const poyntCollect = document.createElement("script");
    poyntCollect.src = "https://cdn.poynt.net/collect.js";
    poyntCollect.async = true;

    const options = {
      displayComponents: {
        firstName: true,
        lastName: true,
        emailAddress: true,
        labels: true,
      },
      iFrame: {
        width: "500px",
        height: "400px",
        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: "default",
      },
      locale: "en-US",
      fields: {
        emailAddress: "test@test.test",
      },
      additionalFieldsToValidate: ["firstName", "lastName", "emailAddress"],
      customCss: {
        inputDefault: {
          "color": "#111",
          "font-family": "Roboto, sans-serif",
          "font-size": "15px",
          "line-height": "20px",
        },
        rowFirstName: {
          "width": "50%",
          "padding-left": "0px",
        },
        rowLastName: {
          "width": "50%",
          "padding-right": "0px",
        },
      },
    };

    poyntCollect.onload = () => {
      collect.current = new window.TokenizeJs(
        'aab99d15-d2da-41f9-a2b3-19c8a8eb1463', // Business ID
        "urn:aid:aab99d15-d2da-41f9-a2b3-19c8a8eb1463", //Application ID
      );

      collect.current.mount("card-element", document, options);

      collect.current.on("ready", event => {
        console.log("collect ready");
      });

      collect.current.on("nonce", event => {
        console.log("collect nonce", event);
      });

      collect.current.on("error", event => {
        console.log("collect error", event);
      });
    };

    document.head?.appendChild(poyntCollect);

    return () => {
      collect.current?.unmount("card-element", document);
      collect.current = null;
    }
  }, []);

  return (
    <>
      <div id="card-element"></div>
      <button id="submit" onClick={onSubmit}>Submit</button>
    </>
  )
};

export default PoyntCollect;

← Types Definition JavaScript Version History →