# Full Example of usage
This section provides complete, production-ready examples for different implementation scenarios.
### Enhanced Security Implementation Example
Complete example using JWT authentication for high-security environments. (SDK versions 2.3)
{% tabs %}
{% tab title="HTML" %}
```html
Secure Payment Form - Firstoken SDK
Secure Payment
```
{% endtab %}
{% tab title="CSS" %}
```css
* {
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;
}
```
{% endtab %}
{% tab title="JS" %}
{% code lineNumbers="true" %}
```javascript
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);
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
### Standard Implementation Example
Complete example using standard authentication (compatible with SDK versions 2.2)
{% tabs %}
{% tab title="HTML" %}
```html
Secure Payment Form - Firstoken SDK
```
{% endtab %}
{% tab title="CSS" %}
```css
* {
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;
}
```
{% endtab %}
{% tab title="JS" %}
{% code lineNumbers="true" %}
```javascript
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);
}
});
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://firstoken.gitbook.io/api-docs/guides/implementing-captures-sdk-js/full-example-of-usage.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.