Version: current

UX Recommendations for Uruguay

About this guide

This page will present some resources to help you to provide a better user experience for your customers in Uruguay. 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:

Credit card

Mandatory fields

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

Personal information

Field	Translation	Placeholder
E-mail	Correo electrónico
Full name	Nombre y Apellido
Phone number	Teléfono	Fijo o Celular
Document	Cédula de Identidad

Credit card fields

In the table below you can find the suggesed translations based in local e-commerce best practices.

Field	Translation
Cardholder name	Nombre del titular
Card number	Número de la tarjeta
Expiration date	Fecha de expiración
CVV	Código de seguridad (CVV)
Installments	Cuotas

Billing address information

These fields are needed for credit card transactions only.

Field	Translation	Placeholder
Zipcode	Código postal
Country	País	Selecciona tu País
State	Departamento	Selecciona tu Departamento
City	Ciudad/Barrio
Address	Dirección
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 Uruguay.

Personal information

Field name and parameter	Validations	Error 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	8 digits, numeric only. Mask: `9999-9999`	Empty field: Este campo es requerido Invalid format: Este teléfono parece estar incorrecto
Document payment.document	Length of 8 or 9, numeric only. Mask: `9.999.999-99` or `99.999.999-9` REGEX: `[0-9]{9}`	Empty field: Este campo es requerido Invalid format: Este documento parece estar incorrecto

Credit card information

Field name and parameter	Validations	Error messages
Credit card number payment.creditcard.card_number	Masks: - AMEX: `9999 9999 9999 99999` - Other Brands: `9999 9999 9999 9999` Regular Expression: https://developer.ebanx.com/docs/resources/validation-rules/	Empty field: Este campo es requerido Invalid format: Esta tarjeta parece estar incorrecta
Expiration Date payment.creditcard.card_due_date	Mask: `XX/XXXX` 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 parameter	Validations	Error messages
Zip Code payment.zipcode	5 digits, numeric only	Empty field: Este campo es requerido Invalid format: Este código postal parece estar incorrecto
State payment.state	Artigas Canelones Cerro Largo Colonia Durazno Flores Florida Lavalleja Maldonado Montevideo Paysandú Río Negro Rivera Rocha Salto San José Soriano Tacuarembó Treinta y Tres	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.

zipcode_validation.js

