Secure Fields (Enrollment)

Implement Yuno's Secure Fields enrollment in your application by following these steps.

Yuno provides a TypeScript library for all available methods.

Step 1: Include the library in your project

Before proceeding with the Secure Fields implementation, see the SDK Integration Overview 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:

const yuno = await Yuno.initialize(PUBLIC_API_KEY);

See the credentials page for more information.

Step 3: Create a customer session and an enrollment payment method object

Create a customer session and a payment method object 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:

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:

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

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:

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:

const vaultedTokenWithInformation = await secureFields.generateVaultedTokenWithInformation({
  cardHolderName: 'John Deer',
  customer: {
    document: {
      document_number: '1090209924',
      document_type: 'CC',
    },
  },
})