Come personalizzare il campo della carta di credito Authorize.net

Panoramica

Vuoi personalizzare il campo Authorize.net? Puoi cambiare facilmente l'aspetto di questo campo. Ad esempio, imposteremo il campo della carta di credito su una singola riga. Per fare ciò, dovremo usare un po' di CSS per far sì che ogni campo venga visualizzato in linea.

Configurazione

Dovrai prima creare un modulo e aggiungere il campo Authorize.net al tuo modulo.

Se hai bisogno di aiuto nella creazione di un modulo Authorize.net, consulta questa documentazione.

I campi Numero Carta, Data di Scadenza e Codice di Sicurezza hanno uno stile predefinito che imposta il Numero Carta su una riga e il resto andrà sulla riga successiva.

Aggiungere il CSS per personalizzare il campo Authorize.net

Ora è il momento di aggiungere il CSS in modo da poter ottenere tutti e tre i campi su una riga.

Se hai bisogno di aiuto nell'aggiungere CSS al tuo sito, consulta questo 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 questo CSS abbiamo ora personalizzato il campo Authorize.net per avere tutti i campi su una singola riga.

E questo è tutto ciò che ti serve per personalizzare il campo del modulo Authorize.net. Vuoi anche inviare l'indirizzo con il pagamento Authorize.net? Dai un'occhiata al nostro tutorial su Come Inviare un Indirizzo tramite Pagamenti Authorize.net.

FAQ

D: Come posso ripristinare le righe singole sui dispositivi mobili?

R: Per gli schermi più piccoli, vorrai che tutti i tuoi campi siano impilati in righe, quindi per contrastare il CSS menzionato in questo articolo, per i dispositivi mobili, potresti voler aggiungere anche questo 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;
}
}