Version: current

UX Recommendations for Mexico

About this guide

This page will present some resources to help you to provide a better user experience for your customers in Mexico. 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	Translation	Placeholder
E-mail	Correo electrónico
Full name	Nombre y Apellido
Phone number	Teléfono	Fijo o Celular

Billing address information

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

Field	Translation	Placeholder
Zip Code	Código postal
Country	País	Seleccione tu País
State	Estado (Selecciona tu Estado)
City	Ciudad (Escribe tu ciudad)
Address	Dirección (Escribe tu dirección)
Street Number	Número

Credit and debit card fields

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

Field	Translation	Placeholder
Cardholder name	Nombre del titular	Como en la tarjeta
Card number	Número de la tarjeta
Expiration date	Fecha de expiración	MM/AAAA
CVV	Código de seguridad (CVV)

Validation

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

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	10 digits Mask: XX XXX XXXXX REGEX: `^[0-9]{5}[0-9]{5}$`	Empty field: Este campo es requerido Invalid format: Este teléfono 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: `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 parameter	Validations	Error messages
Zip Code payment.zipcode	5 digits, numeric only REGEX:`[0-9]{5}`	Empty field: Este campo es requerido Invalid format: Este código postal parece estar incorrecto
State payment.state	Aguascalientes Baja California Baja California Sur Campeche Chiapas Chihuahua Coahuila Colima Ciudad de México Durango Guanajuato Guerrero Hidalgo Jalisco México Michoacán Morelos Nayarit Nuevo León Oaxaca Puebla Querétaro de Arteaga Quintana Roo San Luis Potosí Sinaloa Sonora Tabasco Tamaulipas Tlaxcala Veracruz Yucatán Zacatecas	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]{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

Informaciones personales

Todas las informaciones abajo son requeridas.

Nombre y Apellido

Correo Electrónico

Teléfono

Live code editor

function UXMX(props) {
  const [phoneError, setPhoneError] = React.useState(false);
  const [emailError, setEmailError] = React.useState(false);

  function validatePhoneNumber(e) {

    if (/^[0-9]{5}[0-9]{5}$/.test(String(e.target.value)) || !e.target.value){
      setPhoneError(false);
    }else{
      setPhoneError(true);
    }
  }

  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>Informaciones personales</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"
                placeholder="Teléfono Fijo o Celular"
                fullWidth
                onBlur={validatePhoneNumber}
                error={phoneError || false}
                autoComplete="shipping phone-number"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXMX(props) {
  const [phoneError, setPhoneError] = React.useState(false);
  const [emailError, setEmailError] = React.useState(false);
  function validatePhoneNumber(e) {
    if (/^[0-9]{5}[0-9]{5}$/.test(String(e.target.value)) || !e.target.value){
      setPhoneError(false);
    }else{
      setPhoneError(true);
    }
  }
  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>Informaciones personales</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"
                placeholder="Teléfono Fijo o Celular"
                fullWidth
                onBlur={validatePhoneNumber}
                error={phoneError || false}
                autoComplete="shipping phone-number"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

Instructions

These fields are required for any payment method in México;
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 la tarjeta

Fecha de Expiración (MM/AAAA)

Código de Seguridad (CVV)

Cuotas

¿En cuántas cuotas deseas pagar?

Información de Cobro

Todas las informaciones abajo son requeridas, excepto "Informaciones Adicionales"

Codigo Postal

Estado

Ciudad

Dirección

Número

Informaciones Adicionales

Opcional

Live code editor

function UXMX(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 9999"              
              disabled={false}
              maskChar=" "
              onBlur={validateCardNumber}
            >
              {() =>
                <TextField
                  required
                  variant="outlined"
                  id="cardNumber"
                  name="cardNumber"
                  type="text"
                  label="Número de la tarjeta"
                  fullWidth
                  placeholder="1111 1111 1111 1111"
                  // onBlur={validateCardNumber}
                  error={cardNumberError}
                  // InputProps={{
                  //   inputComponent: TextMaskCustom
                  // }}
                />

              }            
            </InputMask>              

            </Grid>
            <Grid item xs={12} sm={6}>

            <InputMask
              mask="99/9999"              
              disabled={false}
              maskChar=" "
              onBlur={validateCardNumber}
              placeholder="MM/AAAA"
            >
              {() =>
              <TextField
                required
                id="dueDate"
                name="dueDate"
                label="Fecha de Expiración (MM/AAAA)"
                placeholder="MM/AAAA"
                variant="outlined"
                fullWidth
              />              
              }            
            </InputMask>  
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="cvv"
                name="cvv"
                placeholder="123"
                label="Código de Seguridad (CVV)"
                variant="outlined"
                fullWidth
                inputProps={{maxLength: 4}}
              />
            </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 mes de MX$ 1000,00</option>
                <option key={1} value={1}>3 meses de MX$ 377,00 (Total: MX$ 1131,00)</option>
                <option key={1} value={1}>6 meses de MX$ 188,50 (Total: MX$ 1131,00)</option>
                <option key={1} value={1}>9 meses de MX$ 125,72 (Total: MX$ 1131,00)</option>
              </TextField>
            </Grid>  
          </Grid>
        </Grid>
        <div><br/></div>
        <Typography variant="h6" gutterBottom>Información de Cobro</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas, excepto "Informaciones Adicionales"</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
                required
                id="state"
                name="state"
                label="Estado"
                variant="outlined"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="city"
                name="city"
                label="Ciudad"
                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="Informaciones Adicionales"
                variant="outlined"
                fullWidth
                helperText="Opcional"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXMX(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 9999"              
              disabled={false}
              maskChar=" "
              onBlur={validateCardNumber}
            >
              {() =>
                <TextField
                  required
                  variant="outlined"
                  id="cardNumber"
                  name="cardNumber"
                  type="text"
                  label="Número de la tarjeta"
                  fullWidth
                  placeholder="1111 1111 1111 1111"
                  // onBlur={validateCardNumber}
                  error={cardNumberError}
                  // InputProps={{
                  //   inputComponent: TextMaskCustom
                  // }}
                />
              }            
            </InputMask>              
            </Grid>
            <Grid item xs={12} sm={6}>
            <InputMask
              mask="99/9999"              
              disabled={false}
              maskChar=" "
              onBlur={validateCardNumber}
              placeholder="MM/AAAA"
            >
              {() =>
              <TextField
                required
                id="dueDate"
                name="dueDate"
                label="Fecha de Expiración (MM/AAAA)"
                placeholder="MM/AAAA"
                variant="outlined"
                fullWidth
              />              
              }            
            </InputMask>  
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="cvv"
                name="cvv"
                placeholder="123"
                label="Código de Seguridad (CVV)"
                variant="outlined"
                fullWidth
                inputProps={{maxLength: 4}}
              />
            </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 mes de MX$ 1000,00</option>
                <option key={1} value={1}>3 meses de MX$ 377,00 (Total: MX$ 1131,00)</option>
                <option key={1} value={1}>6 meses de MX$ 188,50 (Total: MX$ 1131,00)</option>
                <option key={1} value={1}>9 meses de MX$ 125,72 (Total: MX$ 1131,00)</option>
              </TextField>
            </Grid>  
          </Grid>
        </Grid>
        <div><br/></div>
        <Typography variant="h6" gutterBottom>Información de Cobro</Typography>
        <Typography variant="h7" gutterBottom>Todas las informaciones abajo son requeridas, excepto "Informaciones Adicionales"</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
                required
                id="state"
                name="state"
                label="Estado"
                variant="outlined"
                fullWidth
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                required
                id="city"
                name="city"
                label="Ciudad"
                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="Informaciones Adicionales"
                variant="outlined"
                fullWidth
                helperText="Opcional"
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

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

Instructions

Present all payment methods clearly
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

Credt 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

Debit 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

Spei selection

SPEI

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.

OXXO selection

OXXO

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.

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#

Billing address information#

Credit and debit card fields#

Validation#

Personal information#

Credit card information#

Billing address information#

Validation snippets#

Checkout recommendations#

Personal information#

Informaciones personales

Instructions

Card information#

Datos de la tarjeta

Información de Cobro

Instructions

Payment method selection#

Instructions

Credit card selection#

Instructions

Debit card selection#

Instructions

Spei selection#

Instructions

OXXO selection#

Instructions

Total order amount#

Instructions

About this guide

Mandatory fields

Personal information

Billing address information

Credit and debit card fields

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

Spei selection

OXXO selection

Total order amount