mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-25 15:38:56 +00:00
83 lines
4.3 KiB
HTML
83 lines
4.3 KiB
HTML
{{#if showCoupon}}
|
|
<section class="country">
|
|
<label for="coupon">Coupon</label>
|
|
<input id="coupon" name="coupon" placeholder="Gimmie the magic" value="{{values.coupon}}">
|
|
<span class="highlight">🎉 {{values.discount}}</span>
|
|
<p><small>The discount will be applied to the price below.</small></p>
|
|
</section>
|
|
{{/if}}
|
|
|
|
<section class="payment-type">
|
|
<span class="label">Plan</span>
|
|
<div class="options">
|
|
<label class="hasinput" for="yearly"><input id="yearly" type="radio" name="subscription" {{#equal values.subscription "yearly"}}checked{{/equal}}{{#unless values.subscription}}checked{{/unless}} value="yearly">Yearly <span data-price="99.99" id="price-yearly">£99<small>.99</small></span> <span class="highlight">– saving <span data-price="55" id="discount">£55</span></span> </label>
|
|
<label class="hasinput" for="monthly"><input id="monthly" {{#equal values.subscription "monthly"}}checked{{/equal}} type="radio" name="subscription" value="monthly">Monthly <span id="price-monthly" data-price="12.99">£12<small>.99</small></span></label>
|
|
</div>
|
|
</section>
|
|
|
|
<p class="payment-errors">{{{flash}}}</p>
|
|
|
|
<div class="payment-details">
|
|
<div>
|
|
<label for="email">Email</label>
|
|
<span class="inputWithImage payment-details-email">
|
|
<b class="icon-mail"></b>
|
|
<input {{#unless user}}disabled{{/unless}} id="email" value="{{values.email}}" {{#unless values.email}}autofocus{{/unless}} placeholder="you@example.com" type="email" name="email" required>
|
|
</span>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="cardnumber">Card details</label>
|
|
<div class="carddetails">
|
|
<span class="inputWithImage payment-details-card-number">
|
|
<b class="icon-credit"></b>
|
|
<input {{#unless user}}disabled{{/unless}} {{#if values.email}}autofocus{{/if}} id="cardnumber" placeholder="Card number" value="{{values.number}}" type="text" name="number" x-autocompletetype="cc-number" required data-stripe="number">
|
|
</span>
|
|
<span class="inputWithImage payment-details-card-date">
|
|
<b class="icon-calendar-o"></b>
|
|
<input {{#unless user}}disabled{{/unless}} id="expiry" value="{{values.expiry}}" placeholder="MM / YY" type="text" name="expiry" size="7" required x-autocompletetype="cc-exp" maxlength="9" data-stripe="expiry">
|
|
</span>
|
|
<span class="inputWithImage payment-details-card-cvc">
|
|
<b class="icon-lock"></b>
|
|
<input {{#unless user}}disabled{{/unless}} id="cvc" placeholder="CVC" value="{{values.cvc}}" type="text" name="cvc" size="4" pattern="\d*" x-autocompletetype="cc-csc" required autocomplete="off" data-stripe="cvc">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <section class="buyer-type">
|
|
<input id="business" type="checkbox" name="buyer_type" {{#equal values.buyer_type "business"}}checked{{/equal}} value="business">
|
|
<label for="business">Paying as a business</label>
|
|
</section>
|
|
|
|
<section class="business{{#equal values.buyer_type "business"}}{{else}} disabled{{/equal}}">
|
|
<div>
|
|
<label for="country">Country</label>
|
|
<select name="country" id="country" data-stripe="address_country">
|
|
{{> country}}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="disabled vat">
|
|
<label for="vat">VAT</label>
|
|
<span id="vatiso"></span>
|
|
<input id="vat" name="vat" type="text" value="{{values.vat}}">
|
|
<button id="validateVat">Check</button>
|
|
<br>
|
|
</div>
|
|
<small class="fadeout">Powered by <a href="https://taxtools.io">taxtools.io</a></small>
|
|
</section> -->
|
|
|
|
|
|
<section>
|
|
<button class="actionButton actionButton-rounded actionButton-primary actionButton-jumbo" {{#unless user}}disabled{{/unless}} id="pay">Upgrade!</button>
|
|
<input type="hidden" name="_csrf" value="{{token}}">
|
|
</section>
|
|
|
|
<section class="footnotes">
|
|
<p class="options ccy"><small><span class="ccy-legend">Show currency in</span> <label for="ccy-gbp"><input type="radio" value="GBP" name="ccy" checked id="ccy-gbp"> GBP</label> <label for="ccy-usd"><input type="radio" value="USD" name="ccy" id="ccy-usd"> USD</label> <label for="ccy-eur"><input type="radio" name="ccy" value="EUR" id="ccy-eur"> EUR</label></small></p>
|
|
<p class="ccy-note" hidden><small>Note that you will be invoiced in GBP, and that non-GBP prices are approximated using Google forex rates.</small></p>
|
|
|
|
<!-- <p><small>Note that VAT does not apply outside the European Union. If your EU company is registered for VAT outside the UK, then VAT will not be added.</small></p> -->
|
|
</section>
|