function validateZipcode(zipcode){
  const re = /[0-9]{5}/;
  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

Datos del comprador

Todas las informaciones abajo son requeridas.

Nombre y Apellido

Correo Electrónico

Teléfono

Cédula de Identidad

Live code editor

function UXUY(props) {
  const [emailError, setEmailError] = React.useState(false);
  
  function validateEmail(e){
    if (/^[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])?)*$/.test(String(e.target.value)) || !e.target.value){
      setEmailError(false);
    }else{
      setEmailError(true);
    }
  }
  
  return (
      <div>  
        <Typography variant="h6" gutterBottom>Datos del comprador</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas.</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="fullName"
                name="fullName"
                label="Nombre y Apellido"
                fullWidth
                autoComplete="given-name"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="email"
                name="email"
                label="Correo Electrónico"
                fullWidth
                autoComplete="shipping email"
                onBlur={validateEmail}
                error={emailError}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="phoneNumber"
                name="phoneNumber"
                label="Teléfono"
                fullWidth
                autoComplete="shipping phone-number"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="document"
                name="document"
                label="Cédula de Identidad"
                fullWidth
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXUY(props) {
  const [emailError, setEmailError] = React.useState(false);
  
  function validateEmail(e){
    if (/^[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])?)*$/.test(String(e.target.value)) || !e.target.value){
      setEmailError(false);
    }else{
      setEmailError(true);
    }
  }
  
  return (
      <div>  
        <Typography variant="h6" gutterBottom>Datos del comprador</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas.</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="fullName"
                name="fullName"
                label="Nombre y Apellido"
                fullWidth
                autoComplete="given-name"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="email"
                name="email"
                label="Correo Electrónico"
                fullWidth
                autoComplete="shipping email"
                onBlur={validateEmail}
                error={emailError}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="phoneNumber"
                name="phoneNumber"
                label="Teléfono"
                fullWidth
                autoComplete="shipping phone-number"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="document"
                name="document"
                label="Cédula de Identidad"
                fullWidth
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

Instructions

These fields are required for any payment method in Uruguay;
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.

Nombre del Titular

Número de tarjeta

Fecha de Expiración

Código de Seguridad (CVV)

Cuotas

¿En cuántas cuotas deseas pagar?

Datos del titular de la tarjeta

Todas las informaciones abajo son requeridas, excepto "Complemento"

Codigo Postal

Departamento

Ciudad/Barrio

Dirección

Número

Complemento

Opcional

Live code editor

function UXUY(props) {
  const [cardNumberError, setCardNumberError] = React.useState(false);

  function validateCardNumber(e){
    if (/^[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])?)*$/.test(String(e.target.value)) || !e.target.value){
      setCardNumberError(false);
    }else{
      setCardNumberError(true);
    }
  }
  
  return (
      <div>  
        <Typography variant="h6" gutterBottom>Datos de la tarjeta</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas.</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="cardHolder"
                name="cardHolder"
                label="Nombre del Titular"
                placeholder="Como en la tarjeta"
                fullWidth
              />
            </Grid>
            <Grid item xs={12}>
              <InputMask
                mask="9999 9999 9999 99999"              
                disabled={false}
                maskChar=" "
                onBlur={validateCardNumber}
              >
                {() =>
                  <TextField
                    required
                    variant="outlined"
                    id="cardNumber"
                    name="cardNumber"
                    type="text"
                    label="Número de tarjeta"
                    fullWidth
                    placeholder="1111 1111 1111 1111"
                    error={cardNumberError}
                  />
                }            
              </InputMask>   
            </Grid>
            <Grid item xs={12} sm={6}>
              <InputMask
                mask="99/9999"              
                disabled={false}
                maskChar=" "
              >
                {() =>
                  <TextField
                    required
                    variant="outlined"
                    id="dueDate"
                    name="dueDate"
                    label="Fecha de Expiración"
                    fullWidth
                    placeholder="MM/AAAA"
                  />
                }            
              </InputMask>   
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                required
                id="cvv" 
                name="cvv" 
                label="Código de Seguridad (CVV)" 
                variant="outlined"
                inputProps={{maxLength: 4}}
                fullWidth 
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
              id="installments"
              select
              label="Cuotas"
              fullWidth
              SelectProps={{
                native: true,
              }}
              helperText="¿En cuántas cuotas deseas pagar?"
              variant="outlined">
                <option key={1} value={1}>1 cuota de UY $ 1000,00</option>
                <option key={1} value={1}>3 cuotas de UY $ 377,00 (Total: UY $ 1131,00)</option>
                <option key={1} value={1}>6 cuotas de UY $ 188,50 (Total: UY $ 1131,00)</option>
                <option key={1} value={1}>9 cuotas de UY $ 125,72 (Total: UY $ 1131,00)</option>
              </TextField>
            </Grid>  
          </Grid>
        </Grid>
        <div><br/></div>
        <Typography variant="h6" gutterBottom>Datos del titular de la tarjeta</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas, excepto "Complemento"</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="postalCode"
                name="postalCode"
                label="Codigo Postal"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="state"
                select
                name="state"
                label="Departamento"
                fullWidth
                SelectProps={{
                  native: true,
                }}
                variant="outlined">
                  <option>Artigas </option>
                  <option>Canelones </option>
                  <option>Cerro Largo </option>
                  <option>Colonia </option>
                  <option>Durazno </option>
                  <option>Flores </option>
                  <option>Florida </option>
                  <option>Lavalleja </option>
                  <option>Maldonado </option>
                  <option>Montevideo </option>
                  <option>Paysandú </option>
                  <option>Río Negro </option>
                  <option>Rivera </option>
                  <option>Rocha </option>
                  <option>Salto </option>
                  <option>San José </option>
                  <option>Soriano </option>
                  <option>Tacuarembó </option>
                  <option>Treinta y Tres</option>
              </TextField>
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                required
                id="city" 
                name="city" 
                label="Ciudad/Barrio" 
                variant="outlined"
                fullWidth 
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="address"
                name="address"
                label="Dirección"
                placeholder="Calle, Avenida o Otro"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="streetNumber"
                name="streetNumber"
                label="Número"
                variant="outlined"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                id="additionalInfo" 
                name="additionalInfo" 
                label="Complemento" 
                variant="outlined"
                fullWidth 
                helperText="Opcional"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXUY(props) {
  const [cardNumberError, setCardNumberError] = React.useState(false);
  function validateCardNumber(e){
    if (/^[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])?)*$/.test(String(e.target.value)) || !e.target.value){
      setCardNumberError(false);
    }else{
      setCardNumberError(true);
    }
  }
  
  return (
      <div>  
        <Typography variant="h6" gutterBottom>Datos de la tarjeta</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas.</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="cardHolder"
                name="cardHolder"
                label="Nombre del Titular"
                placeholder="Como en la tarjeta"
                fullWidth
              />
            </Grid>
            <Grid item xs={12}>
              <InputMask
                mask="9999 9999 9999 99999"              
                disabled={false}
                maskChar=" "
                onBlur={validateCardNumber}
              >
                {() =>
                  <TextField
                    required
                    variant="outlined"
                    id="cardNumber"
                    name="cardNumber"
                    type="text"
                    label="Número de tarjeta"
                    fullWidth
                    placeholder="1111 1111 1111 1111"
                    error={cardNumberError}
                  />
                }            
              </InputMask>   
            </Grid>
            <Grid item xs={12} sm={6}>
              <InputMask
                mask="99/9999"              
                disabled={false}
                maskChar=" "
              >
                {() =>
                  <TextField
                    required
                    variant="outlined"
                    id="dueDate"
                    name="dueDate"
                    label="Fecha de Expiración"
                    fullWidth
                    placeholder="MM/AAAA"
                  />
                }            
              </InputMask>   
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                required
                id="cvv" 
                name="cvv" 
                label="Código de Seguridad (CVV)" 
                variant="outlined"
                inputProps={{maxLength: 4}}
                fullWidth 
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
              id="installments"
              select
              label="Cuotas"
              fullWidth
              SelectProps={{
                native: true,
              }}
              helperText="¿En cuántas cuotas deseas pagar?"
              variant="outlined">
                <option key={1} value={1}>1 cuota de UY $ 1000,00</option>
                <option key={1} value={1}>3 cuotas de UY $ 377,00 (Total: UY $ 1131,00)</option>
                <option key={1} value={1}>6 cuotas de UY $ 188,50 (Total: UY $ 1131,00)</option>
                <option key={1} value={1}>9 cuotas de UY $ 125,72 (Total: UY $ 1131,00)</option>
              </TextField>
            </Grid>  
          </Grid>
        </Grid>
        <div><br/></div>
        <Typography variant="h6" gutterBottom>Datos del titular de la tarjeta</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas, excepto "Complemento"</Typography>
        <div><br/></div>
        <Grid container xs={12} spacing={3} >
          <Grid item container spacing={3} >
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="postalCode"
                name="postalCode"
                label="Codigo Postal"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                id="state"
                select
                name="state"
                label="Departamento"
                fullWidth
                SelectProps={{
                  native: true,
                }}
                variant="outlined">
                  <option>Artigas </option>
                  <option>Canelones </option>
                  <option>Cerro Largo </option>
                  <option>Colonia </option>
                  <option>Durazno </option>
                  <option>Flores </option>
                  <option>Florida </option>
                  <option>Lavalleja </option>
                  <option>Maldonado </option>
                  <option>Montevideo </option>
                  <option>Paysandú </option>
                  <option>Río Negro </option>
                  <option>Rivera </option>
                  <option>Rocha </option>
                  <option>Salto </option>
                  <option>San José </option>
                  <option>Soriano </option>
                  <option>Tacuarembó </option>
                  <option>Treinta y Tres</option>
              </TextField>
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                required
                id="city" 
                name="city" 
                label="Ciudad/Barrio" 
                variant="outlined"
                fullWidth 
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="address"
                name="address"
                label="Dirección"
                placeholder="Calle, Avenida o Otro"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="streetNumber"
                name="streetNumber"
                label="Número"
                variant="outlined"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField 
                id="additionalInfo" 
                name="additionalInfo" 
                label="Complemento" 
                variant="outlined"
                fullWidth 
                helperText="Opcional"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

Instructions

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"
Installments are only available for Credit Card payments

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)

Debit 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
Be careful to not show installment (Cuotas) options here, since they are only available for credit card payments

Total order amount

Regular	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.

About this guide#

Mandatory fields#

Personal information#

Credit card fields#

Billing address information#

Validation#

Personal information#

Credit card information#

Billing address information#

Validation snippets#

Checkout recommendations#

Personal information#

Datos del comprador

Instructions

Card information#

Datos de la tarjeta

Datos del titular de la tarjeta

Instructions

Payment method selection#

Instructions

Credit card selection#

Instructions

Debit card selection#

Instructions

Total order amount#

Instructions

About this guide

Mandatory fields

Personal information

Credit card fields

Billing address information

Validation

Personal information

Credit card information

Billing address information

Validation snippets

Checkout recommendations

Personal information

Card information

Payment method selection

Credit card selection

Debit card selection

Total order amount