first commit

modules/paylane/views/templates/front/paylane_applepay.tpl

@@ -0,0 +1,155 @@
+{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">
+
+        <h3>{{$postParameters.applePayLabel}}</h3>
+
+        <div id="paylane_message" style="display: none">
+            <div class="alert alert-danger" id="paylane_message_alert" role="alert"></div>
+        </div>
+
+        <form action="{$postParameters.action}" method="POST" class="paylane-form paylane-applepay">
+            <div id="apple-pay-active">
+                <input type="hidden" name="payment_type" value="ApplePay">
+                <input type="hidden" name="payment[additional_information][type]" value="ApplePay">
+
+                <input id="payment_params_token" type="hidden" name="payment[additional_information][token]" value="">
+                {l s='You will be redirected to Apple Pay payment sheet after clicking button below. You have to agree to the Terms of Service also.' mod='paylane'}
+                <div id="apple-pay-button" class="apple-pay-button" title="Pay with Apple Pay"></div>
+            </div>
+            <div id="apple-pay-disabled">
+                {l s='This payment method is not available for your device' mod='paylane'}
+            </div>
+        </form>
+        <script>
+         try {
+             var paymentRadios = document.querySelectorAll(".payment-option input[type=\"radio\"]");
+             var applePayButton = document.getElementById("apple-pay-button");
+
+             function isApplePayChecked() {
+                 var checkedRadioId = null;
+                 for(var i=0; i < paymentRadios.length; i++) {
+                     if (paymentRadios[i].checked) {
+                         checkedRadioId = paymentRadios[i].id;
+                         break;
+                     }
+                 };
+
+                 if (checkedRadioId) {
+                     var labelSpan = document.querySelector("label[for=\""+checkedRadioId+"\"] span");
+                     return labelSpan && labelSpan.innerText === "{$postParameters.applePayLabel}";
+                 } else {
+                     return false;
+                 }
+             }
+
+             function hideApplePayRadioButton() {
+                 var container = document.querySelector('.paylane-applepay-wrapper');
+                 if (container) {
+                     container.style.display = "none";
+                 }
+             }
+
+             function handleTermsOfService() {
+                 var termsOfService = document.getElementById("conditions_to_approve[terms-and-conditions]");
+                 if (termsOfService && termsOfService.checked) {
+                     applePayButton.style.visibility = "visible";
+                 } else {
+                     applePayButton.style.visibility = "hidden";
+                 }
+             }
+
+             PayLane.setPublicApiKey('{$postParameters.public_key_api}');
+             for(var i=0; i < paymentRadios.length; i++) {
+                 paymentRadios[i].addEventListener('click', function() {
+                     if (isApplePayChecked()) {
+                         document.querySelector("#payment-confirmation .ps-shown-by-js button").style.display = "none";
+                         handleTermsOfService();
+                     } else {
+                         document.querySelector("#payment-confirmation .ps-shown-by-js button").style.display = "inline-block";
+                     }
+                 })
+             };
+
+             var payLaneApplePayOnAuthorized = function(paymentResult, completion) {
+                 try {
+                     console.info('Apple Pay result', paymentResult);
+                     // perform PayLane sale/authorization on server side
+                     var data = JSON.stringify(paymentResult);
+                     var headers = {
+                         'user-agent': 'Mozilla/4.0 MDN Example',
+                         'content-type': 'application/json'
+                     };
+                     var fetchData = {
+                         method: 'POST',
+                         headers: headers,
+                         body: data
+                     };
+
+                     if (paymentResult && paymentResult.card && paymentResult.card.token) {
+                         document.getElementById("payment_params_token").value = paymentResult.card.token;
+                         completion(ApplePaySession.STATUS_SUCCESS);
+                         setTimeout(function() {
+                             document.querySelector("form.paylane-applepay").submit();
+                         }, 2500);
+                     } else {
+                         completion(ApplePaySession.STATUS_FAILURE);
+                     }
+                 } catch (e) {
+                     alert(JSON.stringify(e.message));
+                 }
+             }
+
+             var payLaneApplePayPaymentRequest = {
+                 countryCode: "{$postParameters.countryCode}",
+                 currencyCode: "{$postParameters.currencyCode}",
+                 total: {
+                     label: "{$postParameters.paymentDescription}",
+                     amount: "{$postParameters.amount}"
+                 }
+             };
+
+             var payLaneApplePayOnError = function(result) {
+                 console.error(result)
+             };
+
+             applePayButton.addEventListener('click', function() {
+                 try {
+                     var applePaySession = PayLane.applePay.createSession(
+                         payLaneApplePayPaymentRequest,
+                         payLaneApplePayOnAuthorized,
+                         payLaneApplePayOnError
+                     );
+                 } catch (e) {
+                     alert(JSON.stringify(e.message));
+                 }
+             });
+
+             setTimeout(function() {
+                 PayLane.applePay.checkAvailability((available) => {
+                     if (!available) {
+                         hideApplePayRadioButton();
+                         document.getElementById("apple-pay-active").style.display = "none";
+                         document.getElementById("apple-pay-disabled").style.display = "none";
+                         var paylane_message_alert = document.getElementById('paylane_message_alert');
+                         paylane_message.style.display = 'block';
+                         paylane_message_alert.innerHTML = 'Apple Pay not available';
+                         return console.warn('Apple Pay not available');
+                     }  else {
+                         document.getElementById("apple-pay-active").style.display = "block";
+                         document.getElementById("apple-pay-disabled").style.display = "none";
+                     }
+                 });
+             }, 2500);
+         } catch (e) {
+             console.error(e);
+         }
+        </script>
+
+    </div>
+    <div class="center-block col-lg-3"></div>
+
+{/block}