Paso 4 (recomendado) - Configuración del nombre de la aplicación

Con esta configuración podras realizar cambiar el nombre que aparece al finalizar la compra, por defecto nuestra aplicacion aparece con el nombre Deuna Now. Pero por conversion de pagos recomendamos utilizar Tarjeta de credito o debito. Para realizar esta configuracion necesitas seguir los siguientes pasos.

Comercios que utilizan estilos nativos de VTEX





Paso a paso


  1. En el Admin VTEX, accede a Configuración de la tienda > Storefront > Checkout

  2. Selecciona tu tienda y haz click en el botón de color azul

  3. Selecciona la pestaña Codigo y selecciona el archivo checkout6-custom.css

  4. Copia y pega el siguiente código

    1. Cambiar el texto principal

      .deunaNow-payment-wrapper .deunaNow-point-card p.deunaNow-title {
        color: transparent;
        font-size: 0;
      }
      
      .deunaNow-payment-wrapper .deunaNow-point-card p.deunaNow-title::after {
        content: 'Nuevo texto......';
        color: #102C60;
        font-size: 16px;
      }
    2. Cambiar nombre de procesador (Tarjeta de Crédito)

      .form-step .payment-group a#payment-group-creditCardPaymentGroup span.payment-group-item-text {
      	color: transparent;
      }
      
      .form-step .payment-group a#payment-group-creditCardPaymentGroup span.payment-group-item-text::after {
        color: #141454;
        content: "Tarjeta Crédito (2 o más cuotas)";
        margin-left: -100px;
      }
    3. Cambiar nombre de procesador (DEUNA Now)

      .form-step .payment-group a#payment-group-DeunaNowPaymentGroup span.payment-group-item-text {
      	color: transparent;
      }
      
      .form-step .payment-group a#payment-group-DeunaNowPaymentGroup span.payment-group-item-text::after {
        color: #141454; /*Inspeccionar elemento en checkout de comercio y sacar color correspondiente */
        content: "Tarjeta Débito / Tarjeta Crédito (1 Cuota)";
        margin-left: -100px; /*Si está descuadrado, inspeccionar elemento y ajustar el margin-left hasta que coincida. Poner ese valor aquí*/ 
      }
    4. Agregar iconos de tarjetas

    .deunaNow-payment-wrapper .deunaNow-payments .deunaNow-payments-diners {
        width: 48px;
        height: 24px;
        background: url("https://images.getduna.com/diners-icon.svg") no-repeat;
        background-size: contain;
    }
  5. Presionar el botón guardar

Comercios que utilizan la app Checkout UI Custom





Pasos a paso

  1. En el admin VTEX, accede a Store Settings > Storefront → Checkout UI Custom

  2. Copia y pega el siguiente código

    1. Cambiar el texto principal

      .deunaNow-payment-wrapper .deunaNow-point-card p.deunaNow-title {
        color: transparent;
        font-size: 0;
      }
      
      .deunaNow-payment-wrapper .deunaNow-point-card p.deunaNow-title::after {
        content: 'Nuevo texto......';
        color: #102C60;
        font-size: 16px;
      }
    2. Cambiar nombre de procesador (Tarjeta de Crédito)

      .form-step .payment-group a#payment-group-creditCardPaymentGroup span.payment-group-item-text {
      	color: transparent;
      }
      
      .form-step .payment-group a#payment-group-creditCardPaymentGroup span.payment-group-item-text::after {
        color: #141454;
        content: "Tarjeta Crédito (2 o más cuotas)";
        margin-left: -100px;
      }
    3. Cambiar nombre de procesador (DEUNA Now)

      .form-step .payment-group a#payment-group-DeunaNowPaymentGroup span.payment-group-item-text {
      	color: transparent;
      }
      
      .form-step .payment-group a#payment-group-DeunaNowPaymentGroup span.payment-group-item-text::after {
        color: #141454; /*Inspeccionar elemento en checkout de comercio y sacar color correspondiente */
        content: "Tarjeta Débito / Tarjeta Crédito (1 Cuota)";
        margin-left: -100px; /*Si está descuadrado, inspeccionar elemento y ajustar el margin-left hasta que coincida. Poner ese valor aquí*/ 
      }
    4. Agregar iconos de tarjetas

.deunaNow-payment-wrapper .deunaNow-payments .deunaNow-payments-diners {
    width: 48px;
    height: 24px;
    background: url("https://images.getduna.com/diners-icon.svg") no-repeat;
    background-size: contain;
}