Documentation # 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;