How to change the layout of your payment window

It's easy to change the layout of your payment window. There are two ways to change your layout: A simple method, which you can handle from your ePay administration, and an advanced method, which requires a bit of programming, but in return gives you more control.

Simple

You can add your own logo to the payment window and write a short text to be shown next to your logo in the payment window. To do so, log in to your ePay administration, and go to Settings -> Payment window.

Please note that the file size cannot exceed 10 MB and that only the formats JPG/JPEG, GIF, and PNG are accepted. The optimum image size is 175 x 71 pixels.

Advanced

You can override parts of the layout for the payment window by using the parameter cssurl. This requires you to define a valid HTTPS address where you've placed your stylesheet.

Example of a CSS file

#epay_main #epay_paymentcards_form input {
  border-width: 2px !important;
  border-color: #ff0000 !important;
  border-style: dotted !important;
  background-color: #0000ff;
}
#epay_main input.epay_payment_button {
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: white !important;
  background: linear-gradient(
    90deg,
    red,
    orange,
    yellow,
    green,
    blue,
    indigo,
    violet
  ) !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#epay_main input.epay_payment_button:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}