Diglabs new checkout

by riverguy

HTML

<p>hello world</p>

<div id="frequency" class="stripe-payment-form-row">
    <label>Gift Type: </label>
    <input type="radio" name="frequency" value="once" checked>Once 
    <input type="radio" name="frequency"           value="Monthly">Monthly

<br>
<br>
</div>

<div id="once" class="stripe-payment-form-row">
    <label>Single </label><br>
    <input type="radio" name="level" value="2500" data-amount="2500" data-option="intro">Introductory $25</input><br>
    <input type="radio" name="level" value="4000" data-amount="4000" data-option="reg">Regular Membership</input><br>
    <input type="Radio" name="level" value="1000" data-amount="1000" data-option="other">Other/Contribution $10 </input><br>
<br>
<br>
</div>


    <div id="mo" class="stripe-payment-form-row">
    <label>Monthly Member Level</label><br>
    <input type="radio" name="level" value="250" data-amount="250" data-option="intro">Introductory Monthly $2.50</input><br>
    <input type="radio" name="level" value="400" data-amount="400" data-option="reg">Regular Monthly $4</input><br>
    <input type="Radio" name="level" value="100" data-amount="100" data-option="other">Other/Contribution $1/mo</input><br>
</div>

<br><br><br><br>
<div class="stripe-payment-form-row">
    <label>Ticket Type 1</label>
    <select name="package" id="package">
        <option value="A" data-amount="700" dajnta-options="#packageA">Package A - $7</option>
        <option value="B" data-amount="1400" data-options="#packageB">Package B - $14</option>
    </select>
</div>
<div class="stripe-payment-form-row">
    <label>Ticket Type 2</label>
    <select name="alternate" id="alternate">
        <option value="A" data-amount="800" data-options="#alternateA">Package C - $8</option>
        <option value="B" data-amount="1600" data-options="#alternateB">Package D - $16</option>
    </select>
</div>    
<div class="stripe-payment-form-row">
    <label>Discount</label>
    <select name="discount" id="discount">
         <option...

CSS

.stripe-payment-form-row {
    margin: 5px 0;
}
.stripe-payment-form-row label {
    display: block;
    float: left;
    width: 200px;
}

JavaScript

(function($){
  $(document).ready(function(){
    
      $("div#mo").hide();

  });


})(jQuery);


/*
    $("#frequency").change(function (){

         alert( $("#frequency").val());

          });
*/

/*

    $('#package').change(function(){
            calculateTotal();
        });
        
        $('#alternate').change(function(){
            calculateTotal();
        });
        
        $('#discount').change(function(){
            calculateTotal();
        });
        
        /* $('.options input[type=checkbox]').change(function(){
           calculateTotal(); 
        }); */
        
        calculateTotal();
    });
    
    function calculateTotal(){
        var base = $('#package').find(':selected').data('amount');
        var alt = $('#alternate').find(':selected').data('amount');
        var disc = $('#discount').find(':selected').data('amount');
        var visibleOptions = $('.options:visible');
        var checkedOptions = visibleOptions.find('input:checked');
        var options = 0;
        checkedOptions.each(function(){
             options += $(this).data('amount');
        });
        
        var totalCents = parseInt( (base + alt) * disc);
        $('#amount').val(totalCents);
        var totalDollars = totalCents/100;
        $('#amountShown').val(totalDollars);
    }
})(jQuery);

*/