Version: current

UX Recommendations for Colombia

About this guide

This page will present some resources to help you to provide a better user experience for your customers in Colombia. The content is divided into three main sections, covering mandatory fields translations, field validation and checkout live suggestions.

If you are looking for an integration guide with mandatory parameters and examples, you can find it here:

Mandatory fields

Below you will find all the mandatory fields, as well the translations for both Field and Placeholder texts.

Personal information

Field Name and ParameterField and placeholder translationNote
Full Name
payment.name
Nombre y Apellido
Email
payment.email
Correo Electrónico
Phone number
payment.phone_number
Teléfono
Fijo o Celular
Document
payment.document
N√ļmero del Documento

Credit and Debit Information

Field Name and ParameterField and placeholder translationNote
Cardholder Name
payment.creditcard.card_name
Nombre del titular
Como en la tarjeta
Card Number
payment.creditcard.card_number
N√ļmero de la tarjeta
Expiration Date
payment.creditcard.card_due_date
Fecha de expiración
MM/AAAA
CVV
payment.creditcard.card_cvv
Código de seguridad (CVV)
Installments
payment.instalments
CuotasInstallments are only available for credit card payments. Know More

Billing Address Information

These fields are needed for credit and debit card transactions only.

Field Name and ParameterField and placeholder translationNote
Zipcode
payment.zipcode
Código postal
Country
payment.country
País
Seleccione tu País
State
payment.state
Departamento
City
payment.city
Ciudad
Address
payment.address
Dirección
Street Number
payment.street_number
N√ļmero

Validation

Below you will find how to validate each mandatory field, preventing user errors and guaranteeing a correct payment processing in Colombia.

Personal information

Field Name and ParameterValidation Method and MaskError messages
Email
payment.email
REGEX: ^[a-zA-Z0-9.!#$%&'*+/=?^_{\|}~-]+@[a-zA-Z0-9]\(?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9]\(?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$Empty field:
Este campo es requerido

Invalid format:
Este correo electrónico parece estar incorrecto
Phone Number
payment.phone_number
10 digits, numeric onlyEmpty field:
Este campo es requerido

Invalid format:
Este teléfono parece estar incorrecto
Document
payment.document
NIT (N√ļmero de Identificaci√≥n Tributaria): Length of 9 to 10 digits.
Regex: !/^\d{9,15}$/

CC (Cédula de Ciudadanía): Length of 5 to 15 digits.

CE (Cédula de Extranjería):Length of 1 to 6 digits.
Empty field:
Este campo es requerido

Invalid format:
Este documento parece estar incorrecto

Credit card information

Field Name and ParameterValidation Method and MaskError Messages
Credit card number
payment.creditcard.card_number
Masks:
  - AMEX: 9999 9999 9999 99999
  - Other Brands: 9999 9999 9999 9999

Regular Expression:
Click here
Empty field:
Este campo es requerido

Invalid format:
Esta tarjeta parece estar incorrecta
Expiration Date
payment.creditcard.card_due_date
Mask: 99/9999
REGEX: ^(0[1-9]|1[0-2])\/([0-9]{4})$
Empty field:
Este campo es requerido

Invalid format:
Esta fecha parece estar incorrecta
CVV
payment.creditcard.card_cvv
AMEX: 4 digits, numeric only
Other Brands: 3 digits, numeric only
Empty field:
Este campo es requerido

Invalid format:
El código parece estar incompleto

Billing address information

Field Name and ParameterValidation Method and MaskError messages
Zip Code
payment.zipcode
6 digits, numeric only
REGEX:[0-9]{6}
Empty field:
Este campo es requerido

Invalid format:
Este código postal parece estar incorrecto
State
payment.state
Amazonas
Antioquia
Arauca
Atl√°ntico
Bolívar
Boyac√°
Caldas
Caquet√°
Casanare
Cauca
Cesar
Chocó
Cundinamarca
Córdoba
Distrito Capital de Bogot√°
Guainía
Guaviare
Huila
La Guajira
Magdalena
Meta
Nari√Īo
Norte de Santander
Putumayo
Quindío
Risaralda
San Andrés, Providencia y Santa Catalina
Santander
Sucre
Tolima
Valle del Cauca
Vaupés
Vichada
Empty field:
Este campo es requerido

Invalid format:
Este estado parece estar incorrecto

Validation snippets

You can use the following Javascript funcions to validate some of the mandatory fields requested in your checkout.

phone_number_validation.js
function validatePhoneNumber(phoneNumber){
const re = /^[0-9]{5}[0-9]{5}$/;
return re.test(String(phoneNumber));
}
zipcode_validation.js
function validateZipcode(zipcode){
const re = /[0-9]{6}/;
return re.test(String(zipcode));
}

Checkout recommendations

Below you will find live code examples, where you can view and test the checkout experience in this country. Also, you will find recommendations to offer a better experience for your customers.

Personal information

Preview
Informaciones personales
Todas las informaciones abajo son requeridas.

Live code editor
Instructions
  • These fields are required for any payment method in Colombia;
  • If the customer provided this information in previous steps, you can reuse it to reduce friction.

Card information

Preview
Datos de la tarjeta
Todas las informaciones abajo son requeridas.

¬ŅEn cu√°ntas cuotas deseas pagar?


Información de Cobro
Todas las informaciones abajo son requeridas, excepto "Informaciones Adicionales"

Opcional

Live code editor
Instructions
  • Be careful to show installment (Cuotas) options only for Credit Card payments, since they are not available for Debit Card payments
  • Offer a tooltip explaining CVV: "C√≥digo de 3 n√ļmeros situado en el reverso de la tarjeta. En las tarjetas AMEX, el c√≥digo es de 4 n√ļmeros se sit√ļa en la frente de la tarjeta"

Payment method selection

Payment method selection

Instructions
  • Present all payment methods clearly
  • Load the list of payment methods with the first option already selected by default
  • Make the selector, being it a card or a radio list, to look clickable
  • You can use icons to make each payment method more recognizable

Credit card selection

Credit card

Instructions
  • Use terminologies that are familiar to the user (check Mandatory Fields above)
  • You can use a clear call to action to reinforce the method selection
  • If using Installments (Cuotas), it can be interesting to show it together with the total amount (Check Total Order Amount)

Baloto selection

Baloto

Instructions
  • You can offer a short explanation when the payment method is selected.
  • You can use a clear call to action to reinforce the method selection.

PSE - Pagos Seguros en Línea selection

PSE

Instructions
  • You can offer a short explanation when the payment method is selected.
  • You can use a clear call to action to reinforce the method selection.

Efecty selection

Efecty

Instructions
  • You can offer a short explanation when the payment method is selected.
  • You can use a clear call to action to reinforce the method selection.

NEQUI selection

NEQUI

Instructions
  • Ask the customer to provide the cell phone as her/his NEQUI account. This way, the experience will be smoother for the customer.
  • You can offer a short explanation when the payment method is selected.
  • You can use a clear call to action to reinforce the method selection.

Total order amount

RegularFree shipping
Total amount description - RegularTotal amount description - Free shipping
Instructions
  • Always show values clearly, such as shipping taxes and installment number, preventing surprises
  • When dealing with different currencies, pay attention to how you present the difference between then. Also, if possible present exchange rate ("Tipo de Cambio") to the customer.
Last updated on by Leo Goulart