Merge pull request #126 from QuickPay/release2_3

New release

templates/form/card.liquid

@@ -1,10 +1,22 @@
 <div class="container">
-  <form class="form-horizontal" autocomplete="on" action="{{ model.form_action }}" method="post">
-    <input type="hidden" name="session_id" value="{{ model.session_id }}" />
+  <form
+    class="form-horizontal"
+    autocomplete="on"
+    action="{{ model.form_action }}"
+    method="post">
+    <input
+      type="hidden"
+      name="session_id"
+      value="{{ model.session_id }}" />
     <div class="row">
       <div class="form-card-brands col-sm-4 col-sm-push-8 col-xs-12 text-center-xs">
         {% for method in model.card_payment_methods %}
-          <img class="card-brand" src="{{ method.image_path }}" alt="{{ method.nice_name }}" title="{{ method.nice_name }}" data-card-brand-logo="{{ method.name }}" />
+          <img
+            class="card-brand"
+            src="{{ method.image_path }}"
+            alt="{{ method.nice_name }}"
+            title="{{ method.nice_name }}"
+            data-card-brand-logo="{{ method.name }}" />
         {% endfor %}
       </div>
 
@@ -14,7 +26,15 @@
             <div class="form-group">
               <div class="col-xs-12">
                 <label for="cardholder" class="control-label">{% t Name on card %}</label>
-                <input type="text" id="cardholder" name="cardholder" class="form-control" autocomplete="cc-name" autofocus="autofocus" {% if config.enable_prefill_name %}value="{{ model.name_on_card }}"{% endif %}>
+                <input
+                  type="text"
+                  id="cardholder"
+                  name="cardholder"
+                  class="form-control"
+                  maxlength="44"
+                  autocomplete="cc-name"
+                  autofocus="autofocus"
+                  {% if config.enable_prefill_name %}value="{{ model.name_on_card }}"{% endif %}>
               </div>
             </div>
           {% endunless %}
@@ -23,38 +43,141 @@
         <div class="form-group has-feedback">
           <div class="col-xs-12">
             <label for="cardnumber" class="control-label">{% t Card number %}</label>
-            <input type="tel" id="cardnumber" name="cardnumber" class="form-control" autocomplete="cc-number" {% unless config.enable_card_holder_field %} autofocus="autofocus" {% endunless %} aria-describedby="cardnumberSuccess" pattern="[0-9\s]*" data-mask="#" inputmode="numeric">
-            <span id="cardnumber-check" class="form-control-feedback" aria-hidden="true" style="display: none"><img class="check-icon" src="{{ images.check.svg }}" alt="Checkmark"></span>
+            <input
+              type="tel"
+              id="cardnumber"
+              name="cardnumber"
+              class="form-control"
+              autocomplete="cc-number"
+              {% unless config.enable_card_holder_field %}
+              autofocus="autofocus"
+              {% endunless %}
+              aria-describedby="cardnumberSuccess"
+              pattern="[0-9\s]*"
+              data-mask="#"
+              inputmode="numeric">
+            <span
+              id="cardnumber-check"
+              class="form-control-feedback"
+              aria-hidden="true"
+              style="display: none"><img
+                class="check-icon"
+                src="{{ images.check.svg }}"
+                alt="Checkmark"></span>
             <span id="cardnumber-sr" class="sr-only">(success)</span>
           </div>
         </div>
 
+        <div id="brand-selector" class="form-group has-feedback" style="display: none;">
+          <div class="col-xs-12">
+            <span>{% t Card type %}:</span>
+            <div class="inline-option">
+            <input type="radio" name="brand" id="cardbrandVisa" value="visa">
+            <label for="cardbrandVisa">
+              Visa
+            </label>
+            </div>
+            <div class="inline-option">
+            <input type="radio" name="brand" id="cardbrandDankort" value="dankort">
+            <label for="cardbrandDankort">
+              Dankort
+            </label>
+            </div>
+          </div>
+        </div>
+
         <div class="form-group has-feedback">
           <div class="col-xs-6">
 
