Settings -> 4. Low Profile Processing -> 5. Custom CSS and HTML Design, Version 5

Custom CSS and HTML Design for Version 5

Page Content

This page allows you to customize the payment page customers see when making a transaction.

You can edit the page structure using HTML and its design using CSS, preview changes in real time, upload images for use in the design, save your work as a draft, and submit the design for approval and deployment.

The design is initially saved as a working version and does not affect the active payment page. The design displayed to customers is updated only after it has been approved and deployed.

Important Information Before You Begin

• This page is intended for developers or technical users who want to customize the business’s payment page.
• To create the design, the developer must receive access from the business to a terminal administrator account. Without administrator permissions, it is not possible to access this screen or edit the payment page design.
• The payment page can be designed using HTML and CSS. Changes are updated immediately online on the preview page.
• Your work is initially saved as a draft only and does not affect the active payment page.
• It is recommended not to delete elements that contain data-bind.
• Input fields must not be hidden using CSS or HTML. Input fields should be hidden only through the appropriate API parameters.
• Other elements that are not input fields can be hidden using display:none.
• The following text must remain in the footer: “Payment processing is performed through Cardcom”.
• For businesses using the Secure Transaction / 3D Secure module, either the Cardholder Phone field or the Cardholder Email field must remain visible. If both fields are hidden, the transaction may fail.
• It is recommended to save a draft periodically because the page has an activity timer.

Select Editing Settings

Select Editing Direction

This field determines the language direction for which the design is intended:

• Right to left – for Hebrew and Arabic.
• Left to right – for English and other languages.

A separate design is saved for each direction. The editing direction cannot be changed after editing begins, so select the required direction before clicking Start Editing.

Editing Type

This field determines the type of design being edited. On this page, the editing type is CSS and HTML, meaning full editing of the page structure and design.

Start Editing

Clicking the button starts your work on the page.

After it is clicked, the system loads the existing working-version design, the list of available images, the display languages matching the selected editing direction, and the CSS and HTML editors.

Once editing begins, the editing direction is locked and cannot be changed.

Tools and Images

Select Display Language

This field determines the language in which the payment page preview opens.

The list of languages varies according to the selected editing direction:

• For right-to-left editing, Hebrew and Arabic are displayed.
• For left-to-right editing, English and other languages are displayed.

Open Preview Page

This button opens the payment page in a separate window so you can review the design.

You can open several preview windows at the same time, for example, to test the page in different languages or at different screen sizes. Changes made to the CSS or HTML are updated in the preview in real time.

Do not refresh or close the preview window while working.

Select Image

A list for selecting an image from those already uploaded to the Cardcom payment page server.

After an image is selected, the system displays its URL in the Selected Image URL field so that it can be incorporated into the design code.

Upload Images

This button opens a window for uploading new images to the Cardcom payment page server.

After the image is uploaded, the list is refreshed, allowing you to select the new image and retrieve its URL.

You cannot use a URL for an image hosted outside the Cardcom payment page server. The image must be uploaded through this page, and you must use the URL provided by the system.

Selected Image URL

This field displays the full URL of the selected image.

You can copy the URL and use it in the CSS or HTML code. If no image has been selected, the field displays “No image selected”.

HTML Design

Select HTML to Load

This field allows you to select which HTML version to load into the editor:

• Working HTML – loads the last saved draft.
• Full Redirect – loads a ready-made payment page template for a full redirect.
• IFRAME Redirect – loads a ready-made template for use in an IFRAME display.
• Approved Custom Design – loads the approved version that is currently active, if one exists.

If no working version exists, the system loads a default template.

Load HTML

This button loads the selected HTML version into the editor.

Loading HTML replaces the editor’s existing content. If you have made unsaved changes, it is recommended to save a draft before loading.

HTML Editor

The editing area in which you write and modify the payment page’s HTML code.

Changes are updated in real time in any open preview windows. The editor includes autocomplete and basic syntax error checking.

For security reasons, HTML containing unsecured http:// links or unsafe references such as javascript: or data: cannot be saved. Use https:// links only.

CSS Design

Select Design to Load

This field allows you to select which CSS version to load into the editor:

• Working Design – loads the last saved CSS draft.
• Default – loads the system’s standard design.
• Approved Custom Design – loads the approved CSS version that is currently active, if one exists.

If no working version exists, the system loads the default design matching the selected editing direction.

Load CSS

This button loads the selected CSS version into the editor.

Loading CSS replaces the editor’s existing content. If you have made unsaved changes, it is recommended to save a draft before loading.

CSS Editor

The editing area in which you write and modify the payment page’s CSS code, including colors, fonts, spacing, and element layout.

Changes are updated in real time in any open preview windows. The editor includes autocomplete and basic syntax error checking.

For security reasons, CSS containing dangerous expressions such as expression, moz-binding, a backslash character (\), or unsecured http: references cannot be saved. Use https links only, as well as images uploaded to the Cardcom payment page server through this page.

Page Actions

Save Changes

This button saves the HTML and CSS as a draft for the selected editing direction.

Saving does not change the active payment page seen by customers. It only saves your work as a working version for further editing and preview testing.

Before saving, the system validates the CSS and HTML. If content that is not permitted for security reasons is found, the save operation is rejected and a message explains what needs to be corrected.

After completing the design, click Save Changes and then submit a design approval request by email or through support so that the design can be reviewed and deployed to the active payment page.

On a test terminal and for support users, saving automatically approves and deploys the design, so no separate approval request is required.

Submit Design for Approval

This button opens a support request for approval and deployment of the design.

Open a Payment Page Design Approval Request

After you have finished designing the payment page and saved your changes, you must open a service request with the support team so that the design can be reviewed and approved.

The form opens with details automatically entered by the system. You can update them before submitting the request.

Request Details

Approval Requester’s Name
The name of the contact submitting the request. This field is prefilled with the logged-in user’s name and can be changed.

Phone
A contact phone number in case the support team requires additional information.

Email
The email address to which updates and responses regarding the request will be sent. This field is prefilled based on the logged-in user’s details and can be changed.

Comments
The content of the request sent to the support team. The field is prefilled with text that includes the terminal number, business name, and email address. You can edit the text and add relevant information, up to 450 characters.

Open the Request

Click Open Request.

The system validates the entered information and opens a service request concerning payment page design approval for the terminal.

After the request is opened, a confirmation message is displayed and the form closes. If an error occurs, a message is displayed and the request is not submitted.

During submission, the button is temporarily disabled to prevent the same request from being opened twice.

Note for Developers

Changing the Pay button

<input type="button" value="Go" data-bind="value: 'New button text' , 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 in CSS

To hide images on the page, you can delete the following lines:

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 due to accessibility standard requirements:

h1 {
display: none; 
}     

To hide the document line items table:

.showProductsTables {
display: none !important;
}

 * The support team does not modify or design the page. Only the business’s developer should create the design and send an email with the terminal number so that the design can be approved.