Cómo personalizar el campo de tarjeta de crédito de Authorize.net

Descripción general

¿Te gustaría personalizar el campo de Authorize.net? Puedes cambiar fácilmente el aspecto de este campo. Por ejemplo, vamos a dar estilo al campo de la tarjeta de crédito para que esté en una sola línea. Para ello, necesitaremos usar un poco de CSS para que cada campo se muestre en línea.

Configuración

Primero necesitarás crear un formulario y añadir el campo de Authorize.net a tu formulario.

Si necesitas ayuda para crear un formulario de Authorize.net, consulta esta documentación.

Los campos Número de tarjeta, Fecha de caducidad y Código de seguridad tienen un estilo predeterminado que coloca el Número de tarjeta en una línea y el resto cae en la siguiente línea.

Añadir el CSS para personalizar el campo de Authorize.net

Ahora es el momento de añadir el CSS para que podamos tener los tres campos en una sola línea.

Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial.

.wpforms-field-authorize_net .wpforms-field-row {
    float: left !important;
    width: 45% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 3%;
}

.wpforms-field-authorize_net-expiration {
    width: 50% !important;
    float: left !important;
    max-width: 50% !important;
}

.wpforms-field-authorize_net-expiration div {
    max-width: 40% !important;
    float: left !important;
    width: 40% !important;
}

.wpforms-field-authorize_net-expiration span {
    float: left !important;
    display: inline-block;
    width: 8% !important;
    max-width: 8% !important;
    margin: 0 5% 0 5% !important;
}

.wpforms-field-authorize_net-code {
    float: right !important;
    max-width: 45% !important;
}

Con este CSS, hemos personalizado el campo de Authorize.net para tener todos los campos en una sola línea.

Y eso es todo lo que necesitas para personalizar el campo del formulario de Authorize.net. ¿Te gustaría también enviar la dirección con el pago de Authorize.net? Echa un vistazo a nuestro tutorial sobre Cómo enviar una dirección a través de los pagos de Authorize.net.

Preguntas frecuentes

P: ¿Cómo puedo volver a poner esto en líneas individuales en dispositivos móviles?

R: Para pantallas más pequeñas, querrás que todos tus campos estén apilados en filas, así que para contrarrestar el CSS mencionado en este artículo, para dispositivos móviles, es posible que también quieras añadir este CSS.

@media (max-width: 600px) {
.wpforms-field-authorize_net .wpforms-field-row {
    float: none !important;
    width: 100% !important;
}

.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
    margin-left: 0;
}
}