Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe token payment page consists of 3 parts:
To identify a payment, CCV Pay presents information about the merchant and provided by the merchant to the customer. Placeholders in HTML define places to insert the payment information into the page upon loading. For the card payment page the following placeholders exist:
Placeholder | Description |
---|---|
{{merchant}} |
the name of the merchant as boarded by CCV |
{{description}} |
the value as provided in the API request |
{{{tokenForm}}} |
the Token Form Template HTML. See Token Form Template HTML |
translate
attribute and add the translation to the template itself.id
: it must be present on all elements that contain an id
in the template{{merchant}}
: it must be present to identify the payee of the transaction{{{tokenForm}}}
: it must be present if you do not change the Token Form Template<div class="container">
<div class="col-sm-8 col-md-6 col-lg-5 col-centered relative">
<div class="payment-block">
<div class="payment-block-header status">
<h1 translate="FETCHING_YOUR_TOKEN_REQUEST">Loading token request</h1>
</div>
<div class="payment-block-header status hide">
<h1 id="title" translate="COMPLETE_YOUR_TOKEN_REQUEST">Complete token request</h1>
<h2><span id="merchant">{{merchant}}</span></h2>
</div>
<div class="payment-block-info status hide">
<div class="payment-block-info-summary">
<p><span id="description">{{description}}</span></p>
</div>
<div class="clearfix"></div>
</div>
{{{tokenForm}}}
</div>
</div>
</div>
The token form contains the input for a card token or a web token, based on what is the requested token type.
The token form supports mobile devices providing a mobile friendly input form.
translate
attribute and add the translation to the template itself.id
: it must be present on all elements that contain an id
in the template<div id="cardcontainer" class="payment-block-form hide">
<form id="cardForm">
<div class="payment-block-form-input">
<label id="cc-label" for="" class="visible" translate="CARD_NUMBER">Card</label>
<input id="cc-number" type="tel" translate-placeholder="CARD_NUMBER" class="card-number-input">
<i class="fa fa-credit-card fa-fw"></i>
<img id="cc-brand" class="hidden" style="height: 25px;"/>
</div>
<div class="payment-block-form-button">
<input id="card-submit-button" type="submit" translate-value="GENERATE_TOKEN" value="Generate Token">
</div>
</form>
</div>
<div id="ibancontainer" class="payment-block-form hide">
<form id="ibanForm">
<div class="payment-block-form-input">
<label id="iban-label" for="" class="visible" translate="IBAN_NUMBER">IBAN</label>
<input id="iban-number" type="tel" translate-placeholder="IBAN_NUMBER" class="iban-number-input">
<i class="fa fa-credit-card fa-fw"></i>
</div>
<div class="payment-block-form-button">
<input id="iban-submit-button" type="submit" translate-value="GENERATE_TOKEN" value="Generate Token">
</div>
</form>
</div>
In order to facilitate an easy design process, the following code contains all templates and resources required to view a production like 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>
<!--
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">`
- Do not remove any input fields, all fields have purpose
- Do not merge card holder first and last name fields, we require them separately
- Use demo script on the bottom of the page to alter demo values
- Use demo script on the bottom of the page to toggle Bancontact Mobile support
-->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://api.psp.ccv.eu/token/css/bootstrap.min-3.3.5.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/token/css/jquery.loading-indicator-3.3.1.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap">
<link rel="stylesheet" href="https://api.psp.ccv.eu/token/css/main.css">
<script src="https://api.psp.ccv.eu/token/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/token/js/jquery.payment-1.2.3.js"></script>
<script src="https://api.psp.ccv.eu/token/js/jquery.placeholder.min.js"></script>
<script src="https://api.psp.ccv.eu/token/js/jquery.cookie-1.4.1.js"></script>
<script src="https://api.psp.ccv.eu/token/js/jquery.loading-indicator-3.3.1.min.js"></script>
<script src="https://api.psp.ccv.eu/token/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/token/js/common.js"></script>
<script src="https://api.psp.ccv.eu/token/js/iban-0.0.6.js"></script>
<script src="https://api.psp.ccv.eu/token/js/token.js"></script>
<!--
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/token/css/tokenForm.css">
</head>
<!--[if lte IE 8]>
<style>
.payment-block {
margin: 60px auto;
width: 450px;
}
</style>
<![endif]-->
<body>
<div 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">
<div class="col-sm-8 col-md-6 col-lg-5 col-centered relative">
<div class="payment-block">
<div class="payment-block-header status">
<h1 translate="FETCHING_YOUR_TOKEN_REQUEST"></h1>
</div>
<div class="payment-block-header status hide">
<h1 id="title" translate="COMPLETE_YOUR_TOKEN_REQUEST"></h1>
<h2><span id="merchant">{{merchant}}</span></h2>
</div>
<div class="payment-block-info status hide">
<div class="payment-block-info-summary">
<p><span id="description">{{description}}</span></p>
</div>
<div class="clearfix"></div>
</div>
<!-- START PAYMENT FORM TEMPLATE -->
<div id="cardcontainer" class="payment-block-form hide">
<form id="cardForm">
<div class="payment-block-form-input">
<label id="cc-label" for="" class="visible" translate="CARD_NUMBER"></label>
<input id="cc-number" type="tel" translate-placeholder="CARD_NUMBER" class="card-number-input">
<i class="fa fa-credit-card fa-fw"></i>
<img id="cc-brand" class="hidden" style="height: 25px;"/>
</div>
<div class="payment-block-form-button">
<input id="card-submit-button" type="submit" translate-value="GENERATE_TOKEN">
</div>
</form>
</div>
<div id="ibancontainer" class="payment-block-form hide">
<form id="ibanForm">
<div class="payment-block-form-input">
<label id="iban-label" for="" class="visible" translate="IBAN_NUMBER"></label>
<input id="iban-number" type="tel" translate-placeholder="IBAN_NUMBER" class="iban-number-input">
<i class="fa fa-credit-card fa-fw"></i>
</div>
<div class="payment-block-form-button">
<input id="iban-submit-button" type="submit" translate-value="GENERATE_TOKEN">
</div>
</form>
</div>
<!-- END PAYMENT FORM TEMPLATE -->
</div>
</div>
</div>
<!-- END PAYMENT TEMPLATE -->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
</div>
<!--
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.
Bancontact Mobile Support can be changed by altering the value of
`hideBancontactMobile` between `true` and `false`.
-->
<script>
var loader = $('body').loadingIndicator({
showOnInit: false,
useImage: false
}).data("loadingIndicator");
loader.show();
function dummyStatusResponse() {
let status = {
"actionToTake": "REQUEST_CARD_DATA",
"redirectUrl": "https://www.ccv.eu",
"merchantName": "Free Record Shop",
"merchantOrderReference": "TO-KE-N",
"description": "API Token description",
"language": "nld",
"psp": "CCV Pay",
"templateCss": "body { background-color: #ecf0f1; }",
"templateContainer": "<div class=\"container\">\n <div class=\"col-sm-8 col-md-6 col-lg-5 col-centered relative\">\n <div class=\"payment-block\">\n <div class=\"payment-block-header status\">\n <h1 translate=\"FETCHING_YOUR_TOKEN_REQUEST\"></h1>\n </div>\n <div class=\"payment-block-header status hide\">\n <h1 id=\"title\" translate=\"COMPLETE_YOUR_TOKEN_REQUEST\"></h1>\n <h2><span id=\"merchant\">{{merchant}}</span></h2>\n </div>\n <div class=\"payment-block-info status hide\">\n <div class=\"payment-block-info-summary\">\n <p><span id=\"description\">{{description}}</span></p>\n </div>\n <div class=\"clearfix\"></div>\n </div>\n {{{tokenForm}}}\n </div>\n </div>\n</div>",
"templateTokenForm": "<div id=\"cardcontainer\" class=\"payment-block-form hide\">\n <form id=\"cardForm\">\n <div class=\"payment-block-form-input\">\n <label id=\"cc-label\" for=\"\" class=\"visible\" translate=\"CARD_NUMBER\"></label>\n <input id=\"cc-number\" type=\"tel\" translate-placeholder=\"CARD_NUMBER\" class=\"card-number-input\">\n <i class=\"fa fa-credit-card fa-fw\"></i>\n <img id=\"cc-brand\" class=\"hidden\" style=\"height: 25px;\"/>\n </div>\n <div class=\"payment-block-form-button\">\n <input id=\"card-submit-button\" type=\"submit\" translate-value=\"GENERATE_TOKEN\">\n </div>\n </form>\n</div>\n<div id=\"ibancontainer\" class=\"payment-block-form hide\">\n <form id=\"ibanForm\">\n <div class=\"payment-block-form-input\">\n <label id=\"iban-label\" for=\"\" class=\"visible\" translate=\"IBAN_NUMBER\"></label>\n <input id=\"iban-number\" type=\"tel\" translate-placeholder=\"IBAN_NUMBER\" class=\"iban-number-input\">\n <i class=\"fa fa-credit-card fa-fw\"></i>\n </div>\n <div class=\"payment-block-form-button\">\n <input id=\"iban-submit-button\" type=\"submit\" translate-value=\"GENERATE_TOKEN\">\n </div>\n </form>\n</div>\n",
"tokenType": "CARD"
};
loader.hide();
state.mergeResponse(status);
doTemplating();
handleSuccess();
$('input').off();
$('input[type=submit]').click(function(e) {
e.preventDefault();
window.location = window.location;
})
}
setTimeout(dummyStatusResponse, 250);
</script>
</body>
</html>