Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe card 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 |
{{price}} |
the amount and currency as provided in the API request |
{{merchantOrderReference}} |
the value as provided in the API request |
{{description}} |
the value as provided in the API request |
{{{paymentForm}}} |
the Payment Form Template HTML. See Payment 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{{{paymentForm}}}
: it must be present if you do not change the Payment Form Template<div class="col-md-12">
<h3 id="order-data" class="text-center" translate="ORDER_DATA">My Order Data</h3>
<div class="row">
<table class="col-xs-12 col-sm-12 col-md-12">
<tbody>
<tr>
<td class="col-xs-3 col-sm-6 col-md-6 text-right">
<p translate="SELLER">Merchant</p>
<p id="price-label" translate="PRICE">Price</p>
<p translate="REFERENCE">Reference</p>
<p translate="DESCRIPTION">Description</p>
</td>
<td class="border-right no-padding"></td>
<td class="col-xs-9 col-sm-6 col-md-6">
<p>{{merchant}}</p>
<p id="price-value">{{price}}</p>
<p>{{merchantOrderReference}}</p>
<p>{{description}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{{{paymentForm}}}
<div class="payment-footer col-md-12 text-center">
<a id="cancel-payment" href="" translate="CANCEL_PAYMENT">Cancel Payment</a>
<div class="clearfix"></div>
<img width="150" src="img/ccv-payment-logo.svg" alt="CCVPayment Logo"/>
</div>
The payment form contains the input fields for the card holders card data. If the merchant supports Bancontact Mobile payments, CCV Pay adds the Bancontact QR Code to the payment form.
The card form supports mobile devices providing a mobile friendly input form. If the merchant supports Bancontact Mobile payments, a button to open the Bancontact App (or any app that supports Bancontact Mobile Payments) is added to the payment 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 class="col-md-12 content-middle">
<h3 class="text-center pay-option-multiple" id="complete-payment-instructions" translate="COMPLETE_PAYMENT_INSTRUCTIONS">How do you want to complete your payment?</h3>
<div class="row">
<div class="col-sm-6 border-right text-center pay-option-multiple">
<p class="hidden-xs"> <i class="fa fa-mobile desktop" aria-hidden="true"></i><span translate="PAY_USING_BEP">Pay with your Bancontact app</span></p>
<div class="bancontact">
<p class="text-center hidden-sm hidden-md hidden-lg"> <i class="fa fa-mobile desktop" aria-hidden="true"></i><span translate="PAY_USING_BEP"/>Pay with your Bancontact app</p>
<div class="qr-code bep-pc hide">
<p class="scan-code" translate="BEP_QR_LONG">Open the app, click on 'Pay' and scan the QR code</p>
<div class="qr-code-background">
<div class="cssloader hide">Loading...</div>
<img class="bep-qr"/>
</div>
</div>
<div class="qr-code bep-tablet hide">
<div class="code-button">
<p class="scan-code" translate="BEP_INSTALLED_ON_DEVICE">I have installed the app on my device</p>
<a href="#" class="open-app bep-urlintent" translate="BEP_URLINTENT_OPEN">Open your app</a>
</div>
<div class="code-button">
<p class="scan-code" translate-unsafe="BEP_NOT_INSTALLED_ON_DEVICE">I have <u>not</u> installed the app on my device</p>
<a href="#" class="open-app bep-qr" translate="BEP_QR">Scan the QR</a>
<div class="qr-code-background">
<div class="cssloader hide">Loading...</div>
<img class="bep-qr hide"/>
</div>
</div>
</div>
<div class="app-button bep-phone hide">
<a href="#" class="open-app bep-urlintent" translate="BEP_OPEN_BC_APP">Open the Bancontact app</a>
</div>
</div>
</div>
<div class="payment-center hidden-xs pay-option-multiple"><span translate="OR">OR</span></div>
<div class="col-sm-6 text-center pay-option-card">
<p class="hidden-xs pay-option-multiple"><i class="fa fa-credit-card desktop" aria-hidden="true"></i><span translate="PAY_USING_CARD">Pay with your card</span></p>
<div class="payment-block-form status hide">
<p class="text-center hidden-sm hidden-md hidden-lg pay-option-multiple"><i class="fa fa-credit-card desktop" aria-hidden="true"></i><span translate="PAY_USING_CARD">Pay with your card</span></p>
<form id="cardForm">
<div class="payment-block-form-input">
<label id="cc-label" for="" class="visible" translate="CARD_NUMBER">Card number</label>
<input id="cc-number" autocomplete="cc-number" type="tel" translate-placeholder="CARD_NUMBER" class="card-number-input" placeholder="Card number">
<i class="fa fa-credit-card fa-fw"></i>
<div id="cc-brand" class="hidden"></div>
</div>
<div class="payment-block-form-input">
<label id="cc-fn-label" for="" class="visible" translate="CARDHOLDER'S_FIRSTNAME">Cardholder's firstname</label>
<input id="cc-firstname" autocomplete="cc-firstname" type="text" translate-placeholder="CARDHOLDER'S_FIRSTNAME" placeholder="Cardholder's firstname">
<i class="fa fa-user fa-fw"></i>
</div>
<div class="payment-block-form-input">
<label id="cc-ln-label" for="" class="visible" translate="CARDHOLDER'S_LASTNAME">Cardholder's lastname</label>
<input id="cc-lastname" autocomplete="cc-lastname" type="text" translate-placeholder="CARDHOLDER'S_LASTNAME" placeholder="Cardholder's lastname">
<i class="fa fa-user fa-fw"></i>
</div>
<div class="payment-block-form-input-half">
<div class="payment-block-form-input exp-date div-exp">
<label id="cc-exp-label" for="" class="visible" translate="EXPIRATION_DATE">Expiration date</label>
<input id="cc-exp" autocomplete="cc-exp" type="tel" translate-placeholder="EXPIRATION_DATE_FORMAT" class="exp-date-input" placeholder="Expiration date">
<i class="fa fa-calendar fa-fw"></i>
</div>
<div class="payment-block-form-input div-cvc">
<label id="cc-cvc-label" for="" class="visible" translate="CVV">CVV</label>
<input id="cc-cvc" autocomplete="cc-cvc" type="tel" translate-placeholder="CVV" placeholder="CVV">
<i class="fa fa-lock fa-fw"></i>
<div class="help">
<i class="fa fa-question-circle"></i>
<div class="help">
<i class="fa fa-question-circle"></i>
<div id="cc-cvc-tooltip" class="info-tooltip">
<p id="cc-cvc-text" translate-unsafe="3_DIGITS"></p>
<img src="img/security_code_visa_mastercard.png" alt="Security Code" width="240" height="137" />
</div>
<div id="cc-cvc-tooltip-amex" class="info-tooltip">
<p id="cc-cvc-text-amex" translate-unsafe="4_DIGITS"></p>
<img src="img/security_code_american_express.png" alt="Security Code" width="240" height="137" />
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="payment-block-form-button">
<input id="submit-button" type="submit" translate-value="PAY">
</div>
</form>
</div>
</div>
</div>
</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>
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">`
- 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 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 Card Payment">
<meta name="author" content="CCV Pay">
<link rel="stylesheet" href="https://api.psp.ccv.eu/card/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/card/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/card/css/sourceSans3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Symbols|Material+Symbols+Outlined">
<!--
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/card/css/paymentForm.css">
<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]-->
<style>
#challengeModalBody iframe {
width: 100%;
}
</style>
<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="col-md-12">
<h3 id="order-data" class="text-center" translate="ORDER_DATA">My Order Data</h3>
<div class="row">
<table class="col-xs-12 col-sm-12 col-md-12">
<tbody>
<tr>
<td class="col-xs-3 col-sm-6 col-md-6 text-right">
<p translate="SELLER">Merchant</p>
<p id="price-label" translate="PRICE">Price</p>
<p translate="REFERENCE">Reference</p>
<p translate="DESCRIPTION">Description</p>
</td>
<td class="border-right no-padding"></td>
<td class="col-xs-9 col-sm-6 col-md-6">
<p data="merchant">{{merchant}}</p>
<p data="price" id="price-value">{{price}}</p>
<p data="merchantOrderReference">{{merchantOrderReference}}</p>
<p data="description">{{description}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- START PAYMENT FORM TEMPLATE -->
<div class="col-md-12 content-middle">
<h3 class="text-center pay-option-multiple" id="complete-payment-instructions" translate="COMPLETE_PAYMENT_INSTRUCTIONS">How do you want to complete your payment?</h3>
<div class="row">
<div class="col-sm-6 border-right text-center pay-option-multiple">
<p class="hidden-xs"> <i class="material-symbols-outlined desktop" aria-hidden="true">smartphone</i><span translate="PAY_USING_BEP">Pay with your Bancontact app</span></p>
<div class="bancontact">
<p class="text-center hidden-sm hidden-md hidden-lg"> <i class="material-symbols-outlined desktop" aria-hidden="true">smartphone</i><span translate="PAY_USING_BEP"/>Pay with your Bancontact app</p>
<div class="qr-code bep-pc hide">
<p class="scan-code" translate="BEP_QR_LONG">Open the app, click on 'Pay' and scan the QR code</p>
<div class="qr-code-background">
<div class="cssloader hide">Loading...</div>
<img class="bep-qr"/>
</div>
</div>
<div class="qr-code bep-tablet hide">
<div class="code-button">
<p class="scan-code" translate="BEP_INSTALLED_ON_DEVICE">I have installed the app on my device</p>
<a href="#" class="open-app bep-urlintent" translate="BEP_URLINTENT_OPEN">Open your app</a>
</div>
<div class="code-button">
<p class="scan-code" translate-unsafe="BEP_NOT_INSTALLED_ON_DEVICE">I have <u>not</u> installed the app on my device</p>
<a href="#" class="open-app bep-qr" translate="BEP_QR">Scan the QR</a>
<div class="qr-code-background">
<div class="cssloader hide">Loading...</div>
<img class="bep-qr hide"/>
</div>
</div>
</div>
<div class="app-button bep-phone hide">
<a href="#" class="open-app bep-urlintent" translate="BEP_OPEN_BC_APP">Open the Bancontact app</a>
</div>
<div id="cc-store-in-vault-permission-bep" class="payment-block-form-input scan-code">
<input type="checkbox" id="cc-store-in-vault-permission-check-bep" onclick="permitBepStoreInVault(this)"> <span id="cc-storeinvaultpermission-bep" translate="PERMIT_CARDDATA_VAULT_STORE">Save card for future payments</span>
</div>
</div>
</div>
<div class="payment-center hidden-xs pay-option-multiple"><span translate="OR">OR</span></div>
<div class="col-sm-6 text-center pay-option-card">
<p class="hidden-xs pay-option-multiple"><i class="material-symbols-outlined desktop" aria-hidden="true">credit_card</i><span translate="PAY_USING_CARD">Pay with your card</span></p>
<div class="payment-block-form status hide">
<p class="text-center hidden-sm hidden-md hidden-lg pay-option-multiple"><i class="material-symbols-outlined desktop" aria-hidden="true">credit_card</i><span translate="PAY_USING_CARD">Pay with your card</span></p>
<form id="cardForm">
<div class="payment-block-form-input">
<label id="cc-label" for="" class="visible" translate="CARD_NUMBER">Card number</label>
<input id="cc-number" autocomplete="cc-number" type="tel" translate-placeholder="CARD_NUMBER" class="card-number-input" placeholder="Card number">
<i class="material-symbols-outlined">credit_card</i>
<div id="cc-brand" class="hidden"></div>
</div>
<div class="payment-block-form-input">
<label id="cc-fn-label" for="" class="visible" translate="CARDHOLDER'S_FIRSTNAME">Cardholders firstname</label>
<input id="cc-firstname" autocomplete="cc-firstname" type="text" translate-placeholder="CARDHOLDER'S_FIRSTNAME" placeholder="Cardholders firstname">
<i class="material-symbols-outlined">person</i>
</div>
<div class="payment-block-form-input">
<label id="cc-ln-label" for="" class="visible" translate="CARDHOLDER'S_LASTNAME">Cardholders lLastname</label>
<input id="cc-lastname" autocomplete="cc-lastname" type="text" translate-placeholder="CARDHOLDER'S_LASTNAME" placeholder="Cardholders lastname">
<i class="material-symbols-outlined">person</i>
</div>
<div class="payment-block-form-input-half">
<div class="payment-block-form-input exp-date div-exp">
<label id="cc-exp-label" for="" class="visible" translate="EXPIRATION_DATE">Expiry date</label>
<input id="cc-exp" autocomplete="cc-exp" type="tel" translate-placeholder="EXPIRATION_DATE_FORMAT" class="exp-date-input" placeholder="MM/YY">
<i class="material-symbols-outlined">calendar_month</i>
</div>
<div class="payment-block-form-input div-cvc">
<label id="cc-cvc-label" for="" class="visible" translate="CVV">CVV</label>
<input id="cc-cvc" autocomplete="cc-cvc" type="tel" translate-placeholder="CVV" placeholder="CVV">
<i class="material-symbols-outlined">lock</i>
<div class="help">
<i class="material-symbols-outlined">help</i>
<div class="help">
<i class="material-symbols-outlined">help</i>
<div id="cc-cvc-tooltip" class="info-tooltip">
<p id="cc-cvc-text" translate-unsafe="3_DIGITS">The <strong>3 digits</strong> on the <em>back</em> of your credit card.</p>
<img src="img/security_code_visa_mastercard.png" alt="Security Code" width="240" height="137" />
</div>
<div id="cc-cvc-tooltip-amex" class="info-tooltip">
<p id="cc-cvc-text-amex" translate-unsafe="4_DIGITS">The <strong>4 digits</strong> on the <em>front</em> of your credit card.</p>
<img src="img/security_code_american_express.png" alt="Security Code" width="240" height="137" />
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div id="cc-store-in-vault-permission" class="payment-block-form-input">
<input type="checkbox" id="cc-store-in-vault-permission-check" style="width: inherit;height: inherit;"> <span id="cc-storeinvaultpermission" translate="PERMIT_CARDDATA_VAULT_STORE">Save card for future payments</span>
</div>
<div class="payment-block-form-button">
<input id="submit-button" type="submit" translate-value="PAY" placeholder="Pay">
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END PAYMENT FORM TEMPLATE -->
<div class="payment-footer col-md-12 text-center">
<a id="cancel-payment" href="" translate="CANCEL_PAYMENT">Cancel Payment</a>
<div class="clearfix"></div>
<img src="img/ccv-payment-logo.svg" alt="CCVPayment Logo" width="150">
</div>
<!-- END PAYMENT TEMPLATE -->
<!--
WARNING: DO NOT CHANGE ANYTHING BELOW THIS LINE
These changes will not be applied to your template
-->
</div>
<script src="https://api.psp.ccv.eu/card/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/card/js/bootstrap.min-3.3.5.js"></script>
<script src="https://api.psp.ccv.eu/card/js/jquery.payment-1.2.3.js"></script>
<script src="https://api.psp.ccv.eu/card/js/inputmask-3.2.0.js"></script>
<script src="https://api.psp.ccv.eu/card/js/jquery.inputmask-3.2.0.js"></script>
<script src="https://api.psp.ccv.eu/card/js/jquery.placeholder.min.js"></script>
<script src="https://api.psp.ccv.eu/card/js/jquery.cookie-1.4.1.js"></script>
<script src="https://api.psp.ccv.eu/card/js/jquery.loading-indicator-3.3.1.min.js"></script>
<script src="https://api.psp.ccv.eu/card/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/card/js/mobile-detect-1.3.6.min.js"></script>
<script src="https://api.psp.ccv.eu/card/js/common.js"></script>
<script src="https://api.psp.ccv.eu/card/js/payment.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.
Bancontact Mobile Support can be changed by altering the value of
`hideBancontactMobile` between `true` and `false`.
-->
<script>
$(function() {
$("img").each(function(index, el) {
let src = $(el).attr("src");
if (src) {
src = "https://api.psp.ccv.eu/card/" + src;
$(el).attr("src", src);
}
if (el.classList.contains('bep-qr')) {
$(el).attr("src", 'bep-qr.png');
}
});
$("[data]").each(function(index, el) {
if (el.attributes["data"].value === 'merchant') el.innerHTML = 'Demo';
if (el.attributes["data"].value === 'price') el.innerHTML = '10.99';
if (el.attributes["data"].value === 'merchantOrderReference') el.innerHTML = 'ACOR93743';
if (el.attributes["data"].value === 'description') el.innerHTML = 'Payment for Order 43';
});
$(".payment-block-form.status").toggleClass('hide', false);
// Change value between true and false to toggle Bancontact Mobile support
let hideBancontactMobile = false;
$('.pay-option-multiple').toggleClass('hide', hideBancontactMobile);
$('.qr-code.bep-pc').toggleClass('hide', hideBancontactMobile);
$('div.pay-option-card').toggleClass('col-sm-offset-3', hideBancontactMobile);
// Mock partial status response from card api
state.mergeResponse({
enabledBrands: ["bcmc", "visa", "mastercard", "amex"],
psp: "CCV Pay Template Demo",
});
// Trigger form validation setup
// Enabled auto detection of entered card number
// Done manually in this template
doValidation();
// Embed demo qr code
$('.bep-qr').attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAACvAQMAAACxXBw2AAAABlBMVEX///8' +
'AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABGklEQVRIx+2WOw6DMAyGnYkxNwo3K/Rmzo08MsX97b4E6mojtTVKhD4GnPx+E' +
'f3t+21SGFOjolztfY3HbKtir1yBagLuOqYuRYhaveo4GcNBPCMfcxZ2GWhW/qBOLra469KqrUNoBmG3AuXhyzHdgvCk26wqBC86vLh' +
'kYPs/jo5P7SBDNkaeAT2clEXjMWpaQ6iNOmwnS/JoDBmaxbeHmqX3eiIuG1yUGXey2hOOcRPdbwS3gf0lQyC2g2/kh0dlk5cM+Ziax' +
'yCc2xeZSOxlxohY977uKlsMfhRTD3yEWgrmewOD6jtPTsDPYcEKu+ZhRusirAWFhnJw94GIPdvW07DLIJ7xFhDvBIzDz2EBwxmaaDn' +
'OEAH4bz9pN4KfaX4kk0mRAAAAAElFTkSuQmCC');
});
</script>
</body>
</html>