shop.balmet.com

squareup.twig (8262B)

---

 {% if sandbox_message %}
     <div class="alert alert-warning">
         <i class="fa fa-exclamation-circle"></i>&nbsp;{{ sandbox_message }}
     </div>
 {% endif %}
 <div id="squareup-notification">
     <div class="text-center alert alert-info"><i class="fa fa-circle-o-notch fa-spin"></i>&nbsp;{{ text_loading }}</div>
 </div>
 <form class="form-horizontal" action="{{ action }}" method="POST" id="squareup_card_details_form" style="display: none;">
     <fieldset>
         <legend>{{ text_card_details }}</legend>
         {% if cards %}
         <div class="form-group">
             <label class="col-sm-2 control-label" for="squareup_select_card">{{ text_saved_card }}</label>
             <div class="col-sm-10">
                 <select class="form-control" name="squareup_select_card" id="squareup_select_card">
                     <option selected value>{{ text_new_card }}</option>
                     {% for card in cards %}
                         <option value="{{ card.id }}">{{ card.text }}</option>
                     {% endfor %}
                 </select>
             </div>
         </div>
         {% endif %}
     </fieldset>
     <fieldset id="hide-card-details">
         <div class="form-group">
             <label class="col-sm-2 control-label" for="id_card_number">{{ text_card_number }}</label>
             <div class="col-sm-10"><div id="id_card_number"></div></div>
         </div>
         <div class="form-group">
             <label class="col-sm-2 control-label" for="id_card_expiry">{{ text_card_expiry }}</label>
             <div class="col-sm-10"><div id="id_card_expiry"></div></div>
         </div>
         <div class="form-group">
             <label class="col-sm-2 control-label" for="id_cvc">{{ text_card_cvc }}</label>
             <div class="col-sm-10"><div id="id_cvc"></div></div>
         </div>
         <div class="form-group">
             <label class="col-sm-2 control-label" for="id_card_zip_code">{{ text_card_zip }}</label>
             <div class="col-sm-10"><div id="id_card_zip_code"></div></div>
         </div>
         {% if is_logged %}
             <div class="form-group">
                 <label class="col-sm-2 control-label" for="squareup_save_card">{{ text_card_save }}</label>
                 <div class="col-sm-10">
                     <input type="checkbox" id="squareup_save_card" value="1" name="squareup_save_card"/>
                 </div>
             </div>
         {% endif %}
     </fieldset>
     <div class="buttons">
         <div class="pull-right">
             <input type="button" value="{{ button_confirm }}" id="button-confirm-order" data-loading-text="{{ text_loading }}" class="btn btn-primary">
         </div>
     </div>
     <input type="hidden" name="squareup_nonce" id="squareup_nonce"/>
 </form>
 <style>
     .control-label {
         cursor: pointer;
     }
 
     .form-control--focus {
         /* Indicates how form inputs should appear when they have focus */
         outline: 5px auto rgb(59, 153, 252);
     }
     .form-control--error {
         /* Indicates how form inputs should appear when they contain invalid values */
         outline: 5px auto rgb(255, 97, 97);
     }
 
     #squareup_save_card {
         margin-top: 10px;
         cursor: pointer;
     }
 </style>
 <script type="text/javascript">
     $(document).ready(function() {
         var app_id = '{{ app_id }}';
 
         var paymentFormSettings = {
             applicationId: app_id,
             inputClass: 'form-control',
             inputStyles: [{
                 fontSize: '15px'
             }],
             cardNumber: {
                 elementId: 'id_card_number',
                 placeholder: '{{ text_card_placeholder }}'
             },
             cvv: {
                 elementId: 'id_cvc',
                 placeholder: '{{ text_cvv }}'
             },
             expirationDate: {
                 elementId: 'id_card_expiry',
                 placeholder: '{{ text_expiry }}'
             },
             postalCode: {
                 elementId: 'id_card_zip_code'
             },
             callbacks: {
                 // Called when the SqPaymentForm completes a request to generate a card
                 // nonce, even if the request failed because of an error.
                 cardNonceResponseReceived: function(errors, nonce, cardData) {
                     if (errors) {
                         var message = '';
 
                         errors.forEach(function(error) {
                             message += error.message + '. ';
                         });
 
                         squareupError(message);
                     } else {
                         // No errors occurred. Extract the card nonce.
                         $('#squareup_nonce').val(nonce);
                         submitForm();
                     }
                 },
 
                 unsupportedBrowserDetected: function() {
                     squareupError("{{ error_browser_not_supported }}");
                     // Fill in this callback to alert buyers when their browser is not supported.
                 },
 
                 paymentFormLoaded: function() {
                     // Fill in this callback to perform actions after the payment form is
                     // done loading (such as setting the postal code field programmatically).
                     paymentForm.setPostalCode('{{ payment_zip }}');
 
                     $('#squareup-notification').empty();
                     $('#squareup_card_details_form').slideDown();
                 }
             }
         };
 
     function submitForm() {
         var form = '#squareup_card_details_form';
 
         $.ajax({
             url : $(form).attr('action'),
             dataType : 'json',
             type : $(form).attr('method'),
             data : $(form).serialize(),
             beforeSend : function() {
                 $('#button-confirm-order').button('loading');
             },
             success : function(json) {
                 if (json.error) {
                     squareupError(json.error);
                 } else if (json.redirect) {
                     document.location = json.redirect;
                 }
             },
             error : function(jqXHR, ajaxSettings, thrownError) {
                 squareupError(thrownError);
             },
             complete : function() {
                 $('#button-confirm-order').button('reset');
             }
         });
     }
 
     function onScriptLoad() {
         paymentForm = new SqPaymentForm(paymentFormSettings);
         paymentForm.build();
     }
 
     function onConfirmCheckout() {
         if ($('#squareup_select_card').val()) {
             submitForm();
         } else {
             paymentForm.requestCardNonce();
         }
     }
 
     function squareupError(error) {
         $('#button-confirm-order').button('reset');
 
         $('#squareup-notification').html('<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="X"><span aria-hidden="true">&times;</span></button><i class="fa fa-exclamation-circle"></i>&nbsp;' + error + '</div>');
     }
 
     function toggleAjaxSetup(status) {
         $.ajaxSetup({
             cache: status
         });
     }
 
     function initSquareup(init_ajax_setup) {
         toggleAjaxSetup(false);
         
         var script = document.createElement('script');
         script.type="text/javascript";
         $("head").append(script);
         script.onload = onScriptLoad;
         script.src="{{ squareup_js_api }}";
         script.async = true;
         toggleAjaxSetup(init_ajax_setup);
     }
 
     $('#button-confirm-order').unbind().click(function(e) {
         e.preventDefault();
         e.stopPropagation();
 
         $('#squareup-notification').empty();
         $('#button-confirm-order').button('loading');
 
         onConfirmCheckout();
     });
 
     $('#squareup_select_card').change(function() {
         if ($(this).val()) {
             $('#hide-card-details').slideUp();
         } else {
             $('#hide-card-details').slideDown();
         }
     });
 
     initSquareup($.ajaxSetup().cache);
 });
 </script>