Complementary features

Yuno Secure Fields provides additional services and configurations you can use to improve customers' experience:

Configure and use Typescript

To use TypeScript with the Yuno Secure Fields SDK, start by installing the type definitions via npm:

npm install @yuno-payments/sdk-web-types

After finishing the installation, include the type definitions in your TypeScript configuration. Update the tsconfig.json file to include @yuno-payments/sdk-web-types in the types array, as in the following example:

{
  "compilerOptions": {
    // Other compiler options
    "types": ["@yuno-payments/sdk-web-types"]
  }
}

With the type definitions installed and configured, you can now use them in your code. The following code block presents an example of how to initialize Yuno and create an instance.

import { YunoInstance } from '@yuno-payments/sdk-web-types/dist/types';

const yunoInstance: YunoInstance = Yuno.initialize('yourPublicApiKey');

Remember to replace the yourPublicApiKey with your actual public API key.

Persist credit card information to retry payments

If a transaction is rejected, you can persist the credit card data to retry a payment after the customer has entered the credit card details. To do that, you need to follow the steps below:

Add the parameter presented in the following code block while creating the One Time Token (OTT) in Step 5. It will enable you to receive any additional information the customer gives during checkout, such as installments, document type, or document number.

const oneTimeTokenWithInformation = await secureFields.generateTokenWithInformation({ 
  checkoutSession: '{{the checkout session id}}',
})

In case the transaction is rejected, you will need to:
i. Create a new checkout session.
ii. Generate a new One Time Token (OTT). In the OTT generation, send the new checkout session in the checkoutSession parameter.
Continue with the new checkout and One Time Token with the regular payment flow.

Clear the values entered in the card fields

Related to the previous functionality, the merchant can configure to clear the information entered in any card field. To accomplish this, it is necessary to execute the method secureFieldInstance.clearValue(), for each field that you wish to clear or delete. Below is an example:

const secureFieldInstance = secureFields.create({...})
secureFieldInstance.clearValue()

Input focus

The merchant can set the focus on a particular input. To accomplish this, it is necessary to execute the method secureFieldInstance.focus(), for each field that you wish to focus on. The code block below presents an example:

const secureFieldInstance = secureFields.create({...})
secureFieldInstance.focus()

Force validation

The merchant can force the validation for a particular input. To accomplish this, it is necessary to execute the method secureFieldInstance.validate(), for each field that you wish to validate. The code block below presents an example:

const secureFieldInstance = secureFields.create({...})
secureFieldInstance.validate()

Set custom error message

The merchant can define a custom error message after an input validation. To accomplish this, it is necessary to execute the method secureFieldInstance.setError(), for each field you wish to set a custom error message for. The code block below presents an example:

const secureFieldInstance = secureFields.create({...})
secureFieldInstance.setError('Custom error')

Set card type

The merchant can define the card type the customer uses for the payment. To accomplish this, you need to execute the method secureFieldInstance.setCardType() and send either ´DEBIT´ or ´CREDIT´ for each scenario. This is useful for dual cards, where the same card can be used as credit or debit, such as in Brazil. The code block below presents an example:

const secureFieldInstance = secureFields.create({...})
secureFieldInstance.setCardType('CREDIT')