Come personalizzare il segnaposto di Authorize.net

Introduzione

Desideri personalizzare il segnaposto di Authorize.net che vedi nel campo Numero Carta di Credito? Utilizzando il CSS puoi facilmente stilizzare non solo il campo del numero, ma anche il campo Codice di Sicurezza. In questo tutorial, ti mostreremo il CSS necessario per stilizzare questi due campi.

Per impostazione predefinita, il campo in cui inserisci la tua carta di credito è stilizzato con uno stile predefinito.

Creazione del modulo

Innanzitutto, inizieremo creando un semplice modulo di donazione e aggiungendo il campo Carta di Credito di Authorize.net. Se hai bisogno di assistenza su come creare questo tipo di modulo, consulta questa documentazione.

Una volta aggiunto il campo del modulo Authorize.net, naviga su Opzioni Campo e fai clic sulla scheda Avanzate. Da lì, puoi aggiungere il testo del tuo Segnaposto.

Aggiunta del CSS

Ora è il momento di aggiungere il CSS al tuo sito.

Se hai bisogno di assistenza nell'aggiungere CSS al tuo sito, consulta questo tutorial.

input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 19+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* IE 10+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 18- */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}

Il nome della classe CSS input.wpforms-field-authorize_net-cardnumber stilizzerà solo il campo Numero Carta, mentre il nome della classe input.wpforms-field-authorize_net-cardcvc stilizzerà solo il campo Codice di Sicurezza.

E questo è tutto ciò che ti serve per personalizzare i campi segnaposto di Authorize.net. Desideri anche inviare un numero di fattura? Dai un'occhiata a questo articolo su Come Inviare un Numero di Fattura ai Pagamenti Authorize.net.