Full Example of usage
This section provides complete, production-ready examples for different implementation scenarios.
Standard Implementation Example
Complete example using standard authentication (compatible with SDK versions 2.2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Payment Form - Firstoken SDK</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js"></script>
</head>
<body>
<form id="collect-form" method="post">
<div class="form-field-group ">
<div id="cc-holder" class="form-field regular-field"></div>
<div id="cc-number" class="form-field regular-field"></div>
<div class="two-column">
<div id="cc-expiration-date" class="form-field min-field"></div>
<div id="cc-cvv" class="form-field min-field"></div>
</div>
</div>
<button type="submit" class="form-button"> Process Payment</button>
</form>
<script src="main.js"></script>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 13.3px;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #F5F5F5;
}
svg {
width: 175px;
height: 40px;
}
.banner {
min-width: 100%;
height: 60px;
padding: 15px 10% 20px 10%;
background-color: #fff;
}
button {
background: #0099df;
border-radius: 4px;
color: #fff;
border: none;
outline: 0;
width: 105px;
height: 44px;
line-height: normal;
text-align: center;
font-size: 16px;
display: table
}
form {
padding-top: 3%;
margin: 0 auto;
display: flex;
width: 500px;
flex-direction: column;
align-items: center;
}
form .input {
background-color: red;
}
.form-field {
width: 275px;
height: 35px;
position: relative;
background: white;
border-radius: 0px;
border: 0.5px solid #CCCCCC;
padding: 0 10px;
}
.regular-field {
width: 100%;
margin-right: 15px;
}
.form-field.regular-field:first-of-type {
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.two-column {
display: flex;
width: 100%;
}
.min-field {
width: 50%;
}
.two-column .min-field:last-of-type {
border-bottom-right-radius: 8px;
}
.two-column .min-field:first-of-type {
border-bottom-left-radius: 8px;
}
.form-field-group .min-field:last-of-type {
margin-right: 0;
margin-bottom: 20px;
}
.form-field:hover {
border-color: black;
}
iframe {
width: 100%;
height: 100%;
}
.form-field.error {
border-color: red;
}
.form-field-group {
display: flex;
flex-direction: column;
}const routeId = "your-route-id";
const FT = window.FTCaptures.init(routeId, "production", function (state) { });
const css = {
"color": "#1b1d1f",
"::placeholder": {
"color": "lightgray"
},
"font-family" : "Arial"
};
FT.field("#cc-holder", {
type: "card-holder",
name: "card_holder",
placeholder: "Name on card",
autocomplete: "cc-holder",
errorColor: "750000",
required: "true",
css: css
});
FT.field("#cc-number", {
type: "card-number",
name: "card_number",
placeholder: "Card Number",
autocomplete: "cc-number",
errorColor: "750000",
required: "true",
css: css,
});
FT.field("#cc-expiration-date", {
type: "card-expiration-date",
name: "card_expiration_date",
placeholder: "MM / YY",
autocomplete: "cc-expiration-date",
errorColor: "750000",
required: "true",
css: css,
});
FT.field("#cc-cvv", {
type:"card-security-code",
name: "card_security_code",
placeholder: "CVV",
autocomplete: "cc-csc",
errorColor: "750000",
required: "true",
css: css,
});
FTCaptures.on("cardHolderValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardNumberValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardExpirationDateValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardSecurityCodeValidationFailed", function (event) {
console.log(event.data.isValid)
});
document.addEventListener('DOMContentLoaded', function () {
const form = document.querySelector('#collect-form');
form.addEventListener('submit', async function (e) {
e.preventDefault();
try {
const validationResults = await FTCaptures.validate(routeId);
if (!validationResults.hasErrors) {
const tokenizationResult = await FTCaptures.tokenize(routeId);
console.log(tokenizationResult)
form.submit();
}
else {
console.log(validationResults)
alert("There are one or more fields with errors.")
}
} catch (error) {
console.error(error);
}
});
});
Enhanced Security Implementation Example
Complete example using JWT authentication for high-security environments. (SDK versions 2.3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Secure Payment Form - Firstoken SDK</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.firstoken.co/captures/js/2.3/sdk.js"></script>
</head>
<body>
<div class="secure-payment-form">
<h2>Secure Payment</h2>
<form id="collect-form" method="post">
<div class="form-field-group ">
<div id="cc-holder" class="form-field regular-field"></div>
<div id="cc-number" class="form-field regular-field"></div>
<div class="two-column">
<div id="cc-expiration-date" class="form-field min-field"></div>
<div id="cc-cvv" class="form-field min-field"></div>
</div>
</div>
<button type="submit" class="form-button">Process Secure Payment</button>
</form>
</div>
<script src="main.js"></script>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 13.3px;
font-family: 'Roboto', sans-serif;
}
body {
background-color: #F5F5F5;
}
svg {
width: 175px;
height: 40px;
}
.banner {
min-width: 100%;
height: 60px;
padding: 15px 10% 20px 10%;
background-color: #fff;
}
button {
background: #0099df;
border-radius: 4px;
color: #fff;
border: none;
outline: 0;
width: 105px;
height: 44px;
line-height: normal;
text-align: center;
font-size: 16px;
display: table
}
form {
padding-top: 3%;
margin: 0 auto;
display: flex;
width: 500px;
flex-direction: column;
align-items: center;
}
form .input {
background-color: red;
}
.form-field {
width: 275px;
height: 35px;
position: relative;
background: white;
border-radius: 0px;
border: 0.5px solid #CCCCCC;
padding: 0 10px;
}
.regular-field {
width: 100%;
margin-right: 15px;
}
.form-field.regular-field:first-of-type {
border-top-right-radius: 8px;
border-top-left-radius: 8px;
}
.two-column {
display: flex;
width: 100%;
}
.min-field {
width: 50%;
}
.two-column .min-field:last-of-type {
border-bottom-right-radius: 8px;
}
.two-column .min-field:first-of-type {
border-bottom-left-radius: 8px;
}
.form-field-group .min-field:last-of-type {
margin-right: 0;
margin-bottom: 20px;
}
.form-field:hover {
border-color: black;
}
iframe {
width: 100%;
height: 100%;
}
.form-field.error {
border-color: red;
}
.form-field-group {
display: flex;
flex-direction: column;
}const routeId = "your-route-id";
// This could be some examples for tags
const securityTags = [
"jwt-authenticated",
"encrypted-transaction-date",
"high-security",
"client-reference-code"
];
async function initializeSecurePayment(routeId) {
// This would be populated by your server-side template
const jwtToken = {{myJWTToken}}
const FT = window.FTCaptures.init(routeId, "production", function (state) {
console.log('SDK initialized successfully');
}, securityTags, jwtToken);
return FT;
}
document.addEventListener('DOMContentLoaded', async function () {
const FT = await initSDK();
const css = {
"color": "#1b1d1f",
"::placeholder": {
"color": "lightgray"
},
"font-family" : "Arial"
};
FT.field("#cc-holder", {
type: "card-holder",
name: "card_holder",
placeholder: "Name on card",
autocomplete: "cc-holder",
errorColor: "750000",
required: "true",
css: css
});
FT.field("#cc-number", {
type: "card-number",
name: "card_number",
placeholder: "Card Number",
autocomplete: "cc-number",
errorColor: "750000",
required: "true",
css: css,
});
FT.field("#cc-expiration-date", {
type: "card-expiration-date",
name: "card_expiration_date",
placeholder: "MM / YY",
autocomplete: "cc-expiration-date",
errorColor: "750000",
required: "true",
css: css,
});
FT.field("#cc-cvv", {
type:"card-security-code",
name: "card_security_code",
placeholder: "CVV",
autocomplete: "cc-csc",
errorColor: "750000",
required: "true",
css: css,
});
FTCaptures.on("cardHolderValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardNumberValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardExpirationDateValidationFailed", function (event) {
console.log(event.data.isValid)
});
FTCaptures.on("cardSecurityCodeValidationFailed", function (event) {
console.log(event.data.isValid)
});
const form = document.querySelector('#collect-form');
form.addEventListener('submit', async function (e) {
e.preventDefault();
try {
const validationResults = await FTCaptures.validate(routeId);
if (!validationResults.hasErrors) {
const tokenizationResult = await FTCaptures.tokenize(routeId);
console.log(tokenizationResult)
form.submit();
}
else {
console.log(validationResults)
alert("There are one or more fields with errors.")
}
} catch (error) {
console.error(error);
}
});
});
Last updated
Was this helpful?