Version: current

UX Recommendations for Peru

About this guide

This page will present some resources to help you to provide a better user experience for your customers in Peru. 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	Número del Documento

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	Seleccione tu departamento
City	Ciudad
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 Peru.

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: `MM-XXXX-XXXX`	Empty field: Este campo es requerido Invalid format: Este teléfono parece estar incorrecto
Document payment.document	DNI: Length of 8, 9 or 11 digits. 10 digit inputs are not valid.	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	Amazonas Ancash Apurímac Arequipa Ayacucho Cajamarca Callao Cusco Huancavelica Huánuco Ica Junín La Libertad Lambayeque Lima (Provincia) Lima Loreto Madre de Dios Moquegua Pasco Piura Puno San Martín Tacna Tumbes Ucayali	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

DNI

Live code editor

function UXPE(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="DNI"
                fullWidth
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

function UXPE(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="DNI"
                fullWidth
              />
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
}

Instructions

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

Dirección

Número

Complemento

Opcional

Live code editor

function UXPE(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 S/. 1000,00</option>
                <option key={1} value={1}>3 meses de S/. 377,00 (Total: S/. 1131,00)</option>
                <option key={1} value={1}>6 meses de S/. 188,50 (Total: S/. 1131,00)</option>
                <option key={1} value={1}>9 meses de S/. 125,72 (Total: S/. 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>Amazonas </option>
                  <option>Ancash </option>
                  <option>Apurímac </option>
                  <option>Arequipa </option>
                  <option>Ayacucho</option> 
                  <option>Cajamarca </option>
                  <option>Callao </option>
                  <option>Cusco </option>
                  <option>Huancavelica </option>
                  <option>Huánuco </option>
                  <option>Ica </option>
                  <option>Junín </option>
                  <option>La Libertad </option>
                  <option>Lambayeque </option>
                  <option>Lima (Provincia) </option>
                  <option>Lima </option>
                  <option>Loreto </option>
                  <option>Madre de Dios </option>
                  <option>Moquegua </option>
                  <option>Pasco </option>
                  <option>Piura </option>
                  <option>Puno </option>
                  <option>San Martín </option>
                  <option>Tacna</option>
                  <option>Tumbes </option>
                  <option>Ucayali</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 UXPE(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 S/. 1000,00</option>
                <option key={1} value={1}>3 meses de S/. 377,00 (Total: S/. 1131,00)</option>
                <option key={1} value={1}>6 meses de S/. 188,50 (Total: S/. 1131,00)</option>
                <option key={1} value={1}>9 meses de S/. 125,72 (Total: S/. 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>Amazonas </option>
                  <option>Ancash </option>
                  <option>Apurímac </option>
                  <option>Arequipa </option>
                  <option>Ayacucho</option> 
                  <option>Cajamarca </option>
                  <option>Callao </option>
                  <option>Cusco </option>
                  <option>Huancavelica </option>
                  <option>Huánuco </option>
                  <option>Ica </option>
                  <option>Junín </option>
                  <option>La Libertad </option>
                  <option>Lambayeque </option>
                  <option>Lima (Provincia) </option>
                  <option>Lima </option>
                  <option>Loreto </option>
                  <option>Madre de Dios </option>
                  <option>Moquegua </option>
                  <option>Pasco </option>
                  <option>Piura </option>
                  <option>Puno </option>
                  <option>San Martín </option>
                  <option>Tacna</option>
                  <option>Tumbes </option>
                  <option>Ucayali</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"
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)

PagoEfectivo selection

PagoEfectivo

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 (SafetyPay)

Online	Cash

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#

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

PagoEfectivo selection#

Instructions

PSE - Pagos Seguros en Línea selection (SafetyPay)#

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

PagoEfectivo selection

PSE - Pagos Seguros en Línea selection (SafetyPay)

Total order amount