HiPay Enterprise – Personnalisation de la page de paiement

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.

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