Created
July 23, 2014 23:52
-
-
Save matthewarkin/eef2c7943f496a85c24c to your computer and use it in GitHub Desktop.
Stripe Add Subscription Modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="modal" style="opacity: 1; -webkit-transform: none; top: 130px; display: block;"><div class="subscription-add-or-edit-view standard modal-dialog-form-content-view"><div class="modal-inner"> | |
<div class="modal-header"> | |
<h2>Add subscription</h2> | |
</div> | |
<div class="modal-sheet-inner"> | |
<div class="modal-content"> | |
<span class="modal-error"> | |
</span> | |
<div class="content"><div class="subscription-form-view"><div class="create-form"> | |
<form class="form"> | |
<div class="error form_error form_message"> | |
</div> | |
<div class="container"> | |
<div class="dropdown-container"><div class="placeholder full_field" name="plan"><div class="dropdown-search-field-view form-row plan"> | |
<div class="dropdown-search-widget-view plan"> | |
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_kqi84cvkm0m86w29" style="width: auto;"> <span class="select2-chosen"> </span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="kqi84cvkm0m86w29" class="field select2-offscreen" type="hidden" name="plan" placeholder="Choose a plan..." tabindex="-1" title=""> | |
</div> | |
<span class="tooltip_placeholder"></span> | |
<span id="plan_error" class="field_error "></span> | |
<span id="plan_success" class="field_success"></span> | |
</div></div></div> | |
<!-- Plan list --> | |
<!-- Loading state --> | |
<div class="loading" style="display: none;"> | |
Loading plans... | |
</div> | |
<!-- Has subscriptions --> | |
<div class="plans"> | |
<div class="empty hidden"> | |
<p>You have no plans yet. <a class="create_plan">Create one.</a></p> | |
</div> | |
</div> | |
<div class="prorate-option checkbox-field-view form-row" style="display: none;"> | |
<div class="placeholder full_field" name="prorate"><div class="checkbox-field-view form-row prorate"><label class="default-label" for="prorate"><div class="checkbox-widget-view prorate"><input class="edit_mode field" type="checkbox" name="prorate" id="prorate" value="" style="display: none;"> | |
</div>Prorate fee<span class="tooltip_placeholder"></span></label> | |
<span id="prorate_error" class="field_error "></span> | |
<span id="prorate_success" class="field_success"></span></div></div> | |
<div class="prorate-option-explanation"> | |
<em class="prorate-explanation"> | |
Prorating means we'll automatically adjust for the exact time spent on each plan. <a class="arrow" target="_blank" href="https://stripe.com/docs/api#update_subscription">Learn more</a> | |
</em> | |
<p class="prorate-forced-off-explanation"> | |
<em>This change keeps your trialing subscription still in trialing mode, so there's nothing to prorate.</em> | |
</p> | |
<p class="prorate-forced-on-explanation"> | |
<em>We'll immediately end the old subscription, restart the billing cycle, and credit the customer for unused time on the old subscription when you switch billing intervals (or vice versa) or add a trial period when the subscription wasn't trialing (or vice versa).</em> | |
</p> | |
</div> | |
</div> | |
</div> | |
<div class="show-advanced-options-control" style="display: block;"><div class="disclosure-triangle-view open"><a><span></span> More options</a></div></div> | |
<!-- extra options --> | |
<div class="container advanced-options" style="display: block;"> | |
<div class="placeholder full_field" name="quantity"><div class="form-field-view form-row quantity"><label for="quantity" class="default-label">Quantity:</label> | |
<div class="text-widget-view quantity"> | |
<input id="kxp30vd38tmrhpvi" class="field" type="text" name="quantity"> | |
</div> | |
<span class="tooltip_placeholder"></span> | |
<span id="quantity_error" class="field_error "></span> | |
<span id="quantity_success" class="field_success"></span> | |
</div></div> | |
<div class="placeholder full_field" name="trial_end"><div class="date-to-timestamp-field-view form-row trial_end"><label for="trial_end" class="default-label">Trial end:</label> | |
<div class="date-to-timestamp-widget-view trial_end"> | |
<input id="0puqhr4gbpjve7b9" class="field hasDatepicker" type="text" name="trial_end"> | |
</div> | |
<span class="tooltip_placeholder"></span> | |
<span id="trial_end_error" class="field_error "></span> | |
<span id="trial_end_success" class="field_success"></span> | |
</div></div> | |
<div class="placeholder full_field" name="coupon"><div class="dropdown-search-field-view form-row coupon"><label for="coupon" class="default-label">Coupon:</label> | |
<div class="dropdown-search-widget-view coupon"> | |
<a href="#" class="select2-choice field" tabindex="-1" id="s2id_c24bhkn6jxhnz5mi" style="width: auto;"> <span class="select2-chosen"> </span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><input id="c24bhkn6jxhnz5mi" class="field select2-offscreen" type="hidden" name="coupon" placeholder="Select a coupon..." tabindex="-1" title=""> | |
</div> | |
<span class="tooltip_placeholder"></span> | |
<span id="coupon_error" class="field_error "></span> | |
<span id="coupon_success" class="field_success"></span> | |
</div></div> | |
</div> | |
<div id="projection" class="hidden"></div> | |
</form></div> | |
</div></div> | |
</div> | |
<div class="modal-footer"> | |
<div class="content"></div> | |
<div class="spinner"><div class="spinner-view" style="display: none;"></div></div> | |
<button name="close_modal" class="button medium grey"><span>Cancel</span></button> | |
<button name="confirm" class="button medium blue"><span>Add subscription</span></button> | |
</div> | |
</div> | |
</div> | |
</div></div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment