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

Visão geral

Gostaria de personalizar o campo Authorize.net? Pode alterar facilmente o aspeto deste campo. Por exemplo, vamos estilizar o campo do cartão de crédito para que fique numa única linha. Para tal, precisaremos de usar um pouco de CSS para que cada campo seja exibido em linha.

Configuração

Terá primeiro de 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 um estilo predefinido que coloca o Número do Cartão numa linha e os restantes caem para a linha seguinte.

Adicionar o CSS para personalizar o campo Authorize.net

Agora é hora de adicionar o CSS para que possamos ter todos os três campos numa única 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, personalizámos o campo Authorize.net para ter todos os campos numa única linha.

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

FAQ

P: Como posso voltar a colocar isto em linhas únicas em dispositivos móveis?

R: Para ecrãs mais pequenos, vai querer que todos os seus campos estejam empilhados em linhas, pelo que, para contrariar o CSS mencionado neste artigo, para dispositivos móveis, pode querer adicionar também este 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;
}
}