|
|
@@ -33,19 +33,58 @@
|
|
|
</div>
|
|
|
<br />
|
|
|
<div class="row center">
|
|
|
- <a href="#stripeModal" class="btn-large waves-effect waves-light teal accent-4">I want to Donate!</a>
|
|
|
+ <a class="waves-effect waves-light btn modal-trigger waves-light teal accent-4" href="#stipeModal">I want to Donate!</a>
|
|
|
<p>By donating to musare.com you agree to the <a href="/terms">TERMS OF SERVICE</a> and <a href="/privacy">PRIVACY POLICY!</a> (Make sure you read it!)</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
{{> footer}}
|
|
|
|
|
|
- <div id="stripeModal" class="modal">
|
|
|
+ <div id="stipeModal" class="modal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <h4>Donate with stripe!</h4>
|
|
|
+ <form action="" method="POST" id="payment-form">
|
|
|
+ <span class="payment-errors"></span>
|
|
|
|
|
|
+ <div class="form-row">
|
|
|
+ <label>
|
|
|
+ <span>Card Number</span>
|
|
|
+ <input type="text" size="20" data-stripe="number"/>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <label>
|
|
|
+ <span>CVC</span>
|
|
|
+ <input type="text" size="4" data-stripe="cvc"/>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row">
|
|
|
+ <label>
|
|
|
+ <span>Expiration (MM/YYYY)</span>
|
|
|
+ <input type="text" size="2" data-stripe="exp-month"/>
|
|
|
+ </label>
|
|
|
+ <span> / </span>
|
|
|
+ <input type="text" size="4" data-stripe="exp-year"/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button type="submit">Submit Payment</button>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <a href="#!" class=" modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
- // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
|
|
|
- $('.modal-trigger').leanModal();
|
|
|
- });
|
|
|
+ $('.modal-trigger').leanModal({
|
|
|
+ dismissible: true, // Modal can be dismissed by clicking outside of the modal
|
|
|
+ opacity: .5, // Opacity of modal background
|
|
|
+ in_duration: 300, // Transition in duration
|
|
|
+ out_duration: 200, // Transition out duration
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
</script>
|
|
|
</template>
|
johand199