Version: current

UX Recommendations for Chile

About this guide

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

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	Seleccione tu País
State	Província
City	Ciudad
Address	Dirección	Calle, Avenida o Otro
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 Chile.

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	Length of 9 digits, numeric only. Mask: XXXXX-XXX	Empty field: Este campo es requerido Invalid format: Este teléfono parece estar incorrecto
Document payment.document	RUT: Length of 8 or 8 digits, numeric only. Mask: 9.999.999-y or 99.999.999-y (the last digit, can be a number or a "k")	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	7 digits, numeric only You can provide this link to help customer to find their zip codes: https://www.correos.cl/web/guest/codigo-postal	Empty field: Este campo es requerido Invalid format: Este código postal parece estar incorrecto
State payment.state	Aisén del General Carlos Ibáñez del Campo Antofagasta Araucanía Arica and Parinacota Atacama Bío-Bío Coquimbo Libertador General Bernardo O'Higgins Los Lagos Los Ríos Magallanes y Antártica Chilena Maule Ñuble Región Metropolitana de Santiago Tarapacá Valparaíso Know more about Chilean subdivisions: https://en.wikipedia.org/wiki/Administrative_divisions_of_Chile	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]{7}/;
  return re.test(String(zipcode));
}

document_validation.js

function validateRUT(document) {
  const re = /^(\d{1,3}(\.?\d{3}){2})\-?([\dkK])$/;
  return re.test(String(document));
}

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

RUT

Live code editor

function UXCL(props) {
  const [emailError, setEmailError] = React.useState(false);
  const [rutError, setRUTError] = 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);
    }
  }
  function validateRUT(e) {
    if (/^(\d{1,3}(\.?\d{3}){2})\-?([\dkK])$/.test(String(e.target.value)) || !e.target.value){
      setRUTError(false);
    }else{
      setRUTError(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"
                fullWidth
                autoComplete="shipping phone-number"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="document"
                name="document"
                label="RUT"
                fullWidth
                onBlur={validateRUT}
                error={rutError || false}
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXCL(props) {
  const [emailError, setEmailError] = React.useState(false);
  const [rutError, setRUTError] = 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);
    }
  }
  function validateRUT(e) {
    if (/^(\d{1,3}(\.?\d{3}){2})\-?([\dkK])$/.test(String(e.target.value)) || !e.target.value){
      setRUTError(false);
    }else{
      setRUTError(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"
                fullWidth
                autoComplete="shipping phone-number"
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                required
                variant="outlined"
                id="document"
                name="document"
                label="RUT"
                fullWidth
                onBlur={validateRUT}
                error={rutError || false}
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

Instructions

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

Información de Cobro

Todas las informaciones abajo son requeridas, excepto "Complemento"

Codigo Postal

Estado

Ciudad

Dirección

Número

Complemento

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 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 mes de CL$ 1000,00</option>
                <option key={1} value={1}>3 meses de CL$ 377,00 (Total: CL$ 1131,00)</option>
                <option key={1} value={1}>6 meses de CL$ 188,50 (Total: CL$ 1131,00)</option>
                <option key={1} value={1}>9 meses de CL$ 125,72 (Total: CL$ 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 "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="Estado"
                fullWidth
                SelectProps={{
                  native: true,
                }}
                variant="outlined">
                  <option>Aisén del General Carlos Ibáñez del Campo </option>
                  <option>Antofagasta </option>
                  <option>Araucanía </option>
                  <option>Arica and Parinacota </option>
                  <option>Atacama </option>
                  <option>Bío-Bío </option>
                  <option>Coquimbo </option>
                  <option>Libertador General Bernardo O'Higgins </option>
                  <option>Los Lagos </option>
                  <option>Los Ríos </option>
                  <option>Magallanes y Antártica Chilena </option>
                  <option>Maule </option>
                  <option>Ñuble</option>
                  <option>Región Metropolitana de Santiago </option>
                  <option>Tarapacá </option>
                  <option>Valparaíso</option>
              </TextField>
            </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="Complemento" 
                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 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 mes de CL$ 1000,00</option>
                <option key={1} value={1}>3 meses de CL$ 377,00 (Total: CL$ 1131,00)</option>
                <option key={1} value={1}>6 meses de CL$ 188,50 (Total: CL$ 1131,00)</option>
                <option key={1} value={1}>9 meses de CL$ 125,72 (Total: CL$ 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 "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="Estado"
                fullWidth
                SelectProps={{
                  native: true,
                }}
                variant="outlined">
                  <option>Aisén del General Carlos Ibáñez del Campo </option>
                  <option>Antofagasta </option>
                  <option>Araucanía </option>
                  <option>Arica and Parinacota </option>
                  <option>Atacama </option>
                  <option>Bío-Bío </option>
                  <option>Coquimbo </option>
                  <option>Libertador General Bernardo O'Higgins </option>
                  <option>Los Lagos </option>
                  <option>Los Ríos </option>
                  <option>Magallanes y Antártica Chilena </option>
                  <option>Maule </option>
                  <option>Ñuble</option>
                  <option>Región Metropolitana de Santiago </option>
                  <option>Tarapacá </option>
                  <option>Valparaíso</option>
              </TextField>
            </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="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"

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)

Multicaja selection

Multicaja

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.

Webpay selection

Webpay

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.

Sencillito selection

Sencillito

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.

Servipag selection

Servipag

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#

Credit card fields#

Billing address information#

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

Multicaja selection#

Instructions

Webpay selection#

Instructions

Sencillito selection#

Instructions

Servipag 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

Multicaja selection

Webpay selection

Sencillito selection

Servipag selection

Total order amount