Low Profile: Custom Page Design (Version 5) CSS/HTML

First, a developer who wants to customize the business's payment page
The developer must request access to the business's terminal administrator user in order to log in and design the payment page.

After logging in, go to: Settings > 4. Low Profile Processing > 5. Custom CSS and HTML Design, Version 5

Guidelines for the Developer/Designer:

• Open the Preview Page button in a separate tab.
• The page can be designed using HTML + CSS. Changes will be applied ONLINE on the preview page.
• Do not modify the data-bind attributes of the input fields themselves. Labels may be changed.
• If an input field needs to be hidden, do not hide it using CSS; hide it only through the parameters in the interface.
  For other elements, you may use display:none.
• You must leave the following text in the footer: “הסליקה מתבצעת דרך קארדקום” (Payment processing is performed through Cardcom).
• After completing the design, save the changes and open a support request by email to approve the design.
• Note that there is a 20-minute timer at the top of the page.
  
  You can also select a logo from the server and change the text at the top of the page under the general settings:
  https://secure.cardcom.solutions/Definition/LowProfile/DefByLanguge.aspx

Default page design:

Note for the developer

Changing the “Pay” button text

<input type="button" value="Go" data-bind="value: 'Text for the new button' , enable: !loadMode(),
click: sendData , hide: hideCreditCardInputs" /> 

Changing field text

Before

<label class="fieldName" data-bind="text:order.custAddresLine1.label" for="txtCustAddresLine1"</label>

After

<label class="fieldName" data-bind="" for="txtCustAddresLine1">Your new word</label>

Hiding common elements with CSS

Hiding images on the page—this line can be deleted:

background-image: url('https://secure.cardcom.solutions/Images/LowProfile5/paymentDetailsBgNew.jpg');

background-image: url(https://secure.cardcom.solutions/Images/LowProfile5/hand.jpg);

To hide the “Enter credit card details” heading, as required by accessibility standards:

h1 {
display: none; 
}     

Hiding the document line-items table:

.showProductsTables {
display: none !important;
}

* Support does not modify or design the page. The business's developer must design it and send an email including the terminal number so that we can approve the design.