Comment personnaliser le champ de carte de crédit Authorize.net

Aperçu

Souhaitez-vous personnaliser le champ Authorize.net ? Vous pouvez facilement modifier l'apparence de ce champ. Par exemple, nous allons styliser le champ de carte de crédit pour qu'il tienne sur une seule ligne. Pour ce faire, nous devrons utiliser un peu de CSS pour que chaque champ s'affiche en ligne.

Configuration

Vous devrez d'abord créer un formulaire et ajouter le champ Authorize.net à votre formulaire.

Si vous avez besoin d'aide pour créer un formulaire Authorize.net, veuillez consulter cette documentation.

Les champs Numéro de carte, Date d'expiration et Code de sécurité ont un style par défaut qui place le Numéro de carte sur une ligne et les autres sur la ligne suivante.

Ajout du CSS pour personnaliser le champ Authorize.net

Il est maintenant temps d'ajouter le CSS afin que nous puissions avoir les trois champs sur une seule ligne.

Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.

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

Avec ce CSS, nous avons maintenant personnalisé le champ Authorize.net pour que tous les champs tiennent sur une seule ligne.

Et c'est tout ce dont vous avez besoin pour personnaliser le champ de formulaire Authorize.net. Souhaitez-vous également envoyer l'adresse avec le paiement Authorize.net ? Consultez notre tutoriel sur Comment envoyer une adresse pour les paiements Authorize.net.

FAQ

Q : Comment puis-je remettre cela sur des lignes uniques sur les appareils mobiles ?

R : Pour les petits écrans, vous voudrez que tous vos champs soient empilés en lignes, donc pour contrer le CSS mentionné dans cet article, pour les appareils mobiles, vous pourriez également vouloir ajouter ce 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;
}
}