Please find below the steps to follow to customize the HiPay payment page.
- 1. First of all, retrieve and copy the HiPay style sheet.
STAGE | 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. Only the CSS section of the payment page can be changed, including the payment button, the background, the added logo, etc.
- 3. To add your logo, use the CSS class .client-logo.
- 4. Finally, to display your customized design, when you call our /hpayment API, set the "css" parameter with the "HTTPS" URL of your own style sheet.
Quick tip: You can display a different design for each payment page generation according to the customer's characteristics or choices (e.g.: products).
Here is a basic CSS example:
{
/* Add your logo */
.client-logo {
display: block;
width: 261px;
height: 100px;
background: url("https://mysite.com/img/mylogo.png");
}
/* Add a background */
body.script-body {
background-image: url("https://mysite.com/img/background.jpg");
background-position: center top;
background-repeat: no-repeat;
}
/* Hide prefilled fields (like card holder) */
.prefilled {
display: none;
}
/* Change the color of the submit button */
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;
}
Comments
0 comments
Article is closed for comments.