Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe Alipay 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 Alipay 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"/>
<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="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 QR code. The Alipay 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 class="col-md-6 col-md-offset-3 content-middle">
<div class="alipay">
<p class="text-center hidden-sm hidden-md hidden-lg">
<i class="fa fa-mobile desktop" aria-hidden="true"></i>
<span translate="PAY_USING_ALIPAY"></span>
</p>
<div class="qr-code alipay-pc hide">
<p class="scan-code" translate="QR_LONG"></p>
<img class="alipay-qr" alt="Alipay QR code"/>
</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
-->
<!--
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 Alipay Payment">
<meta name="author" content="CCV Pay">
<link rel="stylesheet" href="https://api.psp.ccv.eu/alipay/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/alipay/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/alipay/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"/>
<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="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>
<!-- START PAYMENT FORM TEMPLATE -->
<div class="col-md-6 col-md-offset-3 content-middle">
<div class="alipay">
<p class="text-center hidden-sm hidden-md hidden-lg">
<i class="fa fa-mobile desktop" aria-hidden="true"></i>
<span translate="PAY_USING_ALIPAY"></span>
</p>
<div class="qr-code alipay-pc hide">
<p class="scan-code" translate="QR_LONG"></p>
<img class="alipay-qr" alt="Alipay QR code"/>
</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="https://api.psp.ccv.eu/card/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/alipay/js/jquery-1.11.2.min.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/jquery.payment-1.2.3.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/jquery.placeholder.min.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/jquery.cookie-1.4.1.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/jquery.loading-indicator-3.3.1.min.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/handlebars-v4.0.2.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/mobile-detect-1.3.6.min.js"></script>
<script src="https://api.psp.ccv.eu/alipay/js/common.js"></script>
<script src="https://api.psp.ccv.eu/alipay/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.
-->
<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/lab/",
"merchantName": "Free Record Shop",
"merchantOrderReference": "810baba5-21ef-4bbb-b8d5-fddfc52f03e5",
"amount": 0.1,
"currency": "EUR",
"description": "API Payment description for order 123",
"language": "nld",
"templateCss": null,
"psp": "CCV Pay [Dev]",
"templateContainer": "<div class=\"col-md-12\">\n <h3 id=\"order-data\" class=\"text-center\" translate=\"ORDER_DATA\"/>\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\"/>\n <p id=\"price-label\" translate=\"PRICE\"/>\n <p translate=\"REFERENCE\"/>\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>{{description}}</p>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n</div>\n{{{paymentForm}}}\n<div class=\"payment-footer col-md-12 text-center\">\n <a id=\"cancel-payment\" href=\"\" translate=\"CANCEL_PAYMENT\"/>\n <div class=\"clearfix\"></div>\n <img width=\"150\" src=\"https://api.psp.ccv.eu/card/img/ccv-payment-logo.svg\" alt=\"CCVPayment Logo\"/>\n</div>\n",
"templatePaymentForm": "<div class=\"col-md-6 col-md-offset-3 content-middle\">\n <div class=\"alipay\">\n <p class=\"text-center hidden-sm hidden-md hidden-lg\">\n <i class=\"fa fa-mobile desktop\" aria-hidden=\"true\"></i>\n <span translate=\"PAY_USING_ALIPAY\"></span>\n </p>\n <div class=\"qr-code alipay-pc hide\">\n <p class=\"scan-code\" translate=\"QR_LONG\"></p>\n <img class=\"alipay-qr\" alt=\"Alipay QR code\"/>\n </div>\n </div>\n</div>\n",
"qr": {
"alipayOutTradeNo": "AP211026124045385CB87E192.1",
"qr.a.href": "https://api.psp.ccv.eu/alipay/pay?outTradeNo=AP211026124045385CB87E192.1"
},
"actions": [
{
"type": "REQUEST_QR",
"value": null
}
]
};
loader.hide();
state.mergeResponse(status);
handleSuccess();
$('input').off();
$('input[type=submit]').click(function(e) {
e.preventDefault();
window.location = window.location;
});
// Embed demo qr code
$('.alipay-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');
}
setTimeout(dummyStatusResponse, 250);
</script>
</body>
</html>