Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesTemplating provides the ability to add a custom look and feel to our payment forms. Merchants can use the payment form templating to better match the design of their shop.
CCV Pay allows for the templating of the following payment methods:
Method | What can be templated? |
---|---|
Card | The form used to enter card details when a customer selects a card payment option |
Landing page Landing page V2 |
The form used to provide the customer multiple payment options |
Token | The form used to enter a card number or iban depending on the token type |
Bank transfer | The mail layout used to send the customer an email with instructions or a reminder |
iDeal | The form used to select the issuer of the customer |
Terminal | The form to view payment progress for for terminal |
Gift | The form used to enter gift card details when the customer selects the gift payment option |
Alipay | The form used to use the Alipay app or scan a QR code when the customer selects the Alipay payment option |
Payconiq | The form used to use the Payconiq app or scan a QR code when the customer selects the Payconiq payment option |
Google Pay V1 Google Pay V2 |
The form used to to display the Google Pay button when the customer selects the Google Pay payment option |
Apple Pay V1 Apple Pay V2 |
The form used to display the Apple Pay button when the customer selects the Apple Pay payment option |
A template consists of a predefined structure in HTML, markup in css and content placeholders. Our hosted payment pages will combine these parts in a master page and provide the rendered output to the customer.
To apply changes to a template and test them, you can use the provided HTML examples.
These can be copied into a file with extension .html
and afterwards opened into a browser.
An exception to this approach is Landing page V2 & Google Pay V2 for which only the CSS markup can be modified, in addition to a fixed set of properties which can be configured.
Each template contains translation keys for supported terms. In case you require a different terminology or wording, you can provide the translation in the template.
As a consequence, you’ll need to define a template for each language you wish to support.
A list of supported languages can be found at API - Languages
Example
ORDER_DATA
is translated in all languages
<h3 id="order-data" class="text-center" translate="ORDER_DATA">The order data</h3>
If your business does not have the concept of orders, you change this to something like
English
<h3 id="order-data" class="text-center">Reservation details</h3>
Dutch
<h3 id="order-data" class="text-center">Uw reservatiegegevens</h3>
Note that in both templates translate="ORDER_DATA"
is not present.
The style of the template can be altered using CSS. CSS allows overriding existing styles using specific selectors.
By default, the CCV Pay styling takes precedence over any other custom defined style.
This can be overruled by wrapping the template in an HTML element, preferably div
.
The new wrapper div can be used to create very specific style selectors.
Example
...
<style id="template_header">
#template_body .my_company #order-data {
background-color: white;
}
</style>
....
<div id="template_body">
<div class="my_company">
....
<h3 id="order-data" class="text-center" translate="ORDER_DATA">My Order Data</h3>
....
</div>
</div>
Warning
We do not allow the usage of external resources for any kind of markup including fonts, images etc.
Send your custom template to psp-support@ccvlab.eu. The support team will evaluate your changes and apply them to your account.