Personalizando la integración con PayU

Aprenda a personalizar la página de checkout y la página de éxito de su tienda Magento con PayU.

Diferentes campos para dninumber/taxvat y dnitype

De forma predeterminada, el módulo de pago de PayU para Magento obtiene la información número de identificación del comprador de los campos taxvat y vat_id. Para el campo dnitype, uno campo adicional con el mismo nombre.

Si su tienda Magento usa Adobe Commerce Cloud y necesita usar otros nombres para los campos mencionados anteriormente, debe instalar el módulo PayU Mapped Attributes en la carpeta [Magento Home]/app/code/Eloom/PayUMappedAttributes y copiar los archivos.

Después de la instalación, adapte la forma de obtener la información de los campos de la tienda virtual en los archivos "Eloom/PayUMappedAttributes/Helper/MappedQuoteAttributeDefinition" y "Eloom/ PayUMappedAttributes/Helper/MappedOrderAttributeDefinition".

Visualización de la marca de la tarjeta de crédito en checkout

De forma predeterminada, el módulo de pago de PayU para Magento viene sin CSS aplicado. La razón de esto es no interferir con el aspecto de su tienda.

Para mostrar el icono del banner de la tarjeta de crédito junto al número de la tarjeta de crédito, ingrese el CSS a continuación.

.checkout-index-index div.field.number .control {
    position: relative;
}
.checkout-index-index span.card-brand-icon {
    position: absolute;
    right: 0;
    width: 60px;
    top: 0;
}
.checkout-index-index span.card-brand-icon span {
    height: 35px;
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 35px;
    display: block;
}

Tag div.control

Tags span que reciben la bandera de la tarjeta de crédito

Resultado

Cambiar el logotipo de PayU no checkout

De forma predeterminada, el módulo de pago PayU para Magento viene con el logotipo de PayU después del nombre del método de pago.

Si desea reemplazar el logo de PayU y / o cambiar su posición, pondremos un CSS de ejemplo cambiando el logo del método de pago a Efecty.

.checkout-index-index div.payment-method-title {
    position: relative;
}

.checkout-index-index label[for='eloom_payments_payu_efecty'] ~ img {
    display: none;
}

.checkout-index-index label[for='eloom_payments_payu_efecty'] > span::after {
    height: 45px;
    background-repeat: no-repeat;
    background-position: right 0;
    background-size: 50px;
    background-image: url(https://www.efecty.com.co/WebApi//uploads/images/logo-efecty.svg);
    content: " ";
    position: absolute;
    right: 0;
    width: 150px;
}