Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesA terminal template applies to both operating environments ATTENDED
and SEMI_UNATTENDED
. For more details see API - Terminal Request Details.
The Terminal payment page (in both cases) can be templated in its entirety including the background.
To identify a payment, CCV Pay presents information about the merchant and provided by the merchant to the customer. For terminal the page will display the type of payment and the amount.
id
: it must be present on all elements that contain an id
in the template<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 mx-auto">
<div class="rectangle">
<div class="status-text" id="wakeup">
<div>
<h1 translate-unsafe="DISPLAY_TEXT" id="TEXT_DISPLAY">Connecting to terminal.</br> One moment please.</h1>
<div class="lds-spinner" id="CONNECTING">
<div></div>
</div>
</div>
</div>
<div class="d-none info-text" id="attended">
<div class="v-align">
<div>
<h2 class="transaction-type" id="paymentType">Sale</h2>
<hr class="transaction-type-hr"/>
<p class="transaction-amount" id="paymentAmount">EUR 20,00</p>
</div>
</div>
<hr class="divider"/>
<div class="v-align">
<div>
<h1 id="ABORT_TEXT_DISPLAY" translate="ABORT_TEXT" class="d-none">Waiting for terminal</h1>
<h3 class="cashier-text d-none" id="CASHIER_TEXT_DISPLAY" translate="CASHIER_TEXT">Please insert your card</h3>
<button class="btn-primary-ccv" translate="ABORT_BUTTON_TEXT" id="abort_button">Abort payment</button>
<div class="lds-spinner d-none" id="ABORT_STATUS">
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Payment method terminal does not use a payment form: the page is used to display information and progress to the customer.
In order to facilitate an easy design process, the following code contains all templates and resources required to view a production like terminal payment page.
The code contains instructions on what to do and what not to do. Please follow these instructions where applicable so that an easy evaluation and setup of your template can be done in production.
The sections that can be changed are marked using comments.
<div class="doNotChange">...</div>
<!-- WARNING: DO NOT CHANGE ANYTHING ABOVE THIS LINE -->
<div class="my custom component">My custom Content</div>
<!-- WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE -->
<div class="doNotChange">...</div>
Warning
Failure to adhere to these instructions will lead to rejection of all changes.
<!--
Instructions:
- Only change the parts between WARNING sections
- External resources are not support, do not include them
- Add custom CSS in header, see tag `<style id="template_header">`
- Use demo script on the bottom of the page to alter demo values
-->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CCV Pay Semi-Attended Terminal Payment">
<meta name="author" content="CCV Pay">
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/css/bootstrap.min-4.2.1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/css/jquery.loading-indicator-3.3.1.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap">
<!--
WARNING: DO NOT CHANGE ANYTHING ABOVE THIS LINE
These changes will not be applied to your template
-->
<style id="template_header">
</style>
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/style.css">
<link href="https://fonts.cdnfonts.com/css/foco" rel="stylesheet">
<style>
body, h1 {
font-family: 'Foco' !important;
}
</style>`
<title>CCV Pay</title>
</head>
<!--[if lte IE 8]>
<style>
.payment-block {
margin: 60px auto;
width: 450px;
}
.info-tooltip {
border: 1px solid #ddd;o
}
.info-tooltip.both img {
width: 100px;
}
</style>
<![endif]-->
<body>
<span id="template_body">
<!--
WARNING: DO NOT CHANGE ANYTHING ABOVE THIS LINE
These changes will not be applied to your template
-->
<!-- START PAYMENT TEMPLATE -->
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 mx-auto">
<div class="rectangle">
<div class="status-text" id="wakeup">
<div>
<h1 translate-unsafe="DISPLAY_TEXT" id="TEXT_DISPLAY">Connecting to terminal.</br> Please wait.</h1>
<div class="lds-spinner" id="CONNECTING">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="d-none info-text" id="attended">
<div class="v-align">
<div>
<h2 class="transaction-type" id="paymentType">Sale</h2>
<hr class="transaction-type-hr"/>
<p class="transaction-amount" id="paymentAmount">EUR 20.00</p>
</div>
</div>
<hr class="divider"/>
<div class="v-align">
<div>
<h1 id="ABORT_TEXT_DISPLAY" translate="ABORT_TEXT" class="d-none">Waiting for terminal</h1>
<h3 class="cashier-text d-none" id="CASHIER_TEXT_DISPLAY" translate="CASHIER_TEXT">Your card please</h3>
<button class="btn-primary-ccv" translate="ABORT_BUTTON_TEXT" id="abort_button">Abort</button>
<div class="lds-spinner d-none" id="ABORT_STATUS">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
<!-- END PAYMENT TEMPLATE -->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<div class="topright"><img src="https://api.psp.ccv.eu/terminal/img/topright.svg"></div>
<div class="bottomleft"><img src="https://api.psp.ccv.eu/terminal/img//bottomleft.svg"></div>
</div>
<script src="https://api.psp.ccv.eu/terminal/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/common.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/translate.js"></script>
<!--
WARNING: NOT PART OF PRODUCTION TEMPLATE
The following script updates resource links in the template to get a real
life example without depending on local resources.
Additionally the placeholders are replaced with demo values.
-->
<script type="application/javascript">
function mockSemiAttendedStatusResponse() {
$("#TEXT_DISPLAY").html("Follow the instructions on the terminal");
$("#CONNECTING").addClass("d-none");
}
setTimeout(mockSemiAttendedStatusResponse, 500);
</script>
</body>
</html>
<!--
Instructions:
- Only change the parts between WARNING sections
- External resources are not support, do not include them
- Add custom CSS in header, see tag `<style id="template_header">`
- Use demo script on the bottom of the page to alter demo values
-->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CCV Pay Attended Terminal Payment">
<meta name="author" content="CCV Pay">
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/css/bootstrap.min-4.2.1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/css/jquery.loading-indicator-3.3.1.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap">
<!--
WARNING: DO NOT CHANGE ANYTHING ABOVE THIS LINE
These changes will not be applied to your template
-->
<style id="template_header">
</style>
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<link rel="stylesheet" href="https://api.psp.ccv.eu/terminal/style.css">
<link href="https://fonts.cdnfonts.com/css/foco" rel="stylesheet">
<style>
body, h1 {
font-family: 'Foco' !important;
}
</style>`
<title>CCV Pay</title>
</head>
<!--[if lte IE 8]>
<style>
.payment-block {
margin: 60px auto;
width: 450px;
}
.info-tooltip {
border: 1px solid #ddd;o
}
.info-tooltip.both img {
width: 100px;
}
</style>
<![endif]-->
<body>
<span id="template_body">
<!--
WARNING: DO NOT CHANGE ANYTHING ABOVE THIS LINE
These changes will not be applied to your template
-->
<!-- START PAYMENT TEMPLATE -->
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-12 col-sm-12 col-md-12 col-lg-8 mx-auto">
<div class="rectangle">
<div class="status-text" id="wakeup">
<div>
<h1 translate-unsafe="DISPLAY_TEXT" id="TEXT_DISPLAY">Connecting to terminal.</br> Please wait.</h1>
<div class="lds-spinner" id="CONNECTING">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div class="d-none info-text" id="attended">
<div class="v-align">
<div>
<h2 class="transaction-type" id="paymentType">Sale</h2>
<hr class="transaction-type-hr"/>
<p class="transaction-amount" id="paymentAmount">EUR 20.00</p>
</div>
</div>
<hr class="divider"/>
<div class="v-align">
<div>
<h1 id="ABORT_TEXT_DISPLAY" translate="ABORT_TEXT" class="d-none">Waiting for terminal</h1>
<h3 class="cashier-text d-none" id="CASHIER_TEXT_DISPLAY" translate="CASHIER_TEXT">Processing transaction...</h3>
<button class="btn-primary-ccv" translate="ABORT_BUTTON_TEXT" id="abort_button">Abort</button>
<div class="lds-spinner d-none" id="ABORT_STATUS">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
<!-- END PAYMENT TEMPLATE -->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<div class="topright"><img src="https://api.psp.ccv.eu/terminal/img/topright.svg"></div>
<div class="bottomleft"><img src="https://api.psp.ccv.eu/terminal/img//bottomleft.svg"></div>
</div>
<script src="https://api.psp.ccv.eu/terminal/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/common.js"></script>
<script src="https://api.psp.ccv.eu/terminal/js/translate.js"></script>
<!--
WARNING: NOT PART OF PRODUCTION TEMPLATE
The following script updates resource links in the template to get a real
life example without depending on local resources.
Additionally the placeholders are replaced with demo values.
-->
<script type="application/javascript">
function mockAttendedStatusResponse() {
$("#attended").removeClass("d-none");
$("#CASHIER_TEXT_DISPLAY").removeClass("d-none");
$("#wakeup").addClass("d-none");
}
setTimeout(mockAttendedStatusResponse, 500);
</script>
</body>
</html>