• dlocal.fields()
• dlocal.create()
• dlocal.createToken()
• dlocal.createInstallmentsPlan()

dlocal.fields([options])

Create pre-built UI components to collect payment information with Smart Fields (simply referred to as fields in the API).

var fields = dlocal.fields({ 
    locale: 'en',
    country: 'BR'
});

This method creates an instance of fields, which manages a group of Smart Fields. It receives an options object. Available options are documented below:

cssSrc attribute

The Font object

dlocal.createToken(field, tokenData)

Use dlocal.createToken() to convert information collected by Smart Fields into a token that you can safely pass to your server for use in an API call. This token expires 10 minutes after it has been created, or after one operation with the token is made, such as a Payment or Card Save, so you need to make sure that the payment (or other operation) is made within that timeframe.

❗️

Using Smart Fields token for Save + Payment

If you use Smart Fields to first Save the Card, and then make a Payment, you'll need to tokenize the card using Smart Fields twice. The first time, you'll use the Smart Fields token to Create a Card, and then tokenize again and use the second token to make the Payment.

dlocal.createToken(card,tokenData)
.then(function(result) {
  // Handle result.token
}
.catch(function(result) {
  // Handle result.error
}););

This method takes two arguments.

• field, the Smart Field you wish to tokenize data from. If applicable, the Smart Field pulls data from other Smart Fields you’ve created on the same instance of fields to tokenize.
• tokenData, an object containing additional payment information you might have collected. In the case of cards, it can contain any of the following parameters:

dlocal.createToken returns a Promise which resolves with a result object. This object has either:

• result.token: a Token was created successfully.
• result.error: there was an error. This includes client-side validation errors.

dlocal.createInstallmentsPlan(field, amount, currency)

Use dlocal.createInstallmentsPlan(field, amount, currency) to specify an installment plan, to guarantee the surcharge per installment that will be charged.

dlocal.createInstallmentsPlan(card, amount, currency)
.then(function(result) {
  // Handle result.installments
}
.catch(function(result) {
  // Handle result.error
}););

❗️

Using Smart Fields token for Save + Payment

It is highly recommended that you include the createInstallmentsPlan on the brand event. This is because the installment plan only depends on the amount and card brand.

Installments Arguments

Installments Plan Object

Installments Object

Example Installments Plan Object

{
    "id" : "INS54434",
    "country" : "BR",
    "currency" : "BRL",
    "bin" : "435921",
    "amount": 1500,
    "installments" : [
        {
            "id" : "INS54434-3",
            "installment_amount" : 550,
            "installments" : 3,
            "total_amount" : 1650
        },
        {
            "id" : "INS54434-6",
            "installment_amount" : 350,
            "installments" : 6,
            "total_amount" : 2100
        },
        {
            "id" : "INS54434-8",
            "installment_amount" : 250,
            "installments" : 12,
            "total_amount" : 3000
        }
    ]
}

dlocal.getBinInformation(field)

Use dlocal.getBinInformation(field) to retrieve information from that card number.

Example Response

"bin": {
        "bin": "430307",
        "brand": "VI",
        "type": "DEBIT",
        "category": "CLASSIC",
        "issuer": "RIAS REDBANC, S.A.",
        "country": "UY"
}

dlocal.getLastFour(field)

Use dlocal.getLastFour(PanField) to retrieve last four digits of a card. You can call the getLastFour whenever you consider it necessary:

Option 1: Call to getLastFour when pan is complete

panField.on('complete', async function (event) {                
  if (event.complete) {                    
    try {                        
      const result = await dlocalInstance.getLastFour(panField);                        
      console.info(result);         
    } catch (error) {                        
      console.error(error);                 
    }                
  }            
})

Option 2: Call to getLastFour when click a button (i.e. Payment button)

<button onClick="getLastFour()">Get Last Four</button>

async function getLastFour() {            
  try {                
    const result = await dlocalInstance.getLastFour(panField)
    console.info(result);           
  } catch (error) {                
    console.error(error);           
  }        
}

Example response

{lastFour: '0337'}