Como Personalizar o Campo de Cartão de Crédito Authorize.net

Visão geral

Gostaria de personalizar o campo Authorize.net? Você pode facilmente alterar a aparência deste campo. Por exemplo, vamos estilizar o campo do cartão de crédito para que fique em uma única linha. Para fazer isso, precisaremos usar um pouco de CSS para que cada campo seja exibido em linha.

Configuração

Primeiro, você precisará criar um formulário e adicionar o campo Authorize.net ao seu formulário.

Se precisar de ajuda para criar um formulário Authorize.net, consulte esta documentação.

Os campos Número do Cartão, Data de Validade e Código de Segurança têm uma estilização padrão que define o Número do Cartão em uma linha e os demais na linha seguinte.

Adicionando o CSS para personalizar o campo Authorize.net

Agora é hora de adicionar o CSS para que possamos colocar todos os três campos em uma linha.

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

Com este CSS, personalizamos o campo Authorize.net para ter todos os campos em uma única linha.

E é tudo o que você precisa para personalizar o campo do formulário Authorize.net. Gostaria também de enviar o endereço com o pagamento Authorize.net? Confira nosso tutorial sobre Como Enviar um Endereço para Pagamentos Authorize.net.

Perguntas Frequentes

P: Como posso voltar para linhas únicas em dispositivos móveis?

R: Para telas menores, você desejará que todos os seus campos fiquem empilhados em linhas, portanto, para neutralizar o CSS mencionado neste artigo, para dispositivos móveis, você pode querer adicionar este CSS também.

@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;
}
}