Come personalizzare il campo della carta di credito Authorize.net

Panoramica

Volete personalizzare il campo Authorize.net? È possibile modificare facilmente l'aspetto di questo campo. Per esempio, vorremmo che il campo della carta di credito fosse su una sola riga. Per farlo, dovremo usare un po' di CSS per far sì che ogni campo venga visualizzato in linea.

Impostazione

Per prima cosa è necessario creare un modulo e aggiungere il campo Authorize.net al modulo.

Se avete bisogno di aiuto per creare un modulo Authorize.net, consultate questa documentazione.

I campi Numero di carta, Data di scadenza e Codice di sicurezza hanno uno stile predefinito che imposta il Numero di carta su una riga e il resto sulla riga successiva.

Aggiunta del CSS per personalizzare il campo Authorize.net

Ora è il momento di aggiungere il CSS in modo da avere tutti e tre i campi su un'unica riga.

Se avete bisogno di aiuto per aggiungere i CSS al vostro sito, consultate 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 personalizzato il campo Authorize.net in modo da avere tutti i campi su una singola riga.

E questo è tutto ciò che serve per personalizzare il campo del modulo Authorize.net. Volete anche inviare l'indirizzo con il pagamento Authorize.net? Consultate il nostro tutorial su Come inviare un indirizzo attraverso Authorize.net Payments.

FAQ

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

R: Per gli schermi più piccoli, tutti i campi devono essere impilati in file, quindi per contrastare il CSS menzionato in questo articolo, per i dispositivi mobili, si può 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;
}
}