First of all, be sure to use the Placeholder V2
Depending the setup of your account, you may use the "V2" or the "V1" version.
This page only concerns the V2 Placeholder.
Here's some way to verify:
- Account created after May 2019 uses the V2 by default;
- If you're using any Dalenys Payement brand selector, you necessarily use the V2;
- In case of doubt, just ask your account manager.
Tip
To avoid any confusion, V1 / old Placeholder code has been migrated to a previous article: Dalenys payment solution - How to add custom languages on your payment form template.
Placeholder HTML content
First of all, you will appreciate to know the HTML code that will be injected into your template instead of the %PLACEHOLDER% marker.
Placeholder V2 HTML content
<form method="POST" id="placeholder-form" name="placeholder-form">
<input type="hidden" name="IDENTIFIER" value="{your Dalenys Payment identifier}" />
<input type="hidden" name="ORDERID" value="{your order id}" />
<input type="hidden" name="HASH" value="{your calcultated hash}" />
<input type="hidden" name="merchantParams" value="{some base64 data}" />
<input type="hidden" name="be2billParams" value="{some base64 data}" />
<p id="placeholder-name">
<label for="placeholder-name-input">
Name
</label>
<input type="text" name="CARDFULLNAME" value="John Doe" size="40" maxlength="40" autocomplete="cc-name" id="placeholder-name-input" /> <span id="placeholder-name-error"></span>
</p>
<p id="placeholder-card">
<label for="placeholder-card-input">
Card number
</label>
<input type="tel" name="CARDCODE" value="" size="20" maxlength="30" pattern="[0-9]*" autocomplete="cc-number" id="placeholder-card-input" />
<input type="hidden" name="isCbPreferredNetwork" value="yes" id="is-cb-preferred-network" />
<div id="placeholder-select-brand">
<label id="placeholder-tooltip-brand">
Select a brand
</label>
<div id="placeholder-select-brand-button" title="Select a brand" style="display:none">
<img id="placeholder-select-brand-selected" src="../template/img/cb.png">
<span id="placeholder-select-brand-button-arrow">â–Ľ</span>
</div>
<div id="placeholder-select-brand-list">
<!-- CB -->
<label id="placeholder-brand-cb" for="placeholder-brand-cb-input">
<input id="placeholder-brand-cb-input" name="SELECTEDBRAND" type="radio" value="cb">
<img src="../template/img/cb.svg" width="40px" alt="CB">
</label>
<!-- VISA -->
<label id="placeholder-brand-visa" for="placeholder-brand-visa-input">
<input id="placeholder-brand-visa-input" name="SELECTEDBRAND" type="radio" value="visa">
<img src="../template/img/visa.svg" width="40px" alt="Visa">
</label>
<!-- ELECTRON -->
<label id="placeholder-brand-electron" for="placeholder-brand-electron-input">
<input id="placeholder-brand-electron-input" name="SELECTEDBRAND" type="radio" value="electron">
<img src="../template/img/visa.svg" width="40px" alt="Visa">
</label>
<!-- VPAY -->
<label id="placeholder-brand-vpay" for="placeholder-brand-vpay-input">
<input id="placeholder-brand-vpay-input" name="SELECTEDBRAND" type="radio" value="vpay">
<img src="../template/img/visa.svg" width="40px" alt="Visa">
</label>
<!-- MASTERCARD -->
<label id="placeholder-brand-mcc" for="placeholder-brand-mcc-input">
<input id="placeholder-brand-mcc-input" name="SELECTEDBRAND" type="radio" value="mastercard">
<img src="../template/img/mcc.svg" width="40px" alt="Mastercard">
</label>
<!-- MAESTRO -->
<label id="placeholder-brand-maestro" for="placeholder-brand-maestro-input">
<input id="placeholder-brand-maestro-input" name="SELECTEDBRAND" type="radio" value="maestro">
<img src="../template/img/mcc.svg" width="40px" alt="Mastercard">
</label>
</div>
</div>
<span id="placeholder-card-error"></span>
</p>
<p id="placeholder-expiry">
<label for="placeholder-expiry-inputs">
Expiration date
</label>
<input type="tel" name="MONTHDATE" value="" size="2" minlength="2" maxlength="2" pattern="[0-9]{2}" autocomplete="cc-exp-month" id="placeholder-expiry-input-month" placeholder="MM" />
<input type="tel" name="YEARDATE" value="" size="2" minlength="2" maxlength="2" pattern="[0-9]{2}" autocomplete="cc-exp-year" id="placeholder-expiry-input-year" placeholder="YY" />
<span id="placeholder-expiry-error"></span>
</p>
<p id="placeholder-cryptogram">
<label for="placeholder-cryptogram-input">
Card verification code
</label>
<input type="tel" name="CARDCVV" value="" size="3" maxlength="5" pattern="[0-9]*" autocomplete="cc-csc" id="placeholder-cryptogram-input" />
<span id="placeholder-cryptogram-error"></span>
<span id="placeholder-cryptogram-mention">The three last digits on the back of your card</span>
</p>
<p id="placeholder-email">
<label for="placeholder-email-input">
Email
</label>
<input type="text" name="CLIENTEMAIL" value="john.doe@email.com" size="20" maxlength="40" autocomplete="email" id="placeholder-email-input" />
<span id="placeholder-email-error"></span>
</p>
<p id="placeholder-submit">
<input type="submit" name="placeholder-submit" value="Validate" id="placeholder-submit-input" />
</p>
<div id="placeholder-processing" style="display: none;">Processing...</div>
<p id="placeholder-cancel">
<input type="submit" name="placeholder-cancel" value="Cancel" id="placeholder-cancel-input" />
</p>
<script type="text/javascript" src="../template/js/Be2bill.js"></script>
</form>
<script type="text/javascript">
if (document.getElementById("placeholder-form")) {
document.getElementById("placeholder-form").onsubmit = function() {
document.getElementById('placeholder-submit').style.display = 'none';
document.getElementById('placeholder-processing').style.display = 'block';
// Override this function to prevent multiple submit
this.onsubmit = function() {
return false;
};
return true;
};
}
if (document.getElementById('placeholder-cryptogram-input')) {
document.getElementById("placeholder-cryptogram-input").onblur = function() {
cardcode = this.value;
this.value = cardcode.replace(/[^\d]/g, '');
};
document.getElementById("placeholder-cryptogram-input").onkeyup = function(e) {
//Avoid replacing arrow left and arrow right
if (e.keyCode == 37 || e.keyCode == 39) {
return;
}
cardcode = this.value;
this.value = cardcode.replace(/[^\d]/g, '');
var longueur = this.value.length;
if (longueur > 19) {
this.value = this.value.substr(0, 19);
}
};
}
document.getElementById("placeholder-card-input").onkeyup = function() {
expiry = this.value;
this.value = expiry.replace(/[^\d]/g, '');
};
document.getElementById("placeholder-expiry-input-month").onkeyup = function(e) {
expiry = this.value;
this.value = expiry.replace(/[^\d]/g, '');
// Left or Right arrow, we ignore last check
if (e.keyCode == 37 || e.keyCode == 39)
return;
if (this.value.length == 2) {
document.getElementById('placeholder-expiry-input-year').focus();
}
};
document.getElementById("placeholder-expiry-input-year").onkeyup = function() {
expiry = this.value;
this.value = expiry.replace(/[^\d]/g, '');
};
</script>