Tuna.js Reference

This is the reference for the Javascript tokenization library. You will find all details, objects and configurations needed to run the library from the browser using js. You can use our Plugin Javascript to to tokenize customer information, collect sensitive card data and accept payments on your website.

Get started: Add tuna.js

To start using tuna.js is easy as including tuna.js in your checkout page. To your own safety, do not store the js file at your server; you should always load it directly from https://js.tuna.uy

1<script src="https://js.tuna.uy/tuna.js"></script>

You can choose whether to use your own style components, or ours. To use our default style: you should include the .css classes to your checkout page. Add the file that is bellow

1<script src="https://js.tuna.uy/css/components.css"></script>

Accessing the Tuna tokenization service

Use the Tuna Tokenization Service throw the Tuna.js library to create PCI Compliant credit card tokens.

1const tuna = Tuna(sessionId);
2const tokenizator = tuna.tokenizator();

Using the default payment form

In Tuna we think that less is more, so if you are looking for a quick and easy way to integrate with Tuna using minimum configuration then the default payment form is the best option.

This method allows you to integrate with Tuna tokenization service using the default payment fields, and it also includes the input validations configured. Look below the entire configuration of this method.

Extending the BuyerDocumentFormatter class

In order to give flexibility to the creation of document fields, the BuyerDocumentFormatter class can be extended to suport any document format and validation rules. See bellow a example of extending this class tu support Brazilian CPF (Individual Registration)

1class BrazilianDocumentFormatter extends BuyerDocumentFormatter {
2    constructor() {
3        super("999.999.99999", cpfValidationFunction, "CPF");
4    }
5}
6pieceManager.forge("#DOCUMENT", "document", {
7    title: "Document", buyerDocumentFormatter: new BrazilianDocumentFormatter()
8});

Using the Piece Manager

The Piece Manager is the object responsible to create, treat and configure the UI elements at screen. You can use it to forge interface pieces as inputs, checkboxes and else elements that you need.

1let pieceManager = tuna.pieceManager();

Piece Types

There are 10 different types of UI elements that should be used to create the payment form. Each element accept a set of properties that can be used to configure aspects as: field label, validation message, css classes and so on. You can see all pieces that Tuna implemented and their configurations bellow:

Adding saved card selector

We strongly recomend the saveCard object to increase the conversion rate of your checkout page. By implementing it, you also need to include the Saved Card Selector, so your users can choose the card that have already been saved directly in your checkout page.

Managing checkout

Tuna has two ways to proceed the checkout.

1const response = await tuna.checkout();

1await tuna.checkoutAsync();