Secure Payment Form - Firstoken SDK

> For the complete documentation index, see [llms.txt](https://firstoken.gitbook.io/api-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://firstoken.gitbook.io/api-docs/guides/implementing-captures-sdk-js/full-example-of-usage.md). # 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 %}