Vous trouverez ci-dessous les étapes à suivre afin de personnaliser la page de paiement HiPay.
- 1. Tout d'abord, récupérez et copiez la feuille de style HiPay.
TEST | https://stage-secure-gateway.hipay-tpp.com/min/g=basic-js-css?80 |
PRODUCTION | https://secure-gateway.hipay-tpp.com/min/g=basic-js-css?80 |
- 2. Seule la partie CSS de la page de paiement peut être modifiée, incluant le bouton de paiement, l'arrière-plan, l'ajout du logo, etc.
- 3. Pour ajouter votre logo, utilisez la classe CSS .client-logo.
- 4. Enfin, pour afficher votre design personnalisé, au moment d'appeler notre API /hpayment, définissez le paramètre "css" avec l'URL en "HTTPS" de votre propre CSS.
Conseil : Vous pouvez afficher un design différent pour chaque génération de page de paiement selon les caractéristiques de votre client ou ses choix (ex. : produits).
Exemple de code CSS :
{
/* Ajouter votre logo */
.client-logo {
display: block;
width: 261px;
height: 100px;
background: url("https://mysite.com/img/mylogo.png");
}
/* Ajouter un arrière-plan */
body.script-body {
background-image: url("https://mysite.com/img/background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
/* Cacher les champs pré-remplis (comme le titulaire de la carte) */
.prefilled {
display: none;
}
/* Changer la couleur du bouton "Payer" */
body.script-body .form-actions .submit-button {
background-color: #dd3531 !important;
border: none;
border: none;
letter-spacing: 0;
height: initial;
padding: 12px 40px;
text-shadow: none;
text-transform: capitalize;
width: initial;
opacity: 1;
transition: opacity 0.3s ease 0s;
}
body.script-body .form-actions .submit-button:hover {
background-color: #dd3531 !important;
opacity: 0.75;
transition: opacity 0.3s ease 0s;
}
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.