Integrate our products into your software. Let's make payment happen together!
Look at all the possibilitiesThe Apple Pay page can be customized by providing one or both of the following:
Customizations are not shared between languages. Therefore, each language can have its own custom CSS or JSON configuration.
Any existing element on the page may be freely styled using CSS, except for the restrictions mentioned below.
Essential elements on the page must remain visible and functional, more specifically:
The default styling of the list of payment methods, is as shown on the left. To add a border and bottom padding to each payment method as shown on the right, the following CSS can be used:
.payment-info-recipient-name {
color: blue;
}
In order to facilitate an easy design process, the following code contains the HTML and CSS to view a production like payment page.
Only existing CSS properties can be modified.
<body>
<div class="content">
<div class="payment-info">
<div tabindex="0" class="back-button ccv-button-tertiary" onclick="window.paymentEventHandler.onBack()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.1 19.1L4.65 12.625C4.55 12.5417 4.47933 12.4457 4.438 12.337C4.396 12.229 4.375 12.1167 4.375 12C4.375 11.8833 4.396 11.7707 4.438 11.662C4.47933 11.554 4.55 11.4583 4.65 11.375L11.1 4.90001C11.25 4.76668 11.425 4.69568 11.625 4.68701C11.825 4.67901 12 4.75001 12.15 4.90001C12.3 5.05001 12.379 5.22501 12.387 5.42501C12.3957 5.62501 12.325 5.80834 12.175 5.97501L6.875 11.25H18.5C18.7 11.25 18.875 11.3207 19.025 11.462C19.175 11.604 19.25 11.7833 19.25 12C19.25 12.2167 19.175 12.3957 19.025 12.537C18.875 12.679 18.7 12.75 18.5 12.75H6.875L12.175 18.05C12.3083 18.1833 12.379 18.354 12.387 18.562C12.3957 18.7707 12.325 18.95 12.175 19.1C12.025 19.25 11.846 19.325 11.638 19.325C11.4293 19.325 11.25 19.25 11.1 19.1Z" fill="#686C74"></path></svg>
Back
</div>
<div class="payment-info-options">
<details class="payment-info-menu">
<summary>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path id="Vector" d="M12 19.275C11.5833 19.275 11.2293 19.129 10.938 18.837C10.646 18.5456 10.5 18.1916 10.5 17.775C10.5 17.3583 10.646 17.004 10.938 16.712C11.2293 16.4206 11.5833 16.275 12 16.275C12.4167 16.275 12.7707 16.4206 13.062 16.712C13.354 17.004 13.5 17.3583 13.5 17.775C13.5 18.1916 13.354 18.5456 13.062 18.837C12.7707 19.129 12.4167 19.275 12 19.275ZM12 13.5C11.5833 13.5 11.2293 13.354 10.938 13.062C10.646 12.7706 10.5 12.4166 10.5 12C10.5 11.5833 10.646 11.2293 10.938 10.938C11.2293 10.646 11.5833 10.5 12 10.5C12.4167 10.5 12.7707 10.646 13.062 10.938C13.354 11.2293 13.5 11.5833 13.5 12C13.5 12.4166 13.354 12.7706 13.062 13.062C12.7707 13.354 12.4167 13.5 12 13.5ZM12 7.72498C11.5833 7.72498 11.2293 7.57898 10.938 7.28698C10.646 6.99564 10.5 6.64164 10.5 6.22498C10.5 5.80831 10.646 5.45398 10.938 5.16198C11.2293 4.87064 11.5833 4.72498 12 4.72498C12.4167 4.72498 12.7707 4.87064 13.062 5.16198C13.354 5.45398 13.5 5.80831 13.5 6.22498C13.5 6.64164 13.354 6.99564 13.062 7.28698C12.7707 7.57898 12.4167 7.72498 12 7.72498Z" fill="#686C74"></path></svg>
</summary>
<ul>
<li onclick="window.paymentEventHandler.onCancelPayment()">
<span>Cancel Request</span>
</li>
</ul>
</details>
</div>
<div class="payment-info-title-amount-container">
<div class="payment-info-title-container">
<div class="payment-info-title">
<div class="payment-info-title-before hidden">
<img alt="" fill="none">
</div>
<h1 data-payment-title="Payment" data-payment-remaining-amount-title="Remaining">Payment</h1>
</div>
</div>
<div class="payment-info-amount">
<span>€</span>
<p data-amount="0.10">0.10</p>
</div>
</div>
<div class="payment-info-recipient">
<span>to</span><div class="payment-info-recipient-name">Free Record Shop</div>
</div>
<div class="payment-details payment-info-details">
<input type="checkbox" id="payment-info-details" class="payment-details-toggle">
<table class="payment-details-content">
<tbody><tr>
<td>Reference</td>
<td>A240830132025241CB87E08F.U</td>
</tr>
<tr>
<td>Merchant Reference</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>30-08-2024 01:20</td>
</tr>
<tr>
<td>Description</td>
<td>Order 123456</td>
</tr>
</tbody></table>
<label for="payment-info-details" class="payment-details-toggle-label">
Details
<svg class="chevron-down" width="16" height="28" viewBox="0 0 16 28" fill="none">
<path d="M8.00002 17.0068C7.88336 17.0068 7.77102 16.9901 7.66302 16.9568C7.55436 16.9234 7.45836 16.8568 7.37502 16.7568L2.85002 12.2568C2.71669 12.1068 2.65002 11.9318 2.65002 11.7318C2.65002 11.5318 2.72502 11.3568 2.87502 11.2068C3.02502 11.0734 3.20002 11.0068 3.40002 11.0068C3.60002 11.0068 3.77502 11.0734 3.92502 11.2068L8.00002 15.2818L12.1 11.2068C12.2334 11.0568 12.4 10.9858 12.6 10.9938C12.8 11.0024 12.975 11.0734 13.125 11.2068C13.275 11.3568 13.35 11.5358 13.35 11.7438C13.35 11.9524 13.275 12.1234 13.125 12.2568L8.62502 16.7568C8.54169 16.8568 8.44602 16.9234 8.33802 16.9568C8.22936 16.9901 8.11669 17.0068 8.00002 17.0068Z" fill="#686C74"></path>
</svg>
</label>
</div>
</div>
<div class="payment-body">
<div class="error-message-component">
<input type="checkbox" id="error-close-toggle" class="error-close-toggle" checked="">
<label for="error-close-toggle" class="error-close-toggle-label ccv-close-button small"></label>
<div class="error-messages">
<div class="error-msg ccv-message-block danger hidden">
<div class="ccv-message-block-title"></div>
<div class="ccv-message-block-content"></div>
</div>
</div>
</div>
<div class="payment-content-tiles" style="width: 100%;">
<div id="apple-pay-payment-form" class="content-tile">
<div class="apple-pay-payment-form">
<div class="apple-pay-button-container">
<apple-pay-button id="applepaybutton" class="" buttonstyle="black" type="plain" locale="nl-NL" onclick="window.paymentEventHandler.onApplePayButtonClicked()" lang="nl-NL"></apple-pay-button>
</div>
<p class="apple-pay-button-unsupported-msg hidden">Your browser does not support Apple Pay on the web. Open this page in Safari.</p>
</div>
</div>
<div id="process-cancel-tile" class="content-tile hidden">
<h3>Canceling payment...</h3>
<div class="payment-cancel-description"><span>You will be automatically redirected to </span><a href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a></div>
<div class="process-cancel-timeout hidden">
<span>Cancelling is taking longer than expected...</span>
<div>
Back to <a class="cancel-timout-abort" href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a>
</div>
</div>
</div>
<div id="payment-success-tile" class="content-tile hidden">
<div class="success-svg-container trx_animation">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 140 140" class="animate" name="STATUSICON_TRANSACTION_OK" id="149">
<circle class="path circle" fill="none" stroke="#01DB93" stroke-width="14" cx="65" cy="65" r="60"></circle>
<polyline class="path check" fill="none" stroke="#01DB93" stroke-width="14" stroke-linecap="round" points="100.2,45.2 51.5,93.8 29.8,72.5 "></polyline>
</svg>
</div>
<div class="payment-success-amount">
<span>€</span>
<p data-amount="0.10">0.10</p>
</div>
<div class="payment-success">
<div class="payment-success-title">Payment complete</div>
<div class="payment-success-description"><span>You will be automatically redirected to </span><a href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a><span> in </span><span class="count-down">6</span><span>...</span></div>
</div>
<div class="payment-details payment-success-checkbox">
<input type="checkbox" id="payment-success-checkbox" class="payment-details-toggle">
<table class="payment-details-content">
<tbody><tr>
<td>Reference</td>
<td>A240830132025241CB87E08F.U</td>
</tr>
<tr>
<td>Merchant Reference</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>30-08-2024 01:20</td>
</tr>
<tr>
<td>Description</td>
<td>Order 123456</td>
</tr>
</tbody></table>
<label for="payment-success-checkbox" class="payment-details-toggle-label">
Details
<svg class="chevron-down" width="16" height="28" viewBox="0 0 16 28" fill="none">
<path d="M8.00002 17.0068C7.88336 17.0068 7.77102 16.9901 7.66302 16.9568C7.55436 16.9234 7.45836 16.8568 7.37502 16.7568L2.85002 12.2568C2.71669 12.1068 2.65002 11.9318 2.65002 11.7318C2.65002 11.5318 2.72502 11.3568 2.87502 11.2068C3.02502 11.0734 3.20002 11.0068 3.40002 11.0068C3.60002 11.0068 3.77502 11.0734 3.92502 11.2068L8.00002 15.2818L12.1 11.2068C12.2334 11.0568 12.4 10.9858 12.6 10.9938C12.8 11.0024 12.975 11.0734 13.125 11.2068C13.275 11.3568 13.35 11.5358 13.35 11.7438C13.35 11.9524 13.275 12.1234 13.125 12.2568L8.62502 16.7568C8.54169 16.8568 8.44602 16.9234 8.33802 16.9568C8.22936 16.9901 8.11669 17.0068 8.00002 17.0068Z" fill="#686C74"></path>
</svg>
</label>
</div>
</div>
<div id="payment-failed-tile" class="content-tile hidden">
<div class="payment-failed">
<div class="failed-svg-container trx_animation">
<svg version="1.1" viewBox="0 0 160 160" name="STATUSICON_TRANSACTION_NOK" id="149" preserveAspectRatio="xMidYMin slice" overflow="visible">
<circle class="popin" fill="none" stroke="#FF3C43" stroke-width="14" cx="50%" cy="50%" r="75"></circle>
<line class="path cross_pt1" fill="none" stroke="#FF3C43" stroke-width="14" stroke-linecap="round" x1="30%" y1="30%" x2="70%" y2="70%"></line>
<line class="path cross_pt2" fill="none" stroke="#FF3C43" stroke-width="14" stroke-linecap="round" x1="30%" y1="70%" x2="70%" y2="30%"></line>
</svg>
</div>
<div class="payment-failed-default">
<div class="payment-failed-title">Payment failed</div>
<div class="payment-failed-description">Payment declined</div>
</div>
<div class="payment-failed-processing-error">
<div class="payment-failed-title">Technical issue occurred</div>
<div class="payment-failed-description"><span>An unexpected technical issue has occurred.<br>Please contact </span><a href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a><span> for payment status.</span></div>
</div>
</div>
<div class="payment-details payment-failed-checkbox">
<input type="checkbox" id="payment-failed-checkbox" class="payment-details-toggle" checked="">
<table class="payment-details-content">
<tbody><tr>
<td>Reference</td>
<td>A240830132025241CB87E08F.U</td>
</tr>
<tr>
<td>Merchant Reference</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>30-08-2024 01:20</td>
</tr>
<tr>
<td>Description</td>
<td>Order 123456</td>
</tr>
</tbody></table>
<label for="payment-failed-checkbox" class="payment-details-toggle-label">
Details
<svg class="chevron-down" width="16" height="28" viewBox="0 0 16 28" fill="none">
<path d="M8.00002 17.0068C7.88336 17.0068 7.77102 16.9901 7.66302 16.9568C7.55436 16.9234 7.45836 16.8568 7.37502 16.7568L2.85002 12.2568C2.71669 12.1068 2.65002 11.9318 2.65002 11.7318C2.65002 11.5318 2.72502 11.3568 2.87502 11.2068C3.02502 11.0734 3.20002 11.0068 3.40002 11.0068C3.60002 11.0068 3.77502 11.0734 3.92502 11.2068L8.00002 15.2818L12.1 11.2068C12.2334 11.0568 12.4 10.9858 12.6 10.9938C12.8 11.0024 12.975 11.0734 13.125 11.2068C13.275 11.3568 13.35 11.5358 13.35 11.7438C13.35 11.9524 13.275 12.1234 13.125 12.2568L8.62502 16.7568C8.54169 16.8568 8.44602 16.9234 8.33802 16.9568C8.22936 16.9901 8.11669 17.0068 8.00002 17.0068Z" fill="#686C74"></path>
</svg>
</label>
</div>
</div>
<div id="general-processing-tile" class="content-tile hidden"><div class="loading-spinner__wrapper loader-visible">
<div class="loading-spinner large light-bg">
<div></div>
<div></div>
<div></div>
</div>
</div>
<h3 class="process-action">Processing...</h3>
<div class="payment-details general-processing-checkbox">
<input type="checkbox" id="general-processing-checkbox" class="payment-details-toggle">
<table class="payment-details-content">
<tbody><tr>
<td>Reference</td>
<td>A240830132025241CB87E08F.U</td>
</tr>
<tr>
<td>Merchant Reference</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>30-08-2024 01:20</td>
</tr>
<tr>
<td>Description</td>
<td>Order 123456</td>
</tr>
</tbody></table>
<label for="general-processing-checkbox" class="payment-details-toggle-label">
Details
<svg class="chevron-down" width="16" height="28" viewBox="0 0 16 28" fill="none">
<path d="M8.00002 17.0068C7.88336 17.0068 7.77102 16.9901 7.66302 16.9568C7.55436 16.9234 7.45836 16.8568 7.37502 16.7568L2.85002 12.2568C2.71669 12.1068 2.65002 11.9318 2.65002 11.7318C2.65002 11.5318 2.72502 11.3568 2.87502 11.2068C3.02502 11.0734 3.20002 11.0068 3.40002 11.0068C3.60002 11.0068 3.77502 11.0734 3.92502 11.2068L8.00002 15.2818L12.1 11.2068C12.2334 11.0568 12.4 10.9858 12.6 10.9938C12.8 11.0024 12.975 11.0734 13.125 11.2068C13.275 11.3568 13.35 11.5358 13.35 11.7438C13.35 11.9524 13.275 12.1234 13.125 12.2568L8.62502 16.7568C8.54169 16.8568 8.44602 16.9234 8.33802 16.9568C8.22936 16.9901 8.11669 17.0068 8.00002 17.0068Z" fill="#686C74"></path>
</svg>
</label>
</div>
</div>
<div id="payment-timeout-tile" class="content-tile hidden">
<div class="timeout-svg-container">
<svg xmlns="http://www.w3.org/2000/svg" width="170" height="170" viewBox="0 0 170 170" fill="none">
<path d="M170 85C170 131.944 131.944 170 85 170C38.0558 170 0 131.944 0 85C0 38.0558 38.0558 0 85 0C131.944 0 170 38.0558 170 85ZM13.4211 85C13.4211 124.532 45.4681 156.579 85 156.579C124.532 156.579 156.579 124.532 156.579 85C156.579 45.4681 124.532 13.4211 85 13.4211C45.4681 13.4211 13.4211 45.4681 13.4211 85Z" fill="#D9DADC"></path>
<path d="M48.2558 121.913C45.6616 119.319 45.6616 115.113 48.2558 112.518L112.673 48.1009C115.267 45.5067 119.473 45.5067 122.068 48.1009C124.662 50.695 124.662 54.901 122.068 57.4952L57.6501 121.913C55.0559 124.507 50.8499 124.507 48.2558 121.913Z" fill="#D9DADC"></path>
<path d="M48.256 48.101C50.8501 45.5068 55.0561 45.5068 57.6503 48.101L122.068 112.519C124.662 115.113 124.662 119.319 122.068 121.913C119.474 124.507 115.268 124.507 112.674 121.913L48.256 57.4953C45.6618 54.9012 45.6618 50.6952 48.256 48.101Z" fill="#D9DADC"></path>
</svg>
</div>
<div class="payment-timeout-title">Timeout</div>
<div class="payment-timeout-description">Server did not respond within the specified time interval.<br>This may be caused by interrupted internet connection or a technical issue.</div>
<div class="payment-timeout-countdown"><span>You will be automatically redirected to </span><a href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a><span> in </span><span class="timeout-redirect-countdown">6</span><span>...</span></div>
<div class="payment-details payment-timeout-details">
<input type="checkbox" id="payment-timeout-details" class="payment-details-toggle">
<table class="payment-details-content">
<tbody><tr>
<td>Reference</td>
<td>A240830132025241CB87E08F.U</td>
</tr>
<tr>
<td>Merchant Reference</td>
<td>123456</td>
</tr>
<tr>
<td>Date</td>
<td>30-08-2024 01:20</td>
</tr>
<tr>
<td>Description</td>
<td>Order 123456</td>
</tr>
</tbody></table>
<label for="payment-timeout-details" class="payment-details-toggle-label">
Details
<svg class="chevron-down" width="16" height="28" viewBox="0 0 16 28" fill="none">
<path d="M8.00002 17.0068C7.88336 17.0068 7.77102 16.9901 7.66302 16.9568C7.55436 16.9234 7.45836 16.8568 7.37502 16.7568L2.85002 12.2568C2.71669 12.1068 2.65002 11.9318 2.65002 11.7318C2.65002 11.5318 2.72502 11.3568 2.87502 11.2068C3.02502 11.0734 3.20002 11.0068 3.40002 11.0068C3.60002 11.0068 3.77502 11.0734 3.92502 11.2068L8.00002 15.2818L12.1 11.2068C12.2334 11.0568 12.4 10.9858 12.6 10.9938C12.8 11.0024 12.975 11.0734 13.125 11.2068C13.275 11.3568 13.35 11.5358 13.35 11.7438C13.35 11.9524 13.275 12.1234 13.125 12.2568L8.62502 16.7568C8.54169 16.8568 8.44602 16.9234 8.33802 16.9568C8.22936 16.9901 8.11669 17.0068 8.00002 17.0068Z" fill="#686C74"></path>
</svg>
</label>
</div>
</div>
</div>
</div>
<div class="payment-final hidden" data-return-url="http://localhost:8099/vpos/mbo/#!/">
<div>
Back to <a href="http://localhost:8099/vpos/mbo/#!/">Free Record Shop</a>
</div>
</div>
<div class="payment-footer">
Payments provided by<img width="22" height="8" viewbox="0 0 22 8" fill="none" src="img/logo/ccv.svg" alt="">
</div>
</div>
</body>
/******** Body styling *******/
body {
margin: 0;
background: var(--light-greys-white);
font-family: var(--base-font-family);
font-style: normal;
/* elements inside won't be affected by scrollbars */
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
/******** Main content styling *******/
.content {
min-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 70%;
padding: 20px 32px 0 32px;
position: relative;
box-sizing: border-box;
}
/******** Payment methods styling *******/
.apple-pay-payment-form {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 40px;
}
#applepaybutton {
max-width: 400px;
max-height: 50px;
}
.apple-pay-button-unsupported-msg {
text-align: center;
color: var(--light-greys-grey-dark-800);
font-family: var(--base-font-family);
font-size: var(--base-font-size);
font-weight: var(--base-font-weight);
line-height: var(--base-line-height);
}
Certain aspects of the Apple Pay page can be modified by means of JSON formatted configuration.
The currently supported properties are:
Property | Description |
---|---|
translations |
A JSON object in which the default translation of one or more keys can be overridden. |
translations
property{
"PAYMENT_REFERENCE": "Reference",
"PAYMENT_MERCHANT_REFERENCE": "Merchant Reference",
"PAYMENT_DATE": "Date",
"PAYMENT_DESCRIPTION": "Description",
"PAYMENT_DETAILS": "Details",
"PAYMENT_TITLE": "Payment",
"BACK": "Back",
"PAYMENT_PROVIDED_BY": "Payments provided by",
"TO": "to"
}
To override the PAYMENT_TITLE
key use the following:
{
"translations": {
"PAYMENT_TITLE": "Fancy Payment"
}
}