first commit
This commit is contained in:
214
modules/paylane/views/templates/front/paylane_creditcard.tpl
Normal file
214
modules/paylane/views/templates/front/paylane_creditcard.tpl
Normal file
@@ -0,0 +1,214 @@
|
||||
{extends file='page.tpl'}
|
||||
|
||||
{block name="content"}
|
||||
|
||||
<div class="center-block col-lg-3"></div>
|
||||
<div class="center-block col-sm-12 col-lg-6">
|
||||
<h2>{$postParameters['paymentMethodLabel']|escape:'htmlall':'UTF-8'}</h2>
|
||||
|
||||
<div id="paylane_message" style="display: none">
|
||||
<div class="alert alert-danger" id="paylane_message_alert" role="alert"></div>
|
||||
</div>
|
||||
|
||||
<form action="{$postParameters['return_url']}" method="POST" id="paylane-form-credit-card" class="paylane-form paylane-credit-card" name="paylane-form-credit-card">
|
||||
<input type="hidden" name="payment[additional_information][type]" value="CreditCard">
|
||||
<input type="hidden" name="payment[additional_information][back_url]" value="{$postParameters['3dsreturn_url']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="payment_type" value="CreditCard">
|
||||
<input id="paylane-payment-token" type="hidden" name="payment[additional_information][token]" value="">
|
||||
<input id="paylane-payment-creditCardString" type="hidden" name="payment[additional_information][creditCardString]" value="">
|
||||
<input id="paylane-payment-credit-card-validate" type="hidden" value="1">
|
||||
<input type="hidden" name="amount" value="{$postParameters['amount']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="currency_code" value="{$postParameters['currency']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="back_url" value="{$postParameters['return_url']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="description" value="{$postParameters['transaction_id']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="hash" value="{$postParameters['hash']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="currency" value="{$postParameters['currency']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="transaction_description" value="{$postParameters['transaction_description']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="language" value="{$postParameters['language']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_name" value="{$postParameters['customer_firstname']|escape:'htmlall':'UTF-8'} {$postParameters['customer_lastname']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_email" value="{$postParameters['customer_email']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_address" value="{$postParameters['customer_address']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_zip" value="{$postParameters['customer_zip']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_city" value="{$postParameters['customer_city']|escape:'htmlall':'UTF-8'}" />
|
||||
<input type="hidden" name="customer_country" value="{$postParameters['customer_country']|escape:'htmlall':'UTF-8'}" />
|
||||
{if !$postParameters.isSingleClickActive || ($postParameters.isSingleClickActive && $postParameters.isFirstOrder)}
|
||||
{if $postParameters.creditCardsArray}
|
||||
<div class="field">
|
||||
<label for="payment_params:id_sale" class="control-label">{l s='Choose your credit card' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<select id="payment_params:id_sale" data-paylane="id-sale" class="form-control" name="payment[additional_information][id_sale]" onchange="dropdownHideOrShowForm()">
|
||||
{foreach from=$postParameters.creditCardsArray item=creditCardSingle}
|
||||
<option value={$creditCardSingle.id_sale}|{$creditCardSingle.credit_card_number}>{$creditCardSingle.credit_card_number}</option>
|
||||
{/foreach}
|
||||
<option value="addNewCard">{l s='Add new credit card' mod='paylane'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div id="payment_form_paylane_creditcard">
|
||||
<div class="form-list">
|
||||
<div class="form-group" id="fg-payment_params:card_numer">
|
||||
<label for="payment_params:card_numer" class="control-label">{l s='Card number' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<input type="text" id="payment_params:card_numer" data-paylane="cc-number" size="19" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="fg-payment_params:name_on_card">
|
||||
<label for="payment_params:name_on_card" class="control-label">{l s='Name on card' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<input type="text" id="payment_params:name_on_card" data-paylane="cc-name-on-card" size="50" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="fg-payment_params:expiration_month">
|
||||
<label for="payment_params:expiration_month" class="control-label">{l s='Expiration month' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<select id="payment_params:expiration_month" data-paylane="cc-expiry-month" class="form-control form-control-select">
|
||||
{foreach from=$postParameters.months item=month}
|
||||
<option value="{$month}">{$month}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="fg-payment_params:expiration_month">
|
||||
<label for="payment_params:expiration_year" class="control-label">{l s='Expiration year' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<select id="payment_params:expiration_year" data-paylane="cc-expiry-year" class="form-control form-control-select">
|
||||
{foreach from=$postParameters.years item=year}
|
||||
<option value="{$year}">{$year}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" id="fg-payment_params:card_code">
|
||||
<label for="payment_params:card_code" class="control-label">{l s='CVV/CVC' mod='paylane'}</label>
|
||||
<div class="input-box">
|
||||
<input type="text" id="payment_params:card_code" data-paylane="cc-cvv" size="4" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{else}
|
||||
{if $postParameters.authorizeId}
|
||||
<input type="hidden" id="payment_params:authorization_id" name="payment[additional_information][authorization_id]" value="{$postParameters.authorizeId}">
|
||||
{l s='User authorized earlier - no additional data required' mod='paylane'}
|
||||
{else}
|
||||
<input type="hidden" id="payment_params:sale_id" name="payment[additional_information][sale_id]" value="{$postParameters.lastSaleId}">
|
||||
{l s='Using Single-click method - get card data from earlier order' mod='paylane'}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<div class="cart_navigation">
|
||||
<a href="{$link->getPageLink('order', true, NULL, "step=3")|escape:'html'}" class="btn btn-primary">{l s='Other payment methods' mod='paylane'}</a>
|
||||
<button class="btn btn-primary float-xs-right" type="submit" id="button_paylane">{l s='Confirm order' mod='paylane'}</button>
|
||||
</div>
|
||||
|
||||
<div class="row"> </div>
|
||||
</form>
|
||||
|
||||
<div class="center-block col-lg-3"></div>
|
||||
</div>
|
||||
{if $postParameters.creditCardsArray}
|
||||
<script>
|
||||
document.getElementById("paylane-payment-credit-card-validate").value = 0;
|
||||
</script>
|
||||
{/if}
|
||||
|
||||
<script>
|
||||
|
||||
try {
|
||||
document.getElementById("button_paylane").addEventListener("click", paylane_validate);
|
||||
|
||||
function paylane_validate(e) {
|
||||
if (document.getElementById("paylane-payment-credit-card-validate").value === '0') {
|
||||
document['paylane-form-credit-card'].submit();
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
var payLaneInputs = document.querySelectorAll('[data-paylane]');
|
||||
var paylane_cc_error = {};
|
||||
for (var i=0; i < payLaneInputs.length; i++) {
|
||||
var paylaneInput = payLaneInputs[i];
|
||||
paylaneInput.addEventListener('focus', function(e) {
|
||||
var el = document.getElementById('fg-' + e.target.id);
|
||||
if (el) {
|
||||
el.classList.remove("has-error");
|
||||
}
|
||||
});
|
||||
var el = document.getElementById('fg-' + paylaneInput.id);
|
||||
if (paylaneInput.value.trim() === '' && el) {
|
||||
el.classList.add("has-error");
|
||||
paylane_cc_error[paylaneInput.id] = true;
|
||||
} else if (el) {
|
||||
el.classList.remove("has-error");
|
||||
delete paylane_cc_error[paylaneInput.id];
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(paylane_cc_error).length === 0) {
|
||||
paylane_generateToken();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
try{
|
||||
var val = document.getElementById("payment_params:id_sale").value;
|
||||
if(val!="addNewCard"){
|
||||
var creditCardForm = document.getElementById("payment_form_paylane_creditcard");
|
||||
creditCardForm.classList.add('paylane-credit-card-hide-form');
|
||||
document.getElementById("paylane-payment-credit-card-validate").value = 0
|
||||
}
|
||||
}catch(e){
|
||||
console.log("Single-click not available");
|
||||
}
|
||||
}, false);
|
||||
|
||||
function dropdownHideOrShowForm() {
|
||||
var val = document.getElementById("payment_params:id_sale").value;
|
||||
var creditCardForm = document.getElementById("payment_form_paylane_creditcard");
|
||||
if(val != 'addNewCard') {
|
||||
creditCardForm.classList.add('paylane-credit-card-hide-form');
|
||||
document.getElementById("paylane-payment-credit-card-validate").value = 0;
|
||||
}else{
|
||||
creditCardForm.classList.remove('paylane-credit-card-hide-form');
|
||||
document.getElementById("paylane-payment-credit-card-validate").value = 1;
|
||||
}
|
||||
}
|
||||
|
||||
function paylane_generateToken() {
|
||||
var creditCardNumber = document.getElementById("payment_params:card_numer").value.trim();
|
||||
var creditCardArray = creditCardNumber.split('');
|
||||
for(i=4;i<creditCardArray.length-4;i++){
|
||||
creditCardArray[i] = '*';
|
||||
}
|
||||
document.getElementById('paylane-payment-creditCardString').value = creditCardArray.join("");
|
||||
|
||||
PayLane.setPublicApiKey('{$postParameters["public_key_api"]}');
|
||||
|
||||
PayLane.card.generateToken({
|
||||
cardNumber: document.getElementById("payment_params:card_numer").value.trim(),
|
||||
expirationMonth: document.getElementById("payment_params:expiration_month").value.trim(),
|
||||
expirationYear: document.getElementById("payment_params:expiration_year").value.trim(),
|
||||
nameOnCard: document.getElementById("payment_params:name_on_card").value.trim(),
|
||||
cardSecurityCode: document.getElementById("payment_params:card_code").value.trim(),
|
||||
},
|
||||
function(token) {
|
||||
document.getElementById('paylane-payment-token').value = token;
|
||||
document['paylane-form-credit-card'].submit();
|
||||
},
|
||||
function(error) {
|
||||
console.error(error);
|
||||
var paylane_message = document.getElementById('paylane_message');
|
||||
var paylane_message_alert = document.getElementById('paylane_message_alert');
|
||||
paylane_message.style.display = 'block';
|
||||
paylane_message_alert.innerHTML = 'Error code: ' + JSON.stringify(error);
|
||||
});
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{/block}
|
||||
Reference in New Issue
Block a user