Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe bank transfer email template consists of 1 single template. The same template is used for reminder emails which are automatically send by CCV Pay.
Like the payment page templates, the template contains placeholders for various data points of the payment. The format of these placeholders is different than those in the payment page. Transforming the template to an email is done using FreeMarker, an open source template engine.
Placeholder | Description |
---|---|
${merchant} |
the name of the merchant as boarded by CCV |
${merchant_order_reference} |
the value as provided in the API request |
${datum} |
the transaction creation date and time |
${description} |
the value as provided in the API request |
${mail_reminder_duration_days} |
the number of days left to complete a payment. Only present in case of a reminder email |
${ontvanger[0..*35]} |
a full name of the receiving party, limited to 35 characters. |
${bedrag} |
the value as provided in the API request. |
${currency} |
the value as provided in the API request. |
${iban} |
IBAN of the receiving party. |
${bic} |
BIC of the receiving party. |
${payment_reference} |
the payment reference of the receiving party. |
${begunstigde} |
a short name of the receiving party. |
Note
The receiving party of a bank transfer is and must always be CCV. You may not change any placeholders with fixed values.
FreeMarker is a powerful template engine which allows the use of conditional logic in a template. Our bank transfer templates leverages this feature to define a single template for the first email and a secondary reminder email.
The conditional logic in the template starts with <#if
and ends with </#if>
.
Warning
Do not remove any of the conditional logic in the template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<title><#if mail_reminder == true>Herinnering: </#if>Betaalinstructie voor order <#if merchant_order_reference??>${merchant_order_reference}</#if> bij ${merchant}</title>
<link rel="icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-32x32.png" sizes="32x32">
<link rel="icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-180x180.png">
<style type="text/css">
@import url("https://fonts.googleapis.com/css2?family=Source Sans 3");
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Source Sans 3" !important;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
.wrapper {
margin: 0;
padding: 0;
width: 100% !important;
table-layout: fixed;
}
table td {
border-collapse: collapse;
}
a, a:link, a:visited, a:hover {
color: #00a1e2;
text-decoration: underline;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
display: block;
margin: 0;
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
@media only screen and (max-width: 655px) {
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class~=bodygroter] {
font-size: 18px !important;
line-height: 28px !important;
}
*[class~=width_100pc] {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (min-width:657px) {
.container {
width: 656px !important;
}
}
</style>
<!--[if mso]>
<style>
td { font-family: sans-serif !important;}
</style>
<![endif]-->
<!--[if gte mso 15]>
<style type="text/css" media="all">
table { font-size:15px; mso-line-height-alt:0; line-height: 0; mso-margin-top-alt:1px; }
tr { font-size:15px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>
<body>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding-top:6px;"><!--[if (gte mso 9)|(IE)]><table width="656" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 656px;" bgcolor="#ffffff">
<tr>
<td align="left" valign="top" style="font-size:16px; line-height:26px; padding:10px 20px 30px 20px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<#if merchant_order_reference??>
<tr>
<td valign="top" align="right" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; font-weight: bold;">Ordernummer: ${merchant_order_reference}</td>
</tr>
</#if>
<tr>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; padding-bottom:10px;">Beste klant,<br />
<br />
Bedankt voor uw bestelling bij ${merchant}. CCV verwerkt de betaling voor ${merchant}.<br />
<#if mail_reminder == true><b>Tot op heden hebben wij de betaling nog niet ontvangen. Daarom ontvangt u een herinnering. Indien deze herinnering uw betaling heeft gekruist, dan kunt u deze als niet verzonden beschouwen.</b><br /></#if>
<br />
<#if merchant_order_reference??><strong>Ordernummer:</strong> ${merchant_order_reference}<br /></#if>
<strong>Datum:</strong> ${datum}<br />
<#if description??><strong>Omschrijving:</strong> ${description}<br /></#if>
<br />
Wij vragen om het orderbedrag over te boeken volgens onderstaande gegevens.</td>
</tr>
<tr>
<td valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; font-weight:bold; line-height:24px; color:#000001;">Ontvanger:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<#assign ontvanger = begunstigde>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${ontvanger[0..*35]}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Bedrag:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${bedrag} ${currency}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">IBAN / rekeningnummer:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${iban}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">BIC Code:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${bic}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;"><#if country_iso3 == "BEL">Gestructureerde mededeling<#else>Betalingskenmerk</#if>:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${payment_reference}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<br/>
<!-- Chamber of commerce -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Ondernemingsnummer</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">09045274</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- VAT -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">BTW</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">NL004895782B01</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- Company name -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Bedrijfsnaam</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">CCV Group BV</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- Website -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Website</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">https://www.ccv.eu</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; padding-bottom:10px;">Met vriendelijke groet,<br />
<br />
${begunstigde}</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding-top:6px;"><!--[if (gte mso 9)|(IE)]><table width="656" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 656px;" bgcolor="#ffffff">
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding: 0px 20px 0px 20px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="font-family:Arial,Gotham, 'Helvetica Neue', Helvetica, sans-serif; font-size:14px; line-height:22px; padding:20px 20px 20px 0;"><a href="http://www.ccv.eu" target="_blank" title="Bezoek onze website"><img src="https://i.imgur.com/0f31tkI.png" alt="CCV" border="0" width="100" style="display: block;" /></a></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<title><#if mail_reminder == true>Payment reminder: </#if>Payment instruction <#if merchant_order_reference??>for ${merchant_order_reference}</#if> at ${merchant}</title>
<link rel="icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-32x32.png" sizes="32x32">
<link rel="icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://www.ccv.eu/wp-content/uploads/sites/18/2022/09/cropped-FaviconCCV-180x180.png">
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Source Sans 3");
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
background-color: #ffffff;
font-family: "Source Sans 3" !important;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
.ExternalClass * {
line-height: 100%;
}
.wrapper {
margin: 0;
padding: 0;
width: 100% !important;
table-layout: fixed;
}
table td {
border-collapse: collapse;
}
a, a:link, a:visited, a:hover {
color: #00a1e2;
text-decoration: underline;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
img {
display: block;
margin: 0;
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
@media only screen and (max-width: 655px) {
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class~=bodygroter] {
font-size: 18px !important;
line-height: 28px !important;
}
*[class~=width_100pc] {
width: 100% !important;
max-width: 100% !important;
}
}
@media screen and (min-width:657px) {
.container {
width: 656px !important;
}
}
</style>
<!--[if mso]>
<style>
td { font-family: sans-serif !important;}
</style>
<![endif]-->
<!--[if gte mso 15]>
<style type="text/css" media="all">
table { font-size:15px; mso-line-height-alt:0; line-height: 0; mso-margin-top-alt:1px; }
tr { font-size:15px; mso-line-height-alt:0; mso-margin-top-alt:1px; }
</style>
<![endif]-->
</head>
<body>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding-top:6px;"><!--[if (gte mso 9)|(IE)]><table width="656" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 656px;" bgcolor="#ffffff">
<tr>
<td align="left" valign="top" style="font-family:'Source Sans 3'; font-size:16px; line-height:26px; padding:10px 20px 30px 20px;"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<#if merchant_order_reference??>
<tr>
<td valign="top" align="right" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; font-weight: bold;">Order number: ${merchant_order_reference}</td>
</tr>
</#if>
<tr>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; padding-bottom:10px;">Dear customer,<br />
<br />
Thank you for placing an order with ${merchant}. CCV processes transactions for ${merchant}.<br />
<#if mail_reminder == true><b>The reason why you are receiving this reminder, is to kindly inform you that we have not yet received your payment. If you have already sent your payment, please disregard this e-mail.</b><br /></#if>
<br />
<#if merchant_order_reference??><strong>Order number:</strong> ${merchant_order_reference}<br /></#if>
<strong>Date:</strong> ${datum}<br />
<#if description??><strong>Description of order:</strong> ${description}<br /></#if>
<br />
Please use the details below to transfer the amount payable.</td>
</tr>
<tr>
<td valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; font-weight:bold; line-height:24px; color:#000001;">Recipient:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<#assign ontvanger = begunstigde>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${ontvanger[0..*35]}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Amount:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${bedrag} ${currency}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">IBAN / bank account number:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${iban}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Bank Identifier Code (BIC):</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${bic}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;"><#if country_iso3 == "BEL">Structured communication<#else>Description of payment</#if>:</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">${payment_reference}</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<br/>
<!-- Chamber of commerce -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Chamber of Commerce number</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">09045274</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- VAT -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">VAT</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">NL004895782B01</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- Company name -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Company name</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">CCV Group BV</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
<!-- Website -->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 616px;">
<tr>
<td style="text-align: center; vertical-align: top; "><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; font-weight:bold; color:#000001;">Website</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="308" valign="top"><![endif]-->
<div style="width: 300px; display: inline-block; vertical-align: top;">
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="20" style="width: 20px; min-width: 20px;"></td>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001;">https://www.ccv.eu</td>
<td width="10" style="width: 10px; min-width: 10px;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="left" class="bodygroter" style="font-family:'Source Sans 3'; line-height:24px; color:#000001; padding-top:10px; padding-bottom:10px;">With kind regards,<br />
<br />
${begunstigde}</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</td>
</tr>
</table>
<table class="wrapper" bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" style="padding-top:6px;"><!--[if (gte mso 9)|(IE)]><table width="656" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width: 656px;" bgcolor="#ffffff">
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding: 0px 20px 0px 20px;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="font-family:Arial,Gotham, 'Helvetica Neue', Helvetica, sans-serif; font-size:14px; line-height:22px; padding:20px 20px 20px 0;"><a href="http://www.ccv.eu" target="_blank" title="Visit our website"><img src="https://i.imgur.com/0f31tkI.png" alt="CCV" border="0" width="100" style="display: block;" /></a></td>
</tr>
</table>
</td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table>
</body>
</html>
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 bank transfer 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 |
{{expirationDate}} |
the expiration date of the bank transfer |
{{recipientName}} |
the name of the recipient of the bank transfer |
{{recipientIban}} |
the iban of the recipient of the bank transfer |
{{recipientBic}} |
the bic of the recipient of the bank transfer |
{{structuredMessage}} |
the structured message to provide extra information on the bank transfer |
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<div class="col-md-12">
<h3 id="order-data" class="text-center" translate="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"></p>
<p id="price-label" translate="PRICE"></p>
<p translate="REFERENCE"/>
<p translate="EXPIRATION_DATE"/>
<p translate="DESCRIPTION"/>
</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>{{expirationDate}}</p>
<p>{{description}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" id='paddedinstructions'>
<p translate="INSTRUCTIONS_1"></p>
<p translate="INSTRUCTIONS_2"></p>
<br />
</div>
</div>
<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="RECIPIENT"></p>
<p id="price-label" translate="AMOUNT"></p>
<p translate="IBAN"></p>
<p translate="BIC"></p>
<p translate="COMMUNICATION"></p>
</td>
<td class="border-right no-padding"></td>
<td class="col-xs-9 col-sm-6 col-md-6">
<p>{{recipientName}}</p>
<p id="price-value">{{price}}</p>
<p>{{recipientIban}}</p>
<p>{{recipientBic}}</p>
<p>{{structuredMessage}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="payment-footer col-md-12 text-center">
<a id="cancel-payment" href="" translate="CANCEL_PAYMENT"></a>
<a id="return-to-merchant" href="" translate="RETURN"></a>
<div class="clearfix"></div>
<img width="150" src="img/ccv-payment-logo.svg" alt="CCVPayment Logo"/>
</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/banktransfer/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/banktransfer/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/banktransfer/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]-->
<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"></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">Seller</p>
<p id="price-label" translate="PRICE">Price</p>
<p translate="REFERENCE">Reference</p>
<p translate="EXPIRATION_DATE"/>
<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>{{expirationDate}}</p>
<p>{{description}}</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12" id='paddedinstructions'>
<p translate="INSTRUCTIONS_1"></p>
<p translate="INSTRUCTIONS_2"></p>
<br />
</div>
</div>
<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="RECIPIENT">Recipient</p>
<p id="price-label" translate="AMOUNT">Amount</p>
<p translate="IBAN">IBAN</p>
<p translate="BIC">BIC</p>
<p translate="COMMUNICATION">Communication</p>
</td>
<td class="border-right no-padding"></td>
<td class="col-xs-9 col-sm-6 col-md-6">
<p>{{recipientName}}</p>
<p id="price-value">{{price}}</p>
<p>{{recipientIban}}</p>
<p>{{recipientBic}}</p>
<p>{{structuredMessage}}</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="payment-footer col-md-12 text-center">
<a id="cancel-payment" href="" translate="CANCEL_PAYMENT"></a>
<a id="return-to-merchant" href="" translate="RETURN"></a>
<div class="clearfix"></div>
<img width="150" src="img/ccv-payment-logo.svg" alt="CCVPayment Logo"/>
</div>
<!-- END PAYMENT TEMPLATE -->
</div>
<script src="https://api.psp.ccv.eu/banktransfer/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/jquery.payment-1.2.3.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/jquery.placeholder.min.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/jquery.cookie-1.4.1.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/jquery.loading-indicator-3.3.1.min.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/mobile-detect-1.3.6.min.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/js/common.js"></script>
<script src="https://api.psp.ccv.eu/banktransfer/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 type="application/javascript">
var loader = $('body').loadingIndicator({
showOnInit: false,
useImage: false
}).data("loadingIndicator");
loader.show();
function dummyStatusResponse() {
let status = {
"returnUrl": "https://www.ccv.eu",
"merchantName": "Free Record Shop",
"merchantOrderReference": "bb5b2a74-2a16-4e5c-b1e1-6ebd92de137d",
"recipientName": "CCV Nederland",
"recipientIban": "NL26INGB0006865503",
"recipientBic": "INGBNL2A",
"structuredMessage": "B000003414679967",
"expirationDate": 1634039521099,
"amount": 0.20,
"currency": "EUR",
"description": "API Payment description for order bb5b2a74-2a16-4e5c-b1e1-6ebd92de137d",
"language": "eng",
"psp": "CCV Pay",
"templateCss": "body { background-color: #ecf0f1; }",
"templateContainer": "<div class=\"col-md-12\">\n <h3 id=\"order-data\" class=\"text-center\" translate=\"ORDER_DATA\"></h3>\n <div class=\"row\">\n <table class=\"col-xs-12 col-sm-12 col-md-12\">\n <tbody>\n <tr>\n <td class=\"col-xs-3 col-sm-6 col-md-6 text-right\">\n <p translate=\"SELLER\"></p>\n <p id=\"price-label\" translate=\"PRICE\"></p>\n <p translate=\"REFERENCE\"/>\n <p translate=\"EXPIRATION_DATE\"/>\n <p translate=\"DESCRIPTION\"/>\n </td>\n <td class=\"border-right no-padding\"></td>\n <td class=\"col-xs-9 col-sm-6 col-md-6\">\n <p>{{merchant}}</p>\n <p id=\"price-value\">{{price}}</p>\n <p>{{merchantOrderReference}}</p>\n <p>{{expirationDate}}</p>\n <p>{{description}}</p>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <div class=\"row\">\n <div class=\"col-xs-12 col-sm-12 col-md-12\" id='paddedinstructions'>\n <p translate=\"INSTRUCTIONS_1\"></p>\n <p translate=\"INSTRUCTIONS_2\"></p>\n <br />\n </div>\n </div>\n <div class=\"row\">\n <table class=\"col-xs-12 col-sm-12 col-md-12\">\n <tbody>\n <tr>\n <td class=\"col-xs-3 col-sm-6 col-md-6 text-right\">\n <p translate=\"RECIPIENT\"></p>\n <p id=\"price-label\" translate=\"AMOUNT\"></p>\n <p translate=\"IBAN\"></p>\n <p translate=\"BIC\"></p>\n <p translate=\"COMMUNICATION\"></p>\n </td>\n <td class=\"border-right no-padding\"></td>\n <td class=\"col-xs-9 col-sm-6 col-md-6\">\n <p>{{recipientName}}</p>\n <p id=\"price-value\">{{price}}</p>\n <p>{{recipientIban}}</p>\n <p>{{recipientBic}}</p>\n <p>{{structuredMessage}}</p>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n<div class=\"payment-footer col-md-12 text-center\">\n <a id=\"cancel-payment\" href=\"\" translate=\"CANCEL_PAYMENT\"></a>\n <a id=\"return-to-merchant\" href=\"\" translate=\"RETURN\"></a>\n <div class=\"clearfix\"></div>\n <img width=\"150\" src=\"img/ccv-payment-logo.svg\" alt=\"CCVPayment Logo\"/>\n</div>",
"token": false,
"actions": [
{
"type": "REQUEST_ISSUER",
}
]
};
loader.hide();
state.mergeResponse(status);
handleSuccess();
document.querySelectorAll('img').forEach(function(el, idx, parent) {
el.src = 'https://api.psp.ccv.eu/banktransfer/' + el.attributes['src'].value;
});
$('input').off();
$('input[type=submit]').click(function(e) {
e.preventDefault();
window.location = window.location;
});
}
setTimeout(dummyStatusResponse, 250);
</script>
</body>
</html>