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>
<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>