Como Personalizar o Marcador do Authorize.net

Introdução

Gostaria de personalizar o texto de substituição do Authorize.net que vê no campo Número do Cartão de Crédito? Usando CSS, pode estilizar facilmente não só o campo do número, mas também o campo Código de Segurança. Neste tutorial, mostraremos o CSS necessário para estilizar estes dois campos.

Por defeito, o campo onde insere o seu cartão de crédito é estilizado com alguns estilos padrão.

Criação do formulário

Primeiro, começaremos por criar um formulário de doação simples e adicionar o campo de Cartão de Crédito do Authorize.net. Se precisar de ajuda sobre como criar este tipo de formulário, consulte esta documentação.

Depois de adicionar o campo do formulário Authorize.net, navegue até às Opções do Campo e clique no separador Avançadas. A partir daí, pode adicionar o seu texto de Substituição.

Adicionar o CSS

Agora é hora de adicionar o CSS ao seu site.

Se precisar de ajuda para adicionar CSS ao seu site, veja este 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;
}

O nome da classe CSS input.wpforms-field-authorize_net-cardnumber irá estilizar apenas o campo Número do Cartão, enquanto o nome da classe input.wpforms-field-authorize_net-cardcvc irá estilizar apenas o campo Código de Segurança.

E é tudo o que precisa para personalizar os campos de substituição do Authorize.net. Gostaria também de enviar um número de fatura? Dê uma vista de olhos a este artigo sobre Como Enviar um Número de Fatura Através de Pagamentos Authorize.net.