> ## Documentation Index > Fetch the complete documentation index at: https://docs.y.uno/llms.txt > Use this file to discover all available pages before exploring further. # Secure Fields (Enrollment) Implement Yuno's secure-fields enrollment in your application by following these steps. Yuno provides a [TypeScript library](https://www.npmjs.com/package/@yuno-payments/sdk-web-types) for all available methods. ## Step 1: Include the library in your project Before proceeding with the secure-fields implementation, see the [SDK Integration overview](/docs/sdks/overview/quickstart) for detailed instructions on how to properly integrate the SDK into your project. The integration guide provides three flexible methods: 1. Direct HTML script inclusion 2. Dynamic JavaScript injection 3. NPM module installation After integrating the SDK, continue with the remaining steps on this page. ### Step 2: Initialize secure fields with the public key Get a `Yuno` instance class in your JavaScript application with a valid `PUBLIC_API_KEY`: ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}} const yuno = await Yuno.initialize(PUBLIC_API_KEY); ``` See the [credentials page](/reference/getting-started/authentication) for more information. ### Step 3: Create a customer session and an enrollment payment method object Create a [customer session](/reference/customer-sessions-enrollment/create-customer-session) and a [payment method object](/reference) to use in the setup of your secure fields integration for enrollment. While creating the payment method object, define which one will be available for your customer to enroll (in the case of secure fields, only CARD is available). To verify cards through a zero-value authorization before enrolling a customer, include the `verify` structure when defining the payment method object for the customer session. ### Step 4: Start the enrollment process Next, you have to create a configuration object. The essential parameters are the `countryCode`, which determines the country for which the enrollment process is configured, and `customerSession`, which refers to the current enrollment's customer session. ### Parameters Configure the secure fields with the following options: | Parameter | Description | | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `countryCode` | This parameter specifies the country for which the payment process is being set up. Use an `ENUM` value representing the desired country code. You can find the full list of supported countries and their corresponding codes on the [Country Coverage](/docs/sdks/resources/country-coverage) page. | | `customerSession` | Refers to the current enrollment's customer session. `Example: '438413b7-4921-41e4-b8f3-28a5a0141638'` | ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}} const secureFields = yuno.secureFields({ countryCode: "CO", customerSession: "eec6578e-ac2f-40a0-8065-25b5957f6dd3" }); ``` ### Step 5: Mount the secure-fields After defining the parameters, define, configure, and mount the secure-fields. For each field, set `name` and `options` in `secureFields.create`. Configurations: | Parameters | Description | | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | The available names for field names are **cvv**, **pan**, or **expiration**. | | `options.placeholder` | Default placeholder for the field. | | `options.styles` | Additional CSS styles for the current field. | | `options.label` | Field visible label. | | `options.showError` | Defines if errors will be shown. Available options are `true` and `false`. | | `options.onChange` | An auxiliary function that can be configured and will run when the field content changes. Indicates if the fields have errors. | | `options.onBlur` | An auxiliary function that can be configured and will run when blurring from the input. | | `options.validateOnBlur` | Change the validation behavior, improving the user experience by providing validation feedback after the field loses focus. It is an optional parameter that is `false` as default. | | `options.onFocus` | An auxiliary function that can be configured and will run when focusing on the input. | | `options.onRenderedSecureField` | An auxiliary function that can be configured and will run when the element finishes rendering | | `options.errorMessage` | This allows for the definition of the field's error message. | Once you have set the parameter, you will render the created Secure Field with the `render` function by selecting an HTML element using a valid CSS selector (`#`, `.`, `[data-*]`). Example (three secure-fields): ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}} const secureNumber = secureFields.create({ name: 'pan', options: { placeholder: '0000 0000 0000 0000', styles: ``, label: 'Card Number', showError: true, errorMessage: "Custom Error", validateOnBlur: false, onChange: ({ error, data }) => { if (error) { console.log('error_pan') } else { console.log('not_error_pan') } }, onBlur() { console.log('blur_pan') }, onFocus: () => { console.log('focus_pan') }, onRenderedSecureField: ()=> { console.log('render completed') } }, }) secureNumber.render('#pan') const secureExpiration = secureFields.create({ name: 'expiration', options: { placeholder: 'MM / YY', styles: ``, label: 'Card Expiration', showError: true, onChange: ({ error }) => { if (error) { console.log('error_expiration') } else { console.log('not_error_expiration') } }, onBlur() { console.log('blur_expiration') }, onFocus: () => { console.log('focus_expiration') }, onRenderedSecureField: ()=> { console.log('render completed') } }, }) secureExpiration.render('#expiration') const secureCvv = secureFields.create({ name: 'cvv', options: { placeholder: 'CVV', styles: ``, label: 'CVV', showError: true, onChange: ({ error }) => { if (error) { console.log('error_cvv') } else { console.log('not_error_cvv') } }, onBlur() { console.log('blur_cvv') }, onFocus: () => { console.log('focus_cvv') }, onRenderedSecureField: ()=> { console.log('render completed') } }, }) secureCvv.render('#cvv') ``` If you are enrolling a credit card for the payouts flow, only the credit/debit pan is required; use the `secureNumber` object before creating the vaulted\_token and ignore the `secureExpiration` and `secureCvv` objects. After they are mounted, the three secure fields will be shown: ### Step 6: Create Vaulted Token To enroll, create a Vaulted Token: ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}} const vaultedToken = await secureFields.generateVaultedToken({ cardHolderName: 'John Deer', customer: { document: { document_number: '1090209924', document_type: 'CC', }, }, }); ``` If you need the full response, you can use `secureFields.generateVaultedTokenWithInformation` to receive the full enrollment response. Generate a vaulted token with customer information: ```javascript theme={"theme":{"light":"github-dark","dark":"github-dark"}} const vaultedTokenWithInformation = await secureFields.generateVaultedTokenWithInformation({ cardHolderName: 'John Deer', customer: { document: { document_number: '1090209924', document_type: 'CC', }, }, }) ```