-            <div class="col-xs-12" style="padding: 0"><label for="expiration-month" class="control-label">{% t Expiration date %}</label></div>
+            <div class="col-xs-12" style="padding: 0">
+              <label for="expiration-month" class="control-label">{% t Expiration date %}</label>
+            </div>
             <div class="col-xs-6" style="padding-right: 2px; padding-left: 0">
-              <input type="tel" id="expiration-month" name="expiration[month]" class="form-control" autocomplete="cc-exp-month" aria-describedby="expiration-month-sr" placeholder="MM" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important">
-              <span id="expiration-month-check" class="form-control-feedback" aria-hidden="true" style="top: 2px; right: 2.5px; display: none"><img class="check-icon" src="{{ images.check.svg }}" alt="Checkmark"></span>
+              <input
+                type="tel"
+                id="expiration-month"
+                name="expiration[month]"
+                class="form-control"
+                autocomplete="cc-exp-month"
+                aria-describedby="expiration-month-sr"
+                placeholder="MM"
+                maxlength="2"
+                pattern="[0-9]*"
+                data-mask="99"
+                inputmode="numeric"
+                style="padding-right: 28px !important">
+              <span
+                id="expiration-month-check"
+                class="form-control-feedback"
+                aria-hidden="true"
+                style="top: 2px; right: 2.5px; display: none"><img
+                  class="check-icon"
+                  src="{{ images.check.svg }}"
+                  alt="Checkmark"></span>
               <span id="expiration-month-sr" class="sr-only">(success)</span>
             </div>
 
             <div class="col-xs-6" style="padding-right: 0; padding-left: 2px">
-              <input type="tel" id="expiration-year" name="expiration[year]" class="form-control" autocomplete="cc-exp-year" aria-describedby="expiration-year-sr" placeholder="YY" maxlength="2" pattern="[0-9]*" data-mask="99" inputmode="numeric" style="padding-right: 28px !important">
-              <span id="expiration-year-check" class="form-control-feedback" aria-hidden="true" style="top: 2px; right: 0; display: none"><img class="check-icon" src="{{ images.check.svg }}" alt="Checkmark"></span>
+              <input
+                type="tel"
+                id="expiration-year"
+                name="expiration[year]"
+                class="form-control"
+                autocomplete="cc-exp-year"
+                aria-describedby="expiration-year-sr"
+                placeholder="YY"
+                maxlength="2"
+                pattern="[0-9]*"
+                data-mask="99"
+                inputmode="numeric"
+                style="padding-right: 28px !important">
+              <span
+                id="expiration-year-check"
+                class="form-control-feedback"
+                aria-hidden="true"
+                style="top: 2px; right: 0; display: none"><img
+                  class="check-icon"
+                  src="{{ images.check.svg }}"
+                  alt="Checkmark"></span>
               <span id="expiration-year-sr" class="sr-only">(success)</span>
             </div>
           </div>
 
           <div class="col-xs-6">
             {% unless model.moto %}
-              <label for="cvd" id="cvd-label" class="control-label">CVV/CVD</label> <img class="icon clickable" style="margin-bottom: 3px" src="{{ images.question-circle.svg }}" alt="CVV/CVD" data-toggle="#cvd-help">
-              <input type="tel" id="cvd" name="cvd" class="form-control" autocomplete="cc-csc" aria-describedby="cvd" maxlength="4" pattern="[0-9]*" data-mask="9999" inputmode="numeric">
-              <span id="cvd-check" class="form-control-feedback" aria-hidden="true" style="display: none"><img class="check-icon" src="{{ images.check.svg }}" alt="Checkmark"></span>
+              <label
+                for="cvd"
+                id="cvd-label"
+                class="control-label">CVV/CVD</label>
+              <img
+                class="icon clickable"
+                style="margin-bottom: 3px"
+                src="{{ images.question-circle.svg }}"
+                alt="CVV/CVD"
+                data-toggle="#cvd-help">
+              <input
+                type="tel"
+                id="cvd"
+                name="cvd"
+                class="form-control"
+                autocomplete="cc-csc"
+                aria-describedby="cvd"
+                maxlength="4"
+                pattern="[0-9]*"
+                data-mask="9999"
+                inputmode="numeric">
+              <span
+                id="cvd-check"
+                class="form-control-feedback"
+                aria-hidden="true"
+                style="display: none"><img
+                  class="check-icon"
+                  src="{{ images.check.svg }}"
+                  alt="Checkmark"></span>
               <span id="cvd-sr" class="sr-only">(success)</span>
             {% endunless %}
           </div>
-          
+
         </div>
 
         <div id="cvd-help" class="text-center bubble bubble-cvd">
@@ -63,10 +186,25 @@
         </div>
 
         {% if config.enable_3d_card_field %}
-          <div class="form-group" id="3d-field" style="display: none">
+          <div
+            class="form-group"
+            id="3d-field"
+            style="display: none">
             <div class="col-xs-12">
               <div class="checkbox">
-                <label><input type="checkbox" id="3d" name="3d" value="1"> <strong>{% t Enable 3D Secure %}</strong></label> <img class="icon clickable" style="margin-bottom: 3px; margin-left: 0;" src="{{ images.question-circle.svg }}" alt="CVV/CVD" data-toggle="#three-d-help">
+                <label><input
+                    type="checkbox"
+                    id="3d"
+                    name="3d"
+                    value="1">
+                  <strong>{% t Enable 3D Secure %}</strong>
+                </label>
+                <img
+                  class="icon clickable"
+                  style="margin-bottom: 3px; margin-left: 0;"
+                  src="{{ images.question-circle.svg }}"
+                  alt="CVV/CVD"
+                  data-toggle="#three-d-help">
               </div>
             </div>
           </div>
@@ -81,27 +219,39 @@
           <div class="col-xs-12">
             {% capture button_text %}
               {% if model.transaction_type == "payment" %}
-                {% t Pay %} <span id="total-field">{{ model.formatted_amount }} {{ model.currency }}</span>
+                {% t Pay %}
+                <span id="total-field">{{ model.formatted_amount }} {{ model.currency }}</span>
               {% elsif model.transaction_type == "subscription" %}
                 {% t Create subscription %}
                 {% if config.enable_amount_for_subscription %}
-                  <span id="total-field"> ({{ model.formatted_amount }} {{ model.currency }})</span>
+                  <span id="total-field">
+                    ({{ model.formatted_amount }} {{ model.currency }})</span>
                 {% endif %}
               {% elsif model.transaction_type == "card" %}
                 {% t Save card %}
               {% elsif model.transaction_type == "payout" %}
-                {% t Receive %} <span id="total-field">{{ model.formatted_amount }} {{ model.currency }}</span>
+                {% t Receive %}
+                <span id="total-field">{{ model.formatted_amount }} {{ model.currency }}</span>
               {% endif %}
             {% endcapture %}
-            <button type="submit" class="btn btn-info" data-card-valid-swap="btn-success,btn-info">{{ button_text }}</button>
+            <button
+              type="submit"
+              class="btn btn-info"
+              data-card-valid-swap="btn-success,btn-info">{{ button_text }}</button>
             {% if model.calculate_fee %}
               <p id="fee" class="text-center">
-                {% t Payment fee %}: <span id="fee-field"><i>{% t Fill in card number %}</i></span>
+                {% t Payment fee %}:
+                <span id="fee-field">
+                  <i>{% t Fill in card number %}</i>
+                </span>
               </p>
             {% endif %}
+            {% if config.reservation_notice %}
+              <div class="reservation-notice">{{ config.reservation_notice }}</div>
+            {% endif %}
           </div>
         </div>
       </div>
     </div>
   </form>
-</div>
+</div>

templates/selector.liquid

@@ -2,7 +2,7 @@
   <div class="container">
     <div class="row">
       <div class="col-xs-12 text-center-xs">
-        <h3>Select Payment Method</h3>
+        <h3>{% t Select Payment Method %}</h3>
       </div>
       <div class="text-center">
         {% for method in model.payment_methods